react-1 react需要的环境配置
一、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需要的环境配置的更多相关文章
- 史上最全Windows版本搭建安装React Native环境配置
史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有很多坑要跳,为了帮助新手快速无误的 ...
- windows 7下React Native环境配置
React Native 是 Facebook 推出的一个用 Java 语言就能同时编写 ios,android,以及后台的一项技术,它可以做到实时热更新 .FaceBook 也号称这们技术是 “Le ...
- 前端自动化测试 —— TDD环境配置(React+TypeScript)
欢迎讨论与指导:) 前言 TDD -- Test-Drive Development是测试驱动开发的意思,是敏捷开发中的一项核心实践和技术,也是一种测试方法论.TDD的原理是在开发功能代码之前,先编写 ...
- React Native环境配置和简单使用
# 前言 学习本系列内容需要具备一定 HTML 开发基础,没有基础的朋友可以先转至 HTML快速入门(一) 学习 本人接触 React Native 时间并不是特别长,所以对其中的内容和性质了解可能会 ...
- Mac电脑配置IOS React Native开发环境配置笔记
React Native(以下简称RN)的开发环境配置直接参考官方文档即可完成,不过对小白来说东西有点多,有些名词不是很好理解,这里就官方的安装文档稍微展开说一下. 中文版配置说明:不错的中文说明.官 ...
- 史上最详细Windows版本搭建安装React Native环境配置 转载,比官网的靠谱亲测可用
史上最详细Windows版本搭建安装React Native环境配置 2016/01/29 | React Native技术文章 | Sky丶清| 95条评论 | 33530 views ...
- React Native环境配置
React Native环境配置 史上最全Windows版本搭建安装React Native环境配置 配置过React Native 环境的都知道,在Windows React Native环境配置有 ...
- webpack入门+react环境配置
小结放在前:这篇文章主要是为下一篇的react提前铺好路,webpack是一个前端资源模块化管理和打包工具,说白了就是方便我们管理自己的常用的一些代码,比如你开发中用到sass以及jade同时用到es ...
- 手把手教你webpack、react和node.js环境配置(上篇)
很多人刚学习react的时候,往往因为繁琐的配置而头疼,这里我将手把手教大家怎么用webpack配置react和redux的环境,这篇教程包括前端react和后台node整个网站的环境配置,对node ...
- 手把手教你webpack、react和node.js环境配置(下篇)
上篇我介绍了前端下webpack和react.redux等环境的配置,这篇将继续重点介绍后台node.js的配置. 这里是上篇链接:手把手教你webpack.react和node.js环境配置(上篇) ...
随机推荐
- Python爬虫系列-Selenium+Chrome/PhantomJS爬取淘宝美食
1.搜索关键字 利用Selenium驱动浏览器搜索关键字,得到查询后的商品列表 2.分析页码并翻页 得到商品页码数,模拟翻页,得到后续页面的商品列表 3.分析提取商品内容 利用PyQuery分析源码, ...
- MySQL_8.0.15_Windows10_X64 安装教程
最近学习的内容涉及到MySQL的知识,所以安装一个MySQL非常有必要,参考别人的教程安装过程还算顺利,其中遇到了一些问题查了一些也解决了,这里把整个安装过程梳理一遍,给大家一个参考. 我手里的电脑是 ...
- python3 完全平方数(循环)
题目 一个整数,它加上100后是一个完全平方数,再加上168又是一个完全平方数,请问该数是多少? 代码: for i in range(1,85): if 168 % i == 0: j = 168 ...
- 一键生成属于自己的QQ历史报告,看看你对自己的QQ了解程度有多深?
目录 一键生成属于自己的QQ历史报告,看看你对自己的QQ了解程度有多深? 简介 功能截图 如何运行 编写思路 main.py模块 qq_bot模块 tkinter_gui模块 static_data模 ...
- Applied Nonparametric Statistics-lec1
参考网址: https://onlinecourses.science.psu.edu/stat464/node/2 Binomial Distribution Normal Distribution ...
- (转)rvm安装与常用命令
rvm是一个命令行工具,可以提供一个便捷的多版本ruby环境的管理和切换. https://rvm.io/ 如果你打算学习ruby/rails, rvm是必不可少的工具之一. 这里所有的命令都是再用户 ...
- arm页表在linux中的融合
参考:arm-linux内存页表创建 arm的第一级页表条目数为4096个,对于4K页第二级目录条目个数为256个,一级二级条目都是每个条目4字节. 在linux下二级分页如下:虚拟地址——> ...
- city Engine 建模
基本操作介绍 界面布局,文件组织 五个常见图层 常见规则,替换思想
- 【HIHOCODER 1403】后缀数组一·重复旋律(后缀数组)
描述 小Hi平时的一大兴趣爱好就是演奏钢琴.我们知道一个音乐旋律被表示为长度为 N 的数构成的数列. 小Hi在练习过很多曲子以后发现很多作品自身包含一样的旋律.旋律是一段连续的数列,相似的旋律在原数列 ...
- Java策略模式(Strategy)
一.定义 定义一组算法,将每个算法都封装起来,并且使它们之间可以互换.策略模式使这些算法在客户端调用它们的时候能够互不影响地变化.(Java的TreeSet集合中,构造方法可传入具体的比较器对象以实现 ...