REACT 项目环境搭建

àì夳堔傛蜴生んèń 2022-06-08 01:13 330阅读 0赞

1. yum install nodejs

2.npm 淘宝镜像配置  参考 http://blog.csdn.net/wangweiscsdn/article/details/53414965

3.node -v

4.npm -v

5. 项目目录搭建

![Center][]

//package.json
    
    {
      "name": "chatme",
      "version": "1.0.0",
      "description": "",
      "author": "weiwei",
      "scripts": {
        "start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0",
        "build": "webpack --progress --colors --minimize"
      },
      "dependencies": {
        "react": "^15.4.0",
        "react-dom": "^15.4.0"
      },
      "devDependencies": {
        "babel-core": "^6.26.0",
        "babel-loader": "^7.1.2",
        "babel-preset-es2015": "^6.24.1",
        "babel-preset-react": "^6.24.1",
        "css-loader": "^0.28.7",
        "node-sass": "^4.5.3",
        "sass-loader": "^6.0.6",
        "style-loader": "^0.18.2",
        "webpack": "^2.2.1",
        "webpack-dev-server": "^2.4.2"
      },
      "license": ""
    }

//webpack.config.js
    
    var webpack = require('webpack');
    var path = require('path')
    
    module.exports = {
      entry: ['./app/main.js'],
      output: {
        path: path.resolve(__dirname, '/build'),
        filename: 'bundle.js'
      },
      module: {
        loaders: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
          },
          {
            test: /\.scss$/,
            loaders: ["style-loader", "css-loader", "sass-loader"]
          },
          {
            test: /\.(otf|eot|svg|ttf|woff|png|jpg)/,
            loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
          },
    		{
                test: /\.(jsx|js)$/,
                loader: 'babel-loader',
                exclude: /node_modules/,
                query: {
                    presets: ['react', 'es2015']
                }
            }
        ]
      },
      plugins: [
        new webpack.optimize.UglifyJsPlugin()
      ]
    }

//index.html
    
    <!doctype html>
    <html lang="en">
      <head>
         <meta charset="utf-8">
         <title>weiwei</title>
         <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>
      </head>
      <body>
      <div id="weiwei"></div>
      <script src="./bundle.js"></script>
    
      </body>
    </html>

//main.js
    
    import React from 'react'
    import ReactDOM from 'react-dom'
    import ReactStack from './pages/ReactStack'
    
    ReactDOM.render (
    	<ReactStack />,
    	document.getElementById('weiwei')
    );

//ReactStack.js
    
    import React from 'react'   //模块引入
    
    //import '../styles/reactStack.scss'
    
    class ReactStack extends React.Component {  //class特性
    
      render() {
        const learner = {name: 'WEIWEI', age: 18}  //const定义变量
        const mainSkills = ['React', 'ES6', 'Webpack', 'Babel', 'NPM',]
        const extraSkills = ['Git', 'Postman']
        const skillSet = [...mainSkills, ...extraSkills]
        const { name } = learner   //解构赋值
        let greetings = null    //let定义变量
        if (name) {
          greetings = `${name},欢迎来到${mainSkills[0]}的世界！`  //字符模版
        }
        //以下用了箭头函数
        return (
          <div className="skills">
            <div>{greetings}</div>
            <ol>
              {skillSet.map((stack, i) => <li key={i}>{stack}</li>)}
            </ol>
          </div>
        )
      }
    }
    
    export default ReactStack    //模块导出

6.npm install

7.启动 npm start

[Center]: /images/20220608/c2c3d8f6100f472c972b7111c3a3288b.png