react环境配置

太过爱你忘了你带给我的痛 2022-07-10 23:50 258阅读 0赞

### 1.安装软件 ###

(1) nodejs [ node下载链接][node]

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

### 2.更换npm库的源 ###

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

npm config set registry [ https://registry.npm.taobao.org][https_registry.npm.taobao.org]

![Center][]

### 3.构建项目 ###

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

![Center 1][]

#### 3.2 配置依赖库    ####

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

![Center 2][]

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文件 ####

添加以下内容：

#### 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'));

### 4 在控制台运行`npm run start`, ###

![Center 3][]

### 5 在浏览器中输入`http://localhost:3000/`查看到如下内容： ###

![Center 4][]

参考 http://www.jianshu.com/p/bf6ca7cb7f8a

[node]: http://download.csdn.net/detail/liuyinghui523/9737936
[https_registry.npm.taobao.org]: https://registry.npm.taobao.org/
[Center]: /images/20220711/dcf32abc8c4f48f797b1f774f932b4cd.png
[Center 1]: /images/20220711/f748140bc6e14e7698b30226c738aa80.png
[Center 2]: /images/20220711/3efb031d30f84ab8a0f815e0742fd313.png
[Center 3]: /images/20220711/85dbfd663377451e82704023689f2f39.png
[Center 4]: /images/20220711/cab2274df3a9465ea51b990936527a50.png