Hello React

知识点

1、JSX语法
     2、React基本语法
     3、bower的基本使用
     4、babel的基本使用

开启react之旅

一、你好react

1、准备工作：创建一个项目文件夹，目录结构如下显示。

目录结构

        注意：lib文件是使用bower安装插件文件时候自动生成的，不需要手动进行创建。
        2、bower工具的使用
          a、安装nodejs环境
          b、安装cnpm，使用cnpm或者npm命令安装bower插件。具体命令：cnpm/npm install bower -g
          c、在项目中使用bower，首先创建bower的配置文件，打开dos窗口（win+r ---> cmd），window下使用命令， echo {"directory":"lib"} > .bowerrc 进行创建，然后使用命令bower init 进行初始化，一路默认即可，详细 配置请看bower官网（ http://www.bower.io ）。最后安装需要使用的插件，例如jquery，bower install jquery --save
          说明：{"directory":"lib"} 指定bower安装插件的位置，bower安装插件的时候会自动将插件下载到lib目录下，当你不确定bower中是否存在某一插件的时候，使用bower info 插件名 命令能够在bower中调出插件的信息（版本和git地址），bower安装命令的--save指令，表示将安装的插件信息保存到bower.json文件中，作为以后使用bower升级插件的版本依据。
        3、开启react之旅
          a、使用bower 安装react，babel。安装以后的目录结构如下：

bower安装依赖目录结构

          b、在index中依次引入react核心包react.js和react-dom.js，babel转换包bowser.js。

详细代码段

建立一个div，id为main，建立一个javascript代码段，类型为text/babel调用方ReactDOM的render方法，如上图。使用react将h1标签渲染到main div中并显示。打开浏览器进行浏览，效果如下：

第一个React效果