知识点
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。安装以后的目录结构如下:
b、在index中依次引入react核心包react.js和react-dom.js,babel转换包bowser.js。
建立一个div,id为main,建立一个javascript代码段,类型为text/babel调用方ReactDOM的render方法,如上图。使用react将h1标签渲染到main div中并显示。打开浏览器进行浏览,效果如下: