(1) React.js环境搭建
- (1) 在项目根目录创建package.json文件
npm init
- (2) 安装react和react-dom
npm install react react-dom --save
- (3) 启用 ES6 和 JSX
--（安装babel-preset-react ，babel-preset-es2015）
--（安装babel-core，babel-loader）
请确保你已经安装了babel-preset-react 和 babel-preset-es2015 ，并且已经在你的 .babelrc 配置中启用了他们。
-- 下一代的javascript标准（ES6，ES7），这些标准目前并未被当前的浏览器完全的支持；
使用基于JavaScript进行了拓展的语言，比如React的JSX 。
-- Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，不过webpack把它们整合在一起使用，但是对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-preset-es2015包和解析JSX的babel-preset-react包）。
npm install babel-preset-react babel-preset-es2015 babel-core babel-loader --save-dev
- (4)安装webpack相关
1.如果没安装过webpack需要先全局安装webpack，( webpack-dev-server也需要全局安装 )
npm install webpack -g
npm install webpack-dev-server -g
2.安装webpack和webpack-dev-server
npm install webpack webpack-dev-server --save-dev
3.安装相关的loader
npm install style-loader css-loader less-loader url-loader json-loader --save-dev
npm install react-hot-loader --save
//处理图片，在指定的图片大小范围内自动启用base64编码图片（url-loader）
//安装less-loader前 需要安装 先安装 less
//react-hot-loader会在第6点中详细解释
npm install less --save-dev
4.安装相关的插件 ( html-webpack-plugin ) + ( extract-text-webpack-plugin )
npm install html-wepack-plugin --save-dev
html-webpack-plugin
会在指定的输出（output）输出文件夹里生成indexhtml文件，并且会自动引入同文件夹里面的js、css等文件。
---------------------------------------------
npm install extract-text-webpack-plugin --save-dev
extract-text-webpack-plugin
该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
//extract:提取的意思
html-webpack-plugin
html-webpack-plugin插件在webpack.config.js中的配置
webpack.config.js如下：
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./app/index.js',
output: {
path: path.resolve(__dirname, './dist'),
filename: 'bundle.js'
},
module:{
loaders: [ ]
},
plugins:[
new HtmlWebpackPlugin(),
]
};
// 最后的效果：在指定的输出（output）输出文件夹里生成indexhtml文件
//个人感觉没什么用
(html-webpack-plugin详细)http://blog.csdn.net/keliyxyz/article/details/51513114
5.配置webpack.config.js
- 关于module:加载器配置 loaders
- 关于module:加载器配置 loaders
module配置选项
功能描述
test
一个匹配loaders所处理的文件的拓展名的正则表达式（必须）
loader
loader的名称（必须）
include/exclude
手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
query
为loaders提供额外的设置选项（可选）
6.配置react-hot-loader
-- 简单的讲，就是使用 react 编写代码时，能让修改的部分自动刷新。但这和自动刷新网页是不同的，因为 hot-loader 并不会刷新网页，而仅仅是替换你修改的部分。
-- react-hot-loader 是对 webpack 的热加载进行了改进，支持 react 组件状态不丢失。
- (6.1) 安装react-hot-loader
npm install react-hot-loader --save-dev
- (6.2)另外 react-hot-loader 是基于 webpack-dev-server，所以还得安装 webpack-dev-server
其实上面已经安装过webpack-dev-server了
----------------------
npm install webpack-dev-server --save-dev
- (6.3)配置webpack-dev-server
使用 react-hot-loader 时，首先还是要让 webpack-dev-server 打开。
在根目录新建 server.js，做以下配置：
(webpack相关)https://segmentfault.com/a/1190000006178770
(详细)http://www.jianshu.com/p/5253b99e4e25
http://blog.csdn.net/qq_27080247/article/details/70473571
http://blog.csdn.net/liuyinghui523/article/details/54582053
http://www.jianshu.com/p/237260271dc8
(react-hot-loader配置)https://segmentfault.com/a/1190000004660311
(webpack-dev-server配置)https://segmentfault.com/a/1190000006964335
(Webpack——令人困惑的地方 )http://blog.csdn.net/a1104258464/article/details/51914450
- (5)用 webpack --watch实现webpack自动打包
(2) creact-react-app官方的脚手架构建工具
- 命令行如下：
cnpm install create-react-app -g //全局安装
create-react-app + 你要开发的app名字(new-app)
cd new-app
cnpm start
http://localhost:3000/地址查看项目
- npm run eject ：命令暴露webpack等配置文件
npm run eject
//暴露webpack等配置文件，对webpack等相关文件进行配置
- 特点：
无需配置；
集成了对 React, JSX, ES6 和 Flow 的支持；
集成了开发服务器；
配置好了浏览器热加载的功能；
在 JavaScript 中可以直接 import CSS 和图片；
自动处理 CSS 的兼容问题，无需添加 -webkit 前缀；
集成好了编译命令，编译后直接发布成产品，并且还包含了 sourcemaps。 - 执行 npm test 或 yarn test 可以执行测试动作
- 编译项目执行 npm run build 或 yarn build；
- 入口文件
index.js
-------------------------
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker'; //服务配置文件
ReactDOM.render(<App />, document.getElementById('root')); //渲染app组件，挂在到html的root节点
registerServiceWorker(); //启动相关的配置服务
app.js组件
------------------------
import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome to React</h2>
</div>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>
);
}
}
export default App;
--------------------------------
以上结构和react-native十分相似呢
index.html
-------------------------------
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div> //挂载的节点
</body>
</html>
效果图
