react 环境快速搭建

发布时间：2020-12-15 06:50:18 所属栏目：百科来源：网络整理

导读：1. yum install nodejs 2.npm 淘宝镜像配置参考http://blog.csdn.net/wangweiscsdn/article/details/53414965 3.node -v 4.npm -v 5. 项目目录搭建 [html] view plain copy //package.json { "name":"chatme", "version":"1.0.0", "description":"",108); l

1. yum install nodejs

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

3.node -v

4.npm -v

5. 项目目录搭建

[html] 
   view plain 
   copy 
   
 //package.json
 
 {
 "name":"chatme",
 "version":"1.0.0",
 "description":"",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "author":"weiwei",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "scripts":{
 "start":"webpack-dev-server--hot--progress--colors--host0.0.0.0",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "build":"webpack--progress--colors--minimize"
 },248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "dependencies":{
 "react":"^15.4.0",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "react-dom":"^15.4.0"
 "devDependencies":{
 "babel-core":"^6.26.0",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "babel-loader":"^7.1.2",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "babel-preset-es2015":"^6.24.1",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "babel-preset-react":"^6.24.1",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "css-loader":"^0.28.7",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "node-sass":"^4.5.3",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "sass-loader":"^6.0.6",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "style-loader":"^0.18.2",108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "webpack":"^2.2.1",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "webpack-dev-server":"^2.4.2"
 "license":""
 }

[plain] 
   copy

//webpack.config.js

varwebpack=require('webpack');
varpath=require('path')
module.exports={
entry:['./app/main.js'],248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> output:{
path:path.resolve(__dirname,'/build'),248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> filename:'bundle.js'
module:{
loaders:[
{
test:/.js$/,248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> exclude:/node_modules/,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> loader:'babel-loader'
},248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> test:/.scss$/,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> loaders:["style-loader","css-loader","sass-loader"]
test:/.(otf|eot|svg|ttf|woff|png|jpg)/,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> loader:'url-loader?limit=8192&name=images/[hash:8].[name].[ext]'
test:/.(jsx|js)$/,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> loader:'babel-loader',108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> query:{
presets:['react','es2015']
}
}
]
plugins:[
newwebpack.optimize.UglifyJsPlugin()
}

copy

//index.html

<!doctypehtml>
<htmllang="en">
<head>
<metacharset="utf-8">
<title>weiwei</title>
<metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no"/>
</head>
<body>
<divid="weiwei"></div>
<scriptsrc="./bundle.js"></script>
</body>
</html>

copy

//main.js

importReactfrom'react'
importReactDOMfrom'react-dom'
importReactStackfrom'./pages/ReactStack'
ReactDOM.render(
<ReactStack/>,108); list-style:decimal-leading-zero outside; color:inherit; line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> document.getElementById('weiwei')
);

copy

//ReactStack.js

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

6.npm install

7.启动 npm start

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!