react.js 教程之 Installation 安装

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

运行方法

运行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命令行工具，或者直接添加到自己正在开发的项目中

创建一个新的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

将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版本