一、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. Python爬虫系列-Selenium+Chrome/PhantomJS爬取淘宝美食

    1.搜索关键字 利用Selenium驱动浏览器搜索关键字,得到查询后的商品列表 2.分析页码并翻页 得到商品页码数,模拟翻页,得到后续页面的商品列表 3.分析提取商品内容 利用PyQuery分析源码, ...

  2. MySQL_8.0.15_Windows10_X64 安装教程

    最近学习的内容涉及到MySQL的知识,所以安装一个MySQL非常有必要,参考别人的教程安装过程还算顺利,其中遇到了一些问题查了一些也解决了,这里把整个安装过程梳理一遍,给大家一个参考. 我手里的电脑是 ...

  3. python3 完全平方数(循环)

    题目 一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少? 代码: for i in range(1,85): if 168 % i == 0: j = 168 ...

  4. 一键生成属于自己的QQ历史报告,看看你对自己的QQ了解程度有多深?

    目录 一键生成属于自己的QQ历史报告,看看你对自己的QQ了解程度有多深? 简介 功能截图 如何运行 编写思路 main.py模块 qq_bot模块 tkinter_gui模块 static_data模 ...

  5. Applied Nonparametric Statistics-lec1

    参考网址: https://onlinecourses.science.psu.edu/stat464/node/2 Binomial Distribution Normal Distribution ...

  6. (转)rvm安装与常用命令

    rvm是一个命令行工具,可以提供一个便捷的多版本ruby环境的管理和切换. https://rvm.io/ 如果你打算学习ruby/rails, rvm是必不可少的工具之一. 这里所有的命令都是再用户 ...

  7. arm页表在linux中的融合

    参考:arm-linux内存页表创建 arm的第一级页表条目数为4096个,对于4K页第二级目录条目个数为256个,一级二级条目都是每个条目4字节. 在linux下二级分页如下:虚拟地址——> ...

  8. city Engine 建模

    基本操作介绍 界面布局,文件组织 五个常见图层 常见规则,替换思想

  9. 【HIHOCODER 1403】后缀数组一·重复旋律(后缀数组)

    描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成的数列. 小Hi在练习过很多曲子以后发现很多作品自身包含一样的旋律.旋律是一段连续的数列,相似的旋律在原数列 ...

  10. Java策略模式(Strategy)

    一.定义 定义一组算法,将每个算法都封装起来,并且使它们之间可以互换.策略模式使这些算法在客户端调用它们的时候能够互不影响地变化.(Java的TreeSet集合中,构造方法可传入具体的比较器对象以实现 ...