react.js 教程之 Installation 安装

react.js 教程之 Installation 安装

1. 运行方法

   运行react有三种方式
   1.如果你只是学习react，可以在http://codepen.io/gaearon/pen/rrpgNB?editors=0010上只写写代码
   2.如果你想用自己的编辑器，https://facebook.github.io/react/downloads/single-file-example.html可以下载这个html文件，直接编写代码，编译速度很慢
   3.如果是自己开发app，可以通过安装create-react-app命令行工具，或者直接添加到自己正在开发的项目中

2. 创建一个新的app应用

   这是开发react单页面应用最好的方式，提供了完善的开发环境，你可以使用最新的js特性，拥有非常好的开发体验，并且生产环境的代码优化了，使用如下命令运行react应用
   npm install create-react-app -g
   create-react-app my-app
   cd my-app
   npm start
   创建的程序不会处理后端的逻辑和数据库，仅仅是创建了一个前端的构建通道，所以你可以使用任何的后端语言。在此程序的背后使用了诸如Babel和webpack的构建工具，尽管这些工具有很复杂的配置，但是react保证让你零配置运行项目，当你写好了项目，可以使用npm run build创建优化后的代码，这些代码将放在build文件夹中，关于create-react-app命令行工具的更多介绍，请访问https://github.com/facebookincubator/create-react-app#create-react-app- 和 https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md#table-of-contents

3. 将react添加到已经存在的项目中

   添加react并不需要重写项目，我们建议你将react添加到你项目的一个小的部分中，作为一个独立的部件，看react是否能够正常工作，react可以单独使用不需要构建管道，但是我们建议你在设置这个功能，因为这样会是你的开发更高效，一个现代的构建管道包括以下几方面内容
       1.包管理器，如Yarn或者npm，方便管理第三方包
       2.打包器，如webpack或者Browserify，能够帮助你书写模块化代码并且打包成小的包用来节省下载时间
       3.编译器，如Babel，能够帮助你书写现代化的js代码，在老浏览器中照样可以用
   步骤：
       1.安装react
           npm init 
           npm install --save react react-dom
       2.安装Babel和JSX
           Babel要包含babel-preset-react或者babel-preset-es2015
       3.安装webpack
           简单的react的程序
           import React from 'react';
           import ReactDOM from 'react-dom';
           ReactDOM.render(
               <h1>Hello,world!</h1>,
               document.getElementById('root')
           )
       4.指定生产和开发使用的react版本

4. 上面有些内容没有讲到，这涉及后面的知识，后面再讲