REACT 项目环境搭建

1. yum install nodejs

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

3.node -v

4.npm -v

5. 项目目录搭建

//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',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

REACT 项目环境搭建

相关文章