react环境配置

来源：互联网发布：淘宝注销店铺重新开店编辑：程序博客网时间：2024/05/18 03:16

1.安装软件

(1) nodejs node下载链接

(2) npm包管理 (安装nodejs的时候已经安装了npm包管理)

2.更换npm库的源

由于国内网络环境问题，配置阿里的npm库源

npm config set registry https://registry.npm.taobao.org

3.构建项目

3.1 选择一个目录，用webstorm构建一个空白的项目

3.2 配置依赖库

打开控制台切到项目所在目录，在控制台里输入npm init 命令来初始化一个package.json文件，这个文件是一个类似于pom.xml的文件，用来描述需要的依赖库。

package.json内容：

{  "name": "myfirstreact",  "version": "1.0.0",  "description": "\"我的第一个react程序\"",  "main": "index.js",  "dependencies": {    "babel": "^6.5.2",    "webpack": "^1.14.0",    "webpack-dev-server": "^1.16.2"  },  "devDependencies": {    "babel": "^6.5.2",    "babel-loader": "^6.2.10",    "babel-preset-es2015": "^6.18.0",    "babel-preset-react": "^6.16.0",    "babel-preset-stage-0": "^6.16.0",    "css-loader": "^0.26.1",    "eslint": "^3.13.1",    "eslint-plugin-react": "^6.9.0",    "file-loader": "^0.9.0",    "jquery": "^3.1.1",    "less-loader": "^2.2.3",    "react": "^15.4.2",    "react-dom": "^15.4.2",    "react-hot-loader": "^1.3.1",    "style-loader": "^0.13.1",    "url-loader": "^0.5.7",    "webpack": "^1.14.0",    "webpack-dev-server": "^1.16.2"  },  "scripts": {    "start": "node server.js",    "lint": "eslint src"  },  "author": "",  "license": "ISC"}

3.3 安装需要的文件

npm install webpack webpack-dev-server babel --save-dev

npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react react-hot-loader jquery eslint eslint-plugin-react --save-dev

npm install babel-core

npm install --save-dev babel-preset-stage-0

--save-dev 会把下载包的相关信息写到package.json的devDependencies里面方便以后发布，其他人使用的时候只需要npm install就可以把相关的依赖下载到当前的项目里面。

在package.json里面包的版本之前的^表示可以安装类似2.x.x版本的组件但是不能安装3.x.x版本的软件
在package.json里面包的版本之前的~表示可以安装2.1.x的软件不能安装2.3.x的软件

3.4 新建一个webpack.config.js的文件

在文件里面添加如下信息

'use strict';var webpack = require('webpack');var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');var path = require('path');module.exports = {    devtool: 'eval',    entry: [        'webpack-dev-server/client?http://localhost:3000',        'webpack/hot/only-dev-server',        './src/js/entry.js'    ],    output: {        path: path.join(__dirname, 'dist'),        filename: 'bundle.js',        publicPath: '/static/'    },    plugins: [        new webpack.HotModuleReplacementPlugin(),        commonsPlugin    ],    module: {        loaders: [            {                test: /\.css$/,                loader: 'style-loader!css-loader'            },            {                test: /\.jsx?$/,                loaders: ['react-hot', 'babel'],                exclude: /node_modules/,            },            {                test: /\.(png|jpg)$/,                loader: 'url-loader?limit=8192'            },            {                test: /\.less$/,                loader: 'style-loader!css-loader!less-loader'            },            {                test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,                loader: "url-loader?limit=10000&mimetype=application/font-woff"            },            {                test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,                loader: "file-loader"            }        ]    },    resolve: {        root:'',        extensions: ['', '.js', '.json', '.less']    }};

3.5新建一个`.babelrc`的文件

里面的内容如下：

{  "presets": ["es2015", "stage-0", "react"]}

上面的是babel插件的相关信息

3.6 新建一个`.eslintrc`的文件

里面的内容如下：

{"ecmaFeatures": {  "jsx": true,  "modules": true},"env": {  "browser": true,  "node": true},"parser": "babel-eslint","rules": {  "quotes": [2, "single"],  "strict": [2, "never"],  "react/jsx-uses-react": 2,  "react/jsx-uses-vars": 2,  "react/react-in-jsx-scope": 2},"plugins": [  "react"]}

这个配置是设置js的代码相关规范的

3.7新建server.js文件

添加以下内容：

var webpack = require('webpack');var WebpackDevServer = require('webpack-dev-server');var config = require('./webpack.config');new WebpackDevServer(webpack(config), {    publicPath: config.output.publicPath,    hot: true,    inline:true,    historyApiFallback: true}).listen(3000, 'localhost', function (err, result) {    if (err) {        return console.log(err);    }    console.log('Listening at http://localhost:3000/');});

3.8创建index.html文件

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>myFirstReact</title></head><body><div id="root"></div><script type="text/javascript" src="/static/common.js" charset="utf-8"></script><script type="text/javascript" src="/static/bundle.js" charset="utf-8"></script></body></html>

3.9 创建`src/js`文件夹

3.9.1 创建`src/js/helloworld.js`：

import React, { Component } from 'react';export default class Hello extends Component {    render() {        return (            <div>                <h1>Hello, world.</h1>                <p>this is a simple section</p>                <p>终于搭建成功了</p>            </div>        );    }}

3.9.2 创建`src/js/entry.js`:

import React from 'react';import ReactDOM from 'react-dom';import Hello from './helloworld';ReactDOM.render(<Hello />, document.getElementById('root'));