react入门环境搭建2.docx

react入门——环境搭建发表于?2014 年 11 月 13 日?由?adminreact入门——环境搭建首先，你需要安装0.10及以上版本的nodejs。环境搭建步骤如下：1、npm initmkdir helloreactcd helloreactnpm init .name: (helloreact)version: (0.0.0) 0.1.0description: hello world exampleentry point: (index.js) js/app.jstest command:git repository:keywords: helloreact, reactauthor: guotielicense: (ISC) MITAbout to write to D:\hybrid\helloreact\package.json:{ name: helloreact, version: 0.1.0, description: hello react example, main: js/app.js, scripts: { test: echo \Error: no test specified\ exit 1 }, keywords: [ helloreact, react ], author: guotie, license: MIT}Is this ok? (yes) yes2、修改生成的package.json文件，增加以下内容 dependencies: { flux: ^2.0.0, object-assign: ^1.0.0, react: ^0.12.0 }, devDependencies: { browserify: ^6.2.0, envify: ^3.0.0, jest-cli: ~0.1.17, reactify: ^0.15.2, uglify-js: ~2.4.15, watchify: ^2.1.1 }, browserify: { transform: [ reactify, envify ] },3、npm install安装缺失的模块4、创建文件夹，文件mkdir jsmkdir js/components5、创建入口js文件：js/app.jsvar React = require(react);var App = require(./components/HelloReact.react);React.render( App /, document.getElementById(app));6、创建一个component：js/components/HelloReact.react.jsvar React = require(react);var HelloReact = React.createClass({render: function() {return (pHello, React!/p)}})module.exports = HelloReact7、创建测试hello world html文件：index.html!doctype htmlhtml lang=enheadmeta charset=utf-8titleHello React ---- react环境搭建演示/title/headbodydiv id=app/divscript src=js/bundle.js/script/body/html8、使用watchify编译生成js/bundle.jswatchify -o js/bundle.js -v -d .1534144 bytes written to js/bundle.js (1.99 seconds)9、使用浏览器打开index.htmlOk, 一个最简单的react应用就搞定了！10、github地址/guotie/helloreact