react 环境快速搭建

React 前端之家
前端之家收集整理的这篇文章主要介绍了react 环境快速搭建，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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
  1. //package.json
  3. {
  4. "name":"chatme",
  5. "version":"1.0.0",
  6. "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":{
  7. "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"
  8. },248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "dependencies":{
  9. "react":"^15.4.0",248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> "react-dom":"^15.4.0"
  10. "devDependencies":{
  11. "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"
  12. "license":""
  13. }

[plain] copy
    //webpack.config.js
  1. varwebpack=require('webpack');
  2. varpath=require('path')
  4. module.exports={
  5. entry:['./app/main.js'],248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> output:{
  6. path:path.resolve(__dirname,'/build'),248); line-height:18px; margin:0px!important; padding:0px 3px 0px 10px!important"> filename:'bundle.js'
  7. module:{
  8. loaders:[
  9. {
  10. 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'
  11. },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"]
  12. 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]'
  13. 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:{
  14. presets:['react','es2015']
  15. }
  16. }
  17. ]
  18. plugins:[
  19. newwebpack.optimize.UglifyJsPlugin()
  20. }

copy
    //index.html
  1. <!doctypehtml>
  2. <htmllang="en">
  3. <head>
  4. <Metacharset="utf-8">
  5. <title>weiwei</title>
  6. <Metaname="viewport"content="width=device-width,initial-scale=1.0,user-scalable=no"/>
  7. </head>
  8. <body>
  9. <divid="weiwei"></div>
  10. <scriptsrc="./bundle.js"></script>
  11. </body>
  12. </html>

copy
    //main.js
  1. importReactfrom'react'
  2. importReactDOMfrom'react-dom'
  3. importReactStackfrom'./pages/ReactStack'
  4. ReactDOM.render(
  5. <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')
  6. );

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

6.npm install

7.启动 npm start

原文链接：https://www.f2er.com/react/302911.html

猜你在找的React相关文章

react使用moment进行日期格式化
导入moment 使用方式 年月日，时分秒 星期几 相对时间 7天后 2小时后 明天 将毫秒转换成年...
推荐使用并手写实现redux-actions原理
@ 一、前言 为什么介绍redux-actions呢? 第一次见到主要是接手公司原有的项目，发现有之前...
【译】值得推荐的十大React Hook 库
十大React Hook库 原文地址：https://dev.to/bornfightcompany/top-10-react-hook-librari...
React生命周期
React生命周期 React的生命周期从广义上分为挂载、渲染、卸载三个阶段，在React的整个生命...
React虚拟DOM的理解
React虚拟DOM的理解 Virtual DOM是一棵以JavaScript对象作为基础的树，每一个节点可以将其...
使用react-native-vector-icons（RN0.6+）
1.安装 npm install --save react-native-vector-icons or yarn add react-native-vector-...
React中的Props, State 与 render 函数
React 的核心特性总结 1、React：声明式开发 (JS或者jQuery属性命令式开发） 2、可以与其他...
React开发环境准备
react fiber 指react 16以上的版本 引入react的方式： 1、引入.js文件 2、使用脚手架工具（...
React组件拆分与传值
组件拆分与组件之间的传值 父子组件的概念： 父组件通过属性的方式，向自组件传值 子组件通...
React组件的简单演示
src/Test.js import React from &#39;react&#39;; function Test() { return ( &a...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作