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环境搭建的更多相关文章

  1. react介绍、环境搭建、demo运行实例

    React官网:https://reactjs.org/docs/create-a-new-react-app.html cnpm网址:http://npm.taobao.org/ 1.react介绍 ...

  2. 我学React Native开发的经历(一) 第一周学习,环境搭建及demo1,一个导航跳转页面

    大家好,这是跋涉者,wadereye,说来惭愧, 我是从2017年8月25日左右开始学习React Native的,因为时间不多, 在学习的过程中,感觉资料非常零散,要趟过的坑巨多,遇到的问题也非常多 ...

  3. 1. react 基础 简介 及 环境搭建

    一.简介 由 Facebook 推出 2013 年 开源 的 函数式编程的 使用人数最多的 前端框架 拥有健全的文档与完善的社区 ( 官网 ) react 16 称为 React Fiber ( 底层 ...

  4. .NET Core系列 : 1、.NET Core 环境搭建和命令行CLI入门

    2016年6月27日.NET Core & ASP.NET Core 1.0在Redhat峰会上正式发布,社区里涌现了很多文章,我也计划写个系列文章,原因是.NET Core的入门门槛相当高, ...

  5. Azure Service Fabric 开发环境搭建

    微服务体系结构是一种将服务器应用程序构建为一组小型服务的方法,每个服务都按自己的进程运行,并通过 HTTP 和 WebSocket 等协议相互通信.每个微服务都在特定的界定上下文(每服务)中实现特定的 ...

  6. rnandroid环境搭建

    react-native 环境搭建具体步骤这个大家已经玩烂了,这个主要是记录下来自己做win7系统遇到的坑 1.com.android.ddmlib.installexception 遇到这个问题,在 ...

  7. python开发环境搭建

    虽然网上有很多python开发环境搭建的文章,不过重复造轮子还是要的,记录一下过程,方便自己以后配置,也方便正在学习中的同事配置他们的环境. 1.准备好安装包 1)上python官网下载python运 ...

  8. springMVC初探--环境搭建和第一个HelloWorld简单项目

    注:此篇为学习springMVC时,做的笔记整理. MVC框架要做哪些事情? a,将url映射到java类,或者java类的方法上 b,封装用户提交的数据 c,处理请求->调用相关的业务处理—& ...

  9. 【定有惊喜】android程序员如何做自己的API接口?php与android的良好交互(附环境搭建),让前端数据动起来~

    一.写在前面 web开发有前端和后端之分,其实android还是有前端和后端之分.android开发就相当于手机app的前端,一般都是php+android或者jsp+android开发.androi ...

随机推荐

  1. Android项目开发四

    微博客户端开发 本周学习计划 研究微博客户端关于Sqlite数据库代码. 完成微博撰写.发布等功能模块. 将程序中存在的问题解决. 实际完成情况 Sqlite数据库学习与研究 微博客户端功能设定中涉及 ...

  2. 20165310_Exp2实验二《Java面向对象程序设计》

    实验二<Java面向对象程序设计> TDD与单元测试 前期准备: 什么是单元测试? 单元测试(unit testing),是指对软件中的最小可测试单元进行检查和验证.对于单元测试中单元的含 ...

  3. 判断某个ImageView的背景图是否是已知的背景图相等

    if (ibtn.getDrawable().getConstantState().equals(getResources().getDrawable(R.mipmap.image).getConst ...

  4. RabbitMQ延时任务

    概念: 消息的TTL(Time To Live)消息的TTL就是消息的存活时间.RabbitMQ可以对队列和消息分别设置TTL.对队列设置就是队列没有消费者连着的保留时间,也可以对每一个单独的消息做单 ...

  5. JDBC中 execute 与 executeUpdate的区别

    相同点 execute与executeUpdate的相同点:都可以执行增加,删除,修改 不同点 execute可以执行查询语句 然后通过getResultSet,把结果集取出来 executeUpda ...

  6. BZOJ2982: combination Lucas

    Description LMZ有n个不同的基友,他每天晚上要选m个进行[河蟹],而且要求每天晚上的选择都不一样.那么LMZ能够持续多少个这样的夜晚呢?当然,LMZ的一年有10007天,所以他想知道答案 ...

  7. [SpringBoot] - 上线一份项目记录

    首先在服务器上运行war包. (新建项目) 其后,选择数据库,因为之前感觉mysql比较难安装,这次就再试一次,之前的PostgreSQL没有问题. 将原有文件进行复制,排除导包错误. 首先测试邮件发 ...

  8. 获取String类型汉字乱码,如何进行编码

    本文为博主原创,未经允许不得转载: 在解析properties文件中的汉字时,在java代码中解析得到的是一个乱码字符,形如图下: 导致乱码原因:由于在jdk中,默认为gbk编码方式进行编码盒接收的, ...

  9. 重拾IP路由选择:CCNA学习指南中的IP路由选择

    IP路由选择技术 是网络技术的核心部分,也是目前研究的热点,其中的 动态路由选择协议 比如RIPv1,RIPv2,OSPF等,解决了数据在网络中转递的诸多问题. 在TCP/IP协议详解的学习过程中,我 ...

  10. # WinForm关闭窗体确认

    private void Lba_IE_Form_FormClosing(object sender, FormClosingEventArgs e) { if (MessageBox.Show(&q ...