React教程(-一 ) -- 快速构建React开发环境

2018-08-20  本文已影响0人  miner敏儿

React 初接触

一. react的安装

1). 使用方法
可以直接下载使用 <a href="http://facebook.github.io/react/ ">http://facebook.github.io/react/ </a>下载最新
2). 直接使用BootCDN的React CDN库.

<script src="https://cdn.bootcss.com/react/15.4.2/react.min.js"></script>
<script src="https://cdn.bootcss.com/react/15.4.2/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-standalone/6.22.1/babel.min.js"></script>

在.html 文件中直接引用

如果我们需要使用 JSX,则 script标签的 type 属性需要设置为 text/babel。

    <script type="text/babel">
        ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('example')//将一个 h1 标题,插入 id="example" 节点中
        );
    </script>

二. 使用npm来安装React

系统要支持node.js和npm
先验证有没有安装
node -v
npm -v

国内使用npm速度很慢,可以使用淘宝镜像cnpm命令代替npm

 npm install -g cnpm --registry=https://registry.npm.taobao.org

这样就可以使用cnpm来安装模块了

 cnpm install [name]

使用create-react-app快速构建React 开发环境
create-react-app 是来自于 Facebook,通过该命令我们无需配置就能快速构建 React 开发环境。

create-react-app 自动创建的项目是基于 Webpack + ES6 。

执行以下命令创建项目:

$ cnpm install -g create-react-app
$ create-react-app my-app
$ cd my-app/
$ npm start

你可以在 <code>src/App.js</code> 文件中修改。

如果我在文件中需要使用react-routes-dom
使用yarn add react-router-dom添加依赖 会在package.json 的dependencies 显示 在node_module中也会有此文件夹

这些东西官网上面都有 , 但是不要只是看,要动手写 ,自己算是刚接触react 做个笔记吧

上一篇下一篇

猜你喜欢

热点阅读