[关闭]
@lizlalala 2016-05-07T11:31:08.000000Z 字数 1061 阅读 870

react学习(一)

react


1. start

:下载的包是react各种版本的js文件,用法类似于引入jquery,请挪步官方文档 return,以下均针对npm管理包展开。

2. 安装依赖

  1. npm install --save-dev react react-dom gulp-babel gulp babelify babel-preset-react babel-preset-es2015

补充

package.json示意

package.json

3.新建.babelrc文件写入

  1. {"presets":["react","es2015"]} //in case we will use es6

4. 建立项目框架,新添main.js,main.html

如图

项目结构示意图

  1. // main.js
  2. var React = require('react');
  3. var ReactDOM = require('react-dom');
  4. ReactDOM.render(
  5. <h1>Hello, world!</h1>,
  6. document.getElementById('example')
  7. );
  8. //用于将模板转为 HTML 语言,并插入指定的 DOM 节点(example)
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Hello React!</title>
  6. </head>
  7. <body>
  8. <div id="example"></div>
  9. <script src="src/javascripts/main.js"></script>
  10. </body>
  11. </html>

如果用babel这样引入的话,是不需要在head的script标签中加入的,只需最后编译好的js文件即可。

5. 编辑gulpfile.js

gulpfile.js

6. 运行gulp build,gulp babel:watch

7. browserify

(将多个模块合并成一个文件,同时让服务器端的CommonJS格式的模块可以运行在浏览器端)

  1. browserify build/javascripts/main.js > build/javascripts/app.js

所有的js都会整合进app.js里面,也就是说,在html中也只需引入它即可。

8. 更新main.html中引入的js文件

编译后的html文件

9. finally,打开html文件就可以看到啦

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注