一、nodeJs简介和安装

  1、 官网 https://nodejs.org/en/

          NPM https://www.npmjs.com/

2、检查安装成功的命令

    node -v

    npm -v

二、使用npm配置react开发环境

http://reactjs.cn/react/docs/package-management.html

1、新建一个文件夹 如:newfiles

2、cd newfiles

3、npm init

4、npm install --save react react-dom babelify babel-preset-react     [sudo 最高的权限   解决一些权限问题]

  或    sudo  npm install --save react react-dom babelify babel-preset-react

5、npm install --save babel-preset-es2015      [save 将包保存在配置文件中]

  或    sudo npm install babel-preset-es2015 --save

三、webpack热加载配置

官网:https://webpack.github.io/

配置文件文档:https://webpack.github.io/docs/configuration.html

全局安装  npm install -g webpack

npm install -g webpack-dev-server    [开发的服务器]

当前项目安装  npm install  webpack --save

       npm install webpack-dev-server --save

初始化配置

var webpack = require(webpack);
var path = require('path');
module.exports = {
context:__dirname + '/src',
entry:'./js/index.js',
module:{
loaders:[{
test:/.js?$/,
exclude:/(node_modules)/,
loader:'babel-loader',
query:{
presets:['react','es2015']
}
}]
},
output:{
path:__dirname+'/src/',
filename:'bundle.js'
}
}

运行代码:

webpack    //每次修改代码后,都需要重新敲webpack命令

webpack --watch    //每次修改代码后,不需要重新敲webpack 命令,只需要在浏览器点击刷新即可

webpack-dev-server   //每次修改代码后,不需要重新敲webpack 命令,不需要在浏览器点击刷新就可以访问

webpack-dev-server --content-base src --inline --hot   //项目热加载[--inline --hot]  ,[--content-base src]让访问的URL地址更简洁而且浏览器界面更简洁

三、Chrome React 插件使用

  插件名称: React Developer Tools

插件地址:

四、开发工具Atom

  官网:https://atom.io/

React开发相关Atom插件配置

1、js支持  atom-ternjs   :js、nodejs、es6补全

2、格式化  atom-beautify

3、直接打开浏览器open-in-browser

4、快速html代码   emmet

5、文件图标  file-icons

6、高亮当前行 highlight-line

7、高亮所有选择  highlight-selected

总结环境搭建流程:

1、安装node

2、新建一个文件夹 如:newfiles

    mkdir newfiles && cd newfiles    

    cnpm init

3、cnpm install --save react react-dom babelify babel-preset-react

4、cnpm install --save babel-preset-es2015

5、

cnpm install -g webpack

cnpm install -g webpack-dev-server

cnpm install  webpack --save

cnpm install webpack-dev-server --save

6、启动项目

webpack-dev-server --content-base src --inline --hot

7、谷歌react调试插件: React Developer Tools

react-1 react需要的环境配置的更多相关文章

  1. 史上最全Windows版本搭建安装React Native环境配置

    史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...

  2. windows 7下React Native环境配置

    React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...

  3. 前端自动化测试 —— TDD环境配置(React+TypeScript)

    欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...

  4. React Native环境配置和简单使用

    # 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...

  5. Mac电脑配置IOS React Native开发环境配置笔记

    React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:不错的中文说明.官 ...

  6. 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用

    史上最详细Windows版本搭建安装React Native环境配置   2016/01/29 |  React Native技术文章 |  Sky丶清|  95条评论 |  33530 views ...

  7. React Native环境配置

    React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...

  8. webpack入门+react环境配置

    小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...

  9. 手把手教你webpack、react和node.js环境配置(上篇)

    很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...

  10. 手把手教你webpack、react和node.js环境配置(下篇)

    上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) ...

随机推荐

  1. Fedora 28 系统基础配置以及常用软件安装方式

    实验说明: 很多人说Linux很难用,很难上手,其实不然,倘若不玩游戏,其实很多发行版Linux都可以成为主力系统,就比如本章要讲的 Fedora 28.本章会从镜像来源.系统安装.基础配置和常用软件 ...

  2. 【jquery】 form ajaxSubmit 问题

    常见问题 这个插件跟哪些版本的jQuery兼容? 这个插件需要jQuery v1.0.3 或 以后的版本. 这个插件需要其它插件的支持吗? 不需要. 这个插件的运行效率高吗? 是的!请到 对比页面 查 ...

  3. java代码导出数据到Excel、js导出数据到Excel(三)

     jsp内容忽略,仅写个出发按钮:          <button style="width: 100px" onclick="expertExcel()&quo ...

  4. COMP9021--6.13

    1. break语句和continue语句都可以在循环中使用,且常与选择结构结合使用,以达到在特定条件满足时跳出循环的作用.break语句被执行,可以使整个循环提前结束.而continue语句的作用是 ...

  5. LeetCode(303)Range Sum Query - Immutable

    题目 Given an integer array nums, find the sum of the elements between indices i and j (i ≤ j), inclus ...

  6. BZOJ 5313: 新Fib数列

    打表找规律 #include<cstdio> using namespace std; int F[20]={0,1,1,2,3,0,3,3,1,4,0,4,4,3,2,0,2,2,4,1 ...

  7. day19-IO多路复用

    1.I/O多路复用指:通过一种机制,可监听多个描述符(soket对象)(文件句柄),一旦某个描述符发送编号(一般指读就绪或写就绪),能够通知程序进行相应的读写操作. 2.I/O多路复用方式:selec ...

  8. UTV - URL Tag Validation

    What`s UTV 1.URL Tag Validation 2.Special format of URL for preventing unauthorized usage and access ...

  9. Selenium WebDriver- 操作frame中的页面元素

    #encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...

  10. python 学习分享-基础篇

    1.python起手式 写下第一个代码,打印‘hello world’ print('hello world') 2.变量 变量是为了存储信息,在程序中被调用,标识数据名称或类型. 变量定义的规则: ...