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;进行相应的配置。
时间: 2024-08-27 05:55:50

ReactJS环境搭建的相关文章

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

大家好,这是跋涉者,wadereye,说来惭愧, 我是从2017年8月25日左右开始学习React Native的,因为时间不多, 在学习的过程中,感觉资料非常零散,要趟过的坑巨多,遇到的问题也非常多. 作为新手,文章看的多,但是开始写具体应用的时候,往往一脸迷茫. 所以,我一边学习,一边把学习React_native写过的测试放和看过的资料在这里,供大家参考 . 我整理的要学RN 之前,最好要掌握的基础知识: HTML基础知识 CSS基础知识 Javascript 基础知识 Node JS基础

安卓转战React-Native之windows下android环境搭建爬坑血泪史

前言 最近又有新的项目立项,所以好久都没有写博客了,然后都是利用闲暇时间来学习React-native. 由于安卓和ios的就业环境给移动端开发带来前所未有的冲击,于是乎很多伙伴们不得不另谋他路,然后现在比较火爆的Hybird和react-native也是对我们移动端的影响比较大,比如去面试会问你会nodej或者react不,前端工程师(js)转移动端的门槛变得很低,angularjs和reactjs都很不错,并且6月底阿里开源weex,估计很多人对weex还是特别期待的,唉,只能拿知识武装自己

一、环境搭建

1 更新到最新版本的pip(这是安装python扩展包的一个插件)命令如下: python -m pip install --upgrade pip 2 使用pip安装virtualenv,命令 pip install virtualenv  如果要指定版本号,pip install virtualenv==15.0.1(安装虚拟环境) 3 创建django虚拟环境,命令 virtualenv django_basic_venv 4 使用虚拟环境 需要进入到安装目录的Scripts文件夹下,运行

Ionic2环境搭建及文件目录介绍

[注]引用自:http://blog.csdn.net/jasonzds/article/details/53821184 1环境搭建 一年前研究混合框架,初步确定了四种方案给公司选择,ionic,hbuilder,wex5,react-native这四个框架各有优缺点,ionic和react-native是国外框架,相对好一点,文档更新很快,就不一一说了,大概的思路都是一样的,js逻辑实现,同时调用原生功能,h5,css3 UI实现,其实他们都有自己的ui框架,当时选择了国内的hbuiler,

Selenium+Java+Eclipse 自动化测试环境搭建

一.下载Java windows java下载链接 https://www.java.com/zh_CN/download/win10.jsp 二.安装Java 安装好后检查一下需不需要配置环境变量,现在java 8已经不用配置环境变量了,直接在命令行输入:java -version 三.下载和安装Eclipse windows Eclipse下载链接 https://www.eclipse.org/downloads/ 你也可以下载绿色版 四.下载selenium,然后解压 selenium

Qt在Mac OS X下的编程环境搭建(配置Qt库和编译器,有图,很清楚)

尊重作者,支持原创,如需转载,请附上原地址:http://blog.csdn.net/libaineu2004/article/details/46234079 在Mac OS X下使用Qt开发,需要配置Qt库和编译器.编译器只能使用苹果公司自主研发的Clang.1.分别下载并安装XCode和Command Line Tools(必须安装),安装完毕后,Clang就有了. https://developer.apple.com/downloads/ 2.下载Qt并默认安装 http://down

基于 Eclipse 的 MapReduce 开发环境搭建

文 / vincentzh 原文连接:http://www.cnblogs.com/vincentzh/p/6055850.html 上周末本来要写这篇的,结果没想到上周末自己环境都没有搭起来,运行起来有问题的呢,拖到周一才将问题解决掉.刚好这周也将之前看的内容复习了下,边复习边码代码理解,印象倒是很深刻,对看过的东西理解也更深入了. 目录 1.概述 2.环境准备 3.插件配置 4.配置文件系统连接 5.测试连接 6.代码编写与执行 7.问题梳理 7.1 console 无日志输出问题 7.2

ICE分布式文件管理系统——ICE环境搭建(其二)

上一博文,我们讲述了ICE这个中间件的基本认识. 接下来我们讲述开发环境搭建. 其过程主要分为三步: 安装GCC-4.4.6.安装ICE-3.4.2.安装QT-4.7.3. (本文是基于LINUX下的ICE-3.4.2的安装,如果已安装了GCC(版本高于GCC-4.4.6亦可),请直接安装ICE) 一.安装GCC: (gcc各版本浏览地址:http://ftp.gnu.org/gnu/gcc/) 一般来说基于linux的操作系统都是默认安装了GCC的.假如说你的电脑没有的话 请百度一哈,可以解决

[Step-By-Step Angular2](1)Hello World与自动化环境搭建

随着rc(release candidate,候选版本)版本的推出,万众瞩目的angular2终于离正式发布不远啦!五月初举办的ng-conf大会已经过去了整整一个月,大多数api都如愿保持在了相对稳定的状态——当然也有router这样的例外,在rc阶段还在大面积返工,让人颇为不解——不过总得说来,现在学习angular2不失为一个恰当的时机. Google为angular2准备了完善的文档和教程,按理说,官网(https://angular.io)自然是学习新框架的最好教材.略显遗憾的是,在B