「React」环境搭建「React」环境搭建

安装NPM和Node.js NodeJS官网
安装完以后就会有最新版的Node.js和NPM
创建App目录

npm init

生成的package.json 里，** scripts** 最重要，这里定义的参数会在** npm run **的时候进行调用。
具体指南：阮一峰——npm scripts使用指南

"scripts": { "build": "webpack", "dev": "webpack-dev-server --devtool eval-source-map --progress --host 192.168.20.6 --colors --hot --content-base ./build --module-bind 'css=style!css' " },

--host 192.168.20.6 ，用于 webpack server 时所用的地址
--hot 热更新

安装webpack app根目录下创建 webpack.config.js

npminstall webpack --save-dev --save-dev 保存到当前文件夹

webpack作用

打包应用
打包压缩静态文件（css,jsx)
热更新

安装 webpack-dev-server 热更新服务器详细看 webpack-dev-server 解读

npm install --save-dev webpack-dev-server它将在当前文件夹下启动一个websocket服务，端口号为8080

在package.json里我们只需要添加，这一段东西（script有了，其实这一步没必要）

devServer: { port: 8080 //设置监听端口（默认的就是8080） contentBase: "./build",//本地服务器所加载的页面所在的目录 colors: true,//终端中输出结果为彩色 historyApiFallback: true,//不跳转，用于开发单页面应用，依赖于HTML5 history API 设置为true点击链接还是指向index.html }

安装React最新版本

npm install --save-dev react react-dom

安装Babel

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-2

专门用来热更新 React的react-hot-loader(最新版本) github地址react-hot-loader

npm install --save react-hot-loader@next

最重要的：新建.babelrc并配置

// 新建.babelrc { "presets": [ ["es2015", {"modules": false}], // webpack现在已经支持原生的import语句了, 并且将其运用在tree-shaking特性上 "stage-2", // 规定JS运用的语言规范层级 // Stage 2 是 "草案", 4 是 "已完成", 0 is "稻草人(strawman)"。 // 详情查看 https://tc39.github.io/process-document/ "react" // 转译React组件为JS代码 ], "plugins": [ "react-hot-loader/babel" // 开启react代码的模块热替换（HMR） ] }

最终webpack.config.js配置

const { resolve } = require('path'); const webpack = require('webpack'); module.exports = { context: __dirname, entry: [ 'react-hot-loader/patch', 'webpack/hot/only-dev-server', './app/main.js' ], output: { path: resolve(__dirname, 'build'),//打包后的文件存放的地方 filename: "bundle.js",//打包后输出文件的文件名 publicPath: "/" }, devServer: { contentBase: resolve(__dirname, 'build'), hot: true, publicPath: '/', }, module: { rules: [ { test: /\.jsx?$/, use: [ 'babel-loader', ], exclude: /node_modules/ }, { test: /\.css$/, use: [ 'style-loader','css-loader' ], exclude: /node_modules/ }, ], }, plugins: [ new webpack.HotModuleReplacementPlugin(), new webpack.NamedModulesPlugin(), ], devtool: "cheap-eval-source-map", };

最终文件目录

文章图片
最终的文件目录结构，以后可以写个python脚本自动配置环境，奶奶的气死老子写main.js内容

import React from 'react'; import ReactDOM from 'react-dom'; import { AppContainer } from 'react-hot-loader'; import Cpt from './component'; const render =(Component) => { ReactDOM.render( , document.getElementById('div1') ) }; render(Cpt); if(module.hot) { module.hot.accept( () => { render(Cpt) }); }

写component.js