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环境配置(上篇) ...
随机推荐
- Fedora 28 系统基础配置以及常用软件安装方式
实验说明: 很多人说Linux很难用,很难上手,其实不然,倘若不玩游戏,其实很多发行版Linux都可以成为主力系统,就比如本章要讲的 Fedora 28.本章会从镜像来源.系统安装.基础配置和常用软件 ...
- 【jquery】 form ajaxSubmit 问题
常见问题 这个插件跟哪些版本的jQuery兼容? 这个插件需要jQuery v1.0.3 或 以后的版本. 这个插件需要其它插件的支持吗? 不需要. 这个插件的运行效率高吗? 是的!请到 对比页面 查 ...
- java代码导出数据到Excel、js导出数据到Excel(三)
jsp内容忽略,仅写个出发按钮: <button style="width: 100px" onclick="expertExcel()&quo ...
- COMP9021--6.13
1. break语句和continue语句都可以在循环中使用,且常与选择结构结合使用,以达到在特定条件满足时跳出循环的作用.break语句被执行,可以使整个循环提前结束.而continue语句的作用是 ...
- 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 ...
- 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 ...
- day19-IO多路复用
1.I/O多路复用指:通过一种机制,可监听多个描述符(soket对象)(文件句柄),一旦某个描述符发送编号(一般指读就绪或写就绪),能够通知程序进行相应的读写操作. 2.I/O多路复用方式:selec ...
- UTV - URL Tag Validation
What`s UTV 1.URL Tag Validation 2.Special format of URL for preventing unauthorized usage and access ...
- Selenium WebDriver- 操作frame中的页面元素
#encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...
- python 学习分享-基础篇
1.python起手式 写下第一个代码,打印‘hello world’ print('hello world') 2.变量 变量是为了存储信息,在程序中被调用,标识数据名称或类型. 变量定义的规则: ...