react基于nodejs简单的搭建与开发方法

只需安装babel命令，即可将react的jsx写法转换成浏览器认识的js写法

1.安装nodejs（百度下载安装即可，自带npm）

2.cmd打开命令行，cd进入在自己的文件夹下

　　执行命令：

npm install --global babel-cli

npm install babel-preset-react

若本机npm无法安装完成，可以使用cnpm：如文：http://www.cnblogs.com/wuhairui/p/6796523.html

3.执行完成后，将jsx写法的react文件进行转换（此处已helloworld.js为例）

ReactDOM.render(
    <h1>Hello, world!</h1>,
    document.getElementById('example')
);

　　在该文件的目录下执行命令：

babel --presets react helloworld.js --watch --out-dir helloworld

　　转换后的js文件将会生成在helloworld文件夹中。打开后是这样的：

ReactDOM.render(React.createElement(
    'h1',
    null,
    'Hello, world!'
), document.getElementById('example'));

4.react jsx写法（babel转换前）：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <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>
    </head>
    <body>
        <div id="example"></div>
        <script type="text/babel">
        ReactDOM.render(
            <h1>Hello, world!</h1>,
            document.getElementById('example')
        );
        </script>
    </body>
</html>

5.react js写法（babel转换后）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>Hello React!</title>
        <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>
        <!-- 转换后不需要 Babel了! -->
    </head>
    <body>
        <div id="example"></div>
        <script>
        ReactDOM.render(React.createElement(
            'h1',
            null,
            'Hello, world!'
        ), document.getElementById('example'));
        </script>
    </body>
</html>

欢迎一起交流！
【http://wuhairui.cnblogs.com/】