您的位置: 首页  >  文章  >  react 环境快速搭建

react 环境快速搭建

分类: 文章 • 2023-11-13 15:53:40

1. yum install nodejs

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

3.node -v

4.npm -v


5. 项目目录搭建

react 环境快速搭建


[html] view plain copy
  1. //package.json  
  2.   
  3. {  
  4.   "name": "chatme",  
  5.   "version": "1.0.0",  
  6.   "description": "",  
  7.   "author": "weiwei",  
  8.   "scripts": {  
  9.     "start": "webpack-dev-server --hot --progress --colors --host 0.0.0.0",  
  10.     "build": "webpack --progress --colors --minimize"  
  11.   },  
  12.   "dependencies": {  
  13.     "react": "^15.4.0",  
  14.     "react-dom": "^15.4.0"  
  15.   },  
  16.   "devDependencies": {  
  17.     "babel-core": "^6.26.0",  
  18.     "babel-loader": "^7.1.2",  
  19.     "babel-preset-es2015": "^6.24.1",  
  20.     "babel-preset-react": "^6.24.1",  
  21.     "css-loader": "^0.28.7",  
  22.     "node-sass": "^4.5.3",  
  23.     "sass-loader": "^6.0.6",  
  24.     "style-loader": "^0.18.2",  
  25.     "webpack": "^2.2.1",  
  26.     "webpack-dev-server": "^2.4.2"  
  27.   },  
  28.   "license": ""  
  29. }  

[plain] view plain copy
  1. //webpack.config.js  
  2.   
  3. var webpack = require('webpack');  
  4. var path = require('path')  
  5.   
  6. module.exports = {  
  7.   entry: ['./app/main.js'],  
  8.   output: {  
  9.     path: path.resolve(__dirname, '/build'),  
  10.     filename: 'bundle.js'  
  11.   },  
  12.   module: {  
  13.     loaders: [  
  14.       {  
  15.         test: /\.js$/,  
  16.         exclude: /node_modules/,  
  17.         loader: 'babel-loader'  
  18.       },  
  19.       {  
  20.         test: /\.scss$/,  
  21.         loaders: ["style-loader", "css-loader", "sass-loader"]  
  22.       },  
  23.       {  
  24.         test: /\.(otf|eot|svg|ttf|woff|png|jpg)/,  
  25.         loader: 'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'  
  26.       },  
  27.         {  
  28.             test: /\.(jsx|js)$/,  
  29.             loader: 'babel-loader',  
  30.             exclude: /node_modules/,  
  31.             query: {  
  32.                 presets: ['react', 'es2015']  
  33.             }  
  34.         }  
  35.     ]  
  36.   },  
  37.   plugins: [  
  38.     new webpack.optimize.UglifyJsPlugin()  
  39.   ]  
  40. }  

[plain] view plain copy
  1. //index.html  
  2.   
  3. <!doctype html>  
  4. <html lang="en">  
  5.   <head>  
  6.      <meta charset="utf-8">  
  7.      <title>weiwei</title>  
  8.      <meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>  
  9.   </head>  
  10.   <body>  
  11.   <div id="weiwei"></div>  
  12.   <script src="./bundle.js"></script>  
  13.   
  14.   </body>  
  15. </html>  

[plain] view plain copy
  1. //main.js  
  2.   
  3. import React from 'react'  
  4. import ReactDOM from 'react-dom'  
  5. import ReactStack from './pages/ReactStack'  
  6.   
  7. ReactDOM.render (  
  8.     <ReactStack />,  
  9.     document.getElementById('weiwei')  
  10. );  

[plain] view plain copy
  1. //ReactStack.js  
  2.   
  3. import React from 'react'   //模块引入  
  4.   
  5. //import '../styles/reactStack.scss'  
  6.   
  7. class ReactStack extends React.Component {  //class特性  
  8.   
  9.   render() {  
  10.     const learner = {name: 'WEIWEI', age: 18}  //const定义变量  
  11.     const mainSkills = ['React', 'ES6', 'Webpack', 'Babel', 'NPM',]  
  12.     const extraSkills = ['Git', 'Postman']  
  13.     const skillSet = [...mainSkills, ...extraSkills]  
  14.     const { name } = learner   //解构赋值  
  15.     let greetings = null    //let定义变量  
  16.     if (name) {  
  17.       greetings = `${name},欢迎来到${mainSkills[0]}的世界！`  //字符模版  
  18.     }  
  19.     //以下用了箭头函数  
  20.     return (  
  21.       <div className="skills">  
  22.         <div>{greetings}</div>  
  23.         <ol>  
  24.           {skillSet.map((stack, i) => <li key={i}>{stack}</li>)}  
  25.         </ol>  
  26.       </div>  
  27.     )  
  28.   }  
  29. }  
  30.   
  31. export default ReactStack    //模块导出  

6.npm install


7.启动 npm start

相关推荐