ReactJS环境搭建
1.ReactJs 需要依赖nodejs环境,如果没有安装nodejs的话,需要安装。下载地址:https://nodejs.org/en/download/

下载下来之后,安装windows版本的msi,点击下一步就可以了。之后进行相应的环境配置就ok。
2.安装全局包
我们需要安装两个包,这两个包是babel插件。
在windows运行:
npm install -g babel
npm install -g babel-cli
3.创建一个应用根目录
d:>mkdir reactApp
d:>cd reactApp
d:\reactApp> npm init
4.添加相应的依赖webpack(--save命令将添加一个包去package.json文件中)
d:\reactApp>npm install webpack --save
d:\reactApp>npm install webpack-dev-server --save
5.安装react
d:\reactApp>npm install react --save
d:\reactApp>npm install react-dom --save
6.安装babel其他插件
d:\reactApp>npm install babel-core
d:\reactApp>npm install babel-loader
d:\reactApp>npm install babel-preset-react
d:\reactApp>npm install babel-perset-es2015
7.创建相应的文件(index.html,App.jsx,main.js,webpack.config.js)
d:\reactApp>cd.>index.html
d:\reactApp>cd.>App.jsx
d:\reactApp>cd.>main.js
d:\reactApp>cd.>webpack.consig.js
8.配置编译,服务和加载
编辑webpack.config.js文件,可以用webstrom进行编辑。
内容如下:
var config = {
entry: './main.js',
output: {
path:'/',
filename: 'index.js',
},
devServer: {
inline: true,
port: 8080
},
module: {
loaders: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'babel-loader',
query: {
presets: ['es2015', 'react']
}
}
]
}
}
module.exports = config;
进行相应的配置。
ReactJS环境搭建的更多相关文章
- react介绍、环境搭建、demo运行实例
React官网:https://reactjs.org/docs/create-a-new-react-app.html cnpm网址:http://npm.taobao.org/ 1.react介绍 ...
- 我学React Native开发的经历(一) 第一周学习,环境搭建及demo1,一个导航跳转页面
大家好,这是跋涉者,wadereye,说来惭愧, 我是从2017年8月25日左右开始学习React Native的,因为时间不多, 在学习的过程中,感觉资料非常零散,要趟过的坑巨多,遇到的问题也非常多 ...
- 1. react 基础 简介 及 环境搭建
一.简介 由 Facebook 推出 2013 年 开源 的 函数式编程的 使用人数最多的 前端框架 拥有健全的文档与完善的社区 ( 官网 ) react 16 称为 React Fiber ( 底层 ...
- .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门
2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...
- Azure Service Fabric 开发环境搭建
微服务体系结构是一种将服务器应用程序构建为一组小型服务的方法,每个服务都按自己的进程运行,并通过 HTTP 和 WebSocket 等协议相互通信.每个微服务都在特定的界定上下文(每服务)中实现特定的 ...
- rnandroid环境搭建
react-native 环境搭建具体步骤这个大家已经玩烂了,这个主要是记录下来自己做win7系统遇到的坑 1.com.android.ddmlib.installexception 遇到这个问题,在 ...
- python开发环境搭建
虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...
- springMVC初探--环境搭建和第一个HelloWorld简单项目
注:此篇为学习springMVC时,做的笔记整理. MVC框架要做哪些事情? a,将url映射到java类,或者java类的方法上 b,封装用户提交的数据 c,处理请求->调用相关的业务处理—& ...
- 【定有惊喜】android程序员如何做自己的API接口?php与android的良好交互(附环境搭建),让前端数据动起来~
一.写在前面 web开发有前端和后端之分,其实android还是有前端和后端之分.android开发就相当于手机app的前端,一般都是php+android或者jsp+android开发.androi ...
随机推荐
- 20145306 网路攻防 web安全基础实践
20145306 网络攻防 web安全基础实践 实验内容 使用webgoat进行XSS攻击.CSRF攻击.SQL注入 XSS攻击:Stored XSS Attacks.Reflected XSS At ...
- tomcat部署项目如何去掉项目名称
去掉项目名和端口: 首先,进入tomcat的安装目录下的conf目录,我的目录是 /usr/local/apache-tomcat-6.0.20/conf,编辑文件server.xml. 1.去除端口 ...
- windows下启动某程序提示缺失**.dll文件的处理方法
一.背景: 1.os : windows7 64bit 旗舰版 2.启动ftp服务端软件时提示缺失mfc100.dll文件 以上情形亲测有效 二.修复 2.1 从https://cn.dll-file ...
- 【附12】grafana配置文件
一.配置文件位置 /usr/local/opt/grafana/share/grafana/default.ini /usr/local/etc/grafana/grafana.ini 二.init格 ...
- java项目中.classpath,.settings,.project,mymetadata文件的作用
今天犯了一个错误,误修改了本地的.classpath文件,导致项目好多地方报错,之前也没有仔细的研究过项目中的一些生成文件的作用. 今天特此进行记录. 不管我们在eclipse中新建任何的Java项目 ...
- FOJ-1001-Duplicate Pair
题目:Duplicate Pair 大意: 有多组测试数据,输入整数n,接着输入n个整数(integers),这些数字几乎都只出现一次,但其中有一个数出现了两次,请输出这个数. 题解: 大数据问题,普 ...
- UVa 11584 划分成回文串
https://vjudge.net/problem/UVA-11584 题意: 给出一串字符,把它划分成尽量少的回文串. 思路: 用d[i]表示划分到i时所能划分的最小个数,转移方程为d[i]=mi ...
- 学习mybatis-3 step by step 篇三
动态 SQL if choose (when, otherwise) trim (where, set) foreach 动态 SQL 通常要做的事情是有条件地包含 where 子句的一部分.比如: ...
- MUI --- 多个页面之间的传值 A页面B 页面 C页面
问题: 夸页面传值的,A.B.C三个页面,点A弹出B,C是B子页面;A有两个值要传到C页面中,要怎么样传递呢? A页面传值就不累述了 B页面才是关键 mui.plusReady(function() ...
- CMake Error: not providing "FindEigen3.cmake" in CMAKE_MODULE_PATH
一.第一种解决方法 cd /usr/share/ ,cmake tab补全,可以找到两个版本的cmake(cmake2.8和cmake3.5) 把/usr/share/cmake2.8/Modules ...