react学习01开发环境搭建之项目初始化

1、官方地址&＃xff1a;

中文文档地址 http://reactjs.cn73.9K
GitHub地址 https://github.com/reactjs-cn/react-docs8.4K
2、利用webpack部署一个项目

第一步、安装全局包

$ npm install babel -g
$ npm install webpack -g
$ npm install webpack-dev-server -g

第二部、创建项目目录

创建一个根目录&＃xff0c;目录名为&＃xff1a;react02&＃xff0c;再使用 npm init 初始化&＃xff0c;生成 package.json 文件&＃xff1a;

E:\localProject\react02>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See &＃96;npm help json&＃96; for definitive documentation on these fields
and exactly what they do.Use &＃96;npm install --save&＃96; afterwards to install a package and
save it as a dependency in the package.json file.Press ^C at any time to quit.
name: (react02) react02-webpack
react02-webpack
version: (1.0.0)
description: 使用webpack构建react项目
entry point: (index.js)
test command:
git repository:
keywords:
author: liuxinzhou
license: (ISC)
About to write to E:\localProject\react02\package.json:{"name": "react02-webpack","version": "1.0.0","description": "使用webpack构建react项目","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1"},"author": "liuxinzhou","license": "ISC"
}Is this ok? (yes) yesE:\localProject\react02>


第三步、添加依赖包及插件

因为我们要使用 React, 所以我们需要先安装它&＃xff0c;--save 命令用于将包添加至 package.json 文件。

$ npm install react --save
$ npm install react-dom --save

同时我们也要安装一些 babel 插件

$ npm install babel-core
$ npm install babel-loader
$ npm install babel-preset-react
$ npm install babel-preset-es2015

第四步、创建文件

index.html

App.jsx

main.js

webpack.config.js

第五步、设置编译器&＃xff0c;服务器&＃xff0c;载入器

配置webpack.config.js

var config &＃61; {entry: &＃39;./main.js&＃39;, //entry: 指定打包的入口文件 main.js。output: {path:&＃39;./&＃39;,filename: &＃39;index.js&＃39;,},//output&＃xff1a;配置打包结果&＃xff0c;path定义了输出的文件夹&＃xff0c;filename则定义了打包结果文件的名称。devServer: {inline: true,port: 7777},//devServer&＃xff1a;设置服务器端口号为 7777&＃xff0c;端口号你可以自己设定 。module: {loaders: [ {test: /\.jsx?$/,exclude: /node_modules/,loader: &＃39;babel&＃39;,query: {presets: [&＃39;es2015&＃39;, &＃39;react&＃39;]}}]}//module&＃xff1a;定义了对模块的处理逻辑&＃xff0c;这里可以用loaders定义了一系列的加载器&＃xff0c;以及一些正则。//当需要加载的文件匹配test的正则时&＃xff0c;就会调用后面的loader对文件进行处理&＃xff0c;这正是webpack强大的原因。
}module.exports &＃61; config;

配置package.json

{"name": "react02-webpack","version": "1.0.0","description": "使用webpack构建react项目","main": "index.js","scripts": {//"test": "echo \"Error: no test specified\" && exit 1""start": "webpack-dev-server --hot"//现在我们可以使用 npm start 命令来启动服务。//--hot 命令会在文件变化后重新载入&＃xff0c;这样我们就不需要在代码修改后重新刷新浏览器就能看到变化。},"author": "liuxinzhou","license": "ISC","dependencies": {"react": "^15.3.2","react-dom": "^15.3.2"}
}


编写index.html代码

main.js

var React &＃61; require(&＃39;react&＃39;);
var ReactDOM &＃61; require(&＃39;react-dom&＃39;);
var MainComponets &＃61; require(&＃39;./components/mainComponets.js&＃39;);
ReactDOM.render(,document.getElementById(&＃39;app&＃39;)
);

mainComponets.js

var React&＃61; require("react")
module.exports&＃61;React.createClass({render:function(){return(

第八步、运行服务

$ npm start

通过浏览器访问 http://localhost:7777/&＃xff0c;输出结果如下&＃xff1a;