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

React 初接触

一. react的安装

1). 使用方法
可以直接下载使用 http://facebook.github.io/react/ 下载最新
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 文件中直接引用
- react.min.js - React 的核心库
- react-dom.min.js - 提供与 DOM 相关的功能
- babel.min.js - Babel 可以将 ES6 代码转为 ES5 代码，
这样我们就能在目前不支持 ES6 浏览器上执行 React 代码。Babel 内嵌了对 JSX 的支持。通过将 Babel 和 babel-sublime 包（package）一同使用可以让源码的语法渲染上升到一个全新的水平。

如果我们需要使用 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

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

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

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