React 官网
推荐一篇学习路线的文章

• React 优点:
  1.组件化, 易于分工合作
  2.虚拟Dom, 性能高
  3.跨平台, 支持移动端
• 环境准备
  0.bower 方便管理前端用到的包
  1.babel 用于编译JSX
  2.react
• JSX
  JSX 是增强型的JS, 包含了ES6的语法支持.
  同时支持在js中编写html (需要注意的是,编写HTML时, 有且只能有一个顶级元素, 该顶级元素允许有多个子级元素)

安装bower

安装环境: Mac
bower作用:前端套件管理
bower 依赖: node npm git
安装:
sudo npm install -g bower
可能出现的相关报错:
Error: EACCES: permission denied, open '/Users/***/.config/configstore/bower-github.json'
解决方案:
sudo chown -R $USER ~/.config/configstore/
然后bower -v 出现版本号表示安装成功

使用bower下载react 和babel

cd到工程目录,运行
bower install react
bower install bebal
完成后可以看到如下目录:

bower安装目录.png

Hello World

    <script src="./bower_components/react/react.development.js"></script>
     <script src="./bower_components/react/react-dom.development.js"></script>
     <script src="./bower_components/babel/browser.js"></script>

     <script type="text/babel">
        window.onload = function(){
            var div1 = document.getElementById("div1");
            ReactDOM.render(
                <span>Hello World</span>,
                div1
            );
        }
     </script>

讲解

1. script标签的type是text/babel

<script type="text/babel"> react代码 </script>
原因是浏览器不支持jsx, 需要使用babel编译

2. ReacDOM.render的两个参数

ReactDOM.render(需要渲染的元素或组件, 渲染到什么位置)

3.js中编写html时, 有且只能有一个顶级元素, 该顶级元素允许有多个子级元素

ReactDOM.render(
  <span>Hello World</span>,  //正确, 只有一个顶级元素
  div1
);
ReactDOM.render(
  <span>Hello <span>World</span></span>,  //正确, 只有一个顶级元素,允许有子级元素
  div1
);
ReactDOM.render(
  <span>Hello </span><span>World</span>,  //不正确, 有多个顶级元素
  div1
);
ReactDOM.render(
  Hello World,  //不正确, 没有顶级元素
  div1
);