React开发环境配置

标签（空格分隔）： React

网上看了一些配置方法，感觉太复杂。很多都包含了开发工具的搭建，其实不太适合初学者来看。以下是自己在本地搭建的一个开发环境的步骤。很简单。

准备资源

下载ReactDemo

https://github.com/ruanyf/react-demos

将其中的build文件夹拖拽到项目中即可。

如果build文件夹中没有包含browser.min.js,那么需要访问https://cdnjs.com/并且搜索browser.min.js找到babel-core文件并下载，拖拽到build文件夹中

我的browser.min.js的下载地址为

https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js

创建项目

创建一个文件夹，将build文件夹复制到项目文件夹下。然后就可以开始Rect开发之旅了。

首先编写一个React模板文件(只是为了方便后面的开发，因为后面每个文件的创建都需要这几个操作)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--react.js是React的核心库-->
    <script src="./build/react.js"></script>
    <!--react-dom.js的作用是提供与DOM相关的额功能-->
    <script src="./build/react-dom.js"></script>
    <!--browser.min.js的作用是将JSX语法转换成JS语法-->
    <script src="./build/browser.min.js"></script>
</head>
<body>

</body>
<!--这里插入JS代码-->
<!--注意.这里的type要用text/babel类型-->
<script type="text/babel">

</script>
</html>

编写第一个ReactDemo，创建一个HelloReact.html文件，将上面需要导入的三个文件导入到项目中。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <!--react.js是React的核心库-->
    <script src="./build/react.js"></script>
    <!--react-dom.js的作用是提供与DOM相关的额功能-->
    <script src="./build/react-dom.js"></script>
    <!--browser.min.js的作用是将JSX语法转换成JS语法-->
    <script src="./build/browser.min.js"></script>

</head>
<body>

<div id="container">

</div>

</body>
<!--这里插入JS代码-->
<!--注意.这里的type要用text/babel类型-->
<script type="text/babel">
    /*
     * ReactDom.render():React的最基本的方法,用于将模板转换成HTML语言,渲染DOM,并插入指定的DOM节点
     * 第一个参数:模板的渲染内容(HTML形式)
     * 第二个参数:这段模板需要插入的DOM节点(本程序中,是id为container的div节点)
     * 第三个参数:渲染后的回调,一般不用
     * */
    ReactDOM.render(
        <h1>Hello React</h1>,
            document.getElementById('container')
    );
</script>
</html>

推荐方式二
方式二：http://www.jianshu.com/p/a62da41dacce