概述

习惯了IDEA写代码,也不想在下一个webstorm,而且IDEA是webstorm的父集,webstorm能干的,IDEA应该也是可以的。本篇随便记录下idea下的react的环境搭建。

环境

windows 10

intellij IDEA 2017.3

node.js  9.9

安装

node.js安装基本是傻瓜操作,在这不详细描述。安装完后,windows已经默认有node环境配置。

因为npm的镜像是国外的,除非你能翻墙,否则一般是安装不了,能的话安装也会非常缓慢。但国内阿里开发的淘宝npm镜像,就能满足我们的需求。win + R 输出cmd打开黑窗口  npm install -g cnpm --registry=https://registry.npm.taobao.org 等待安装

出现这个就证明安装成功

intellij IDEA

直接去官网下载,如果是免费版的可能会出现无法安装的情况,所以建议下完整版的。激活的话,有条件购买正版,学生党之类自己想办法(你懂的)

进入IDEA后,ctrl + alt + s 如果没安装node.js是没有这个插件的,现在我们安装插件

在file > setting > plugins 然后手动点击Browe rep....

在搜索里找nodejs

安装完,重启IDEA就能找到上图的node.js and npm

还得在黑窗口运行  npm install -g create-react-app搭建react脚手架,然后新建一个react项目

然后等待。。。下载一些核心依赖包,出现下面文字就成功了

Inside that directory, you can run several commands:
npm start
Starts the development server.
npm run build
Bundles the app into static files for production.
npm test
Starts the test runner.
npm run eject
Removes this tool and copies build dependencies, configuration files
and scripts into the app directory. If you do this, you can’t go back!
We suggest that you begin by typing:
cd dragtest
npm start
Happy hacking! Done

接下去就是运行npm

成功跑起来啦。。

看浏览器,搭建成功

最后,初学react可看下《react入门实例》

======================================================

如发现错误,请及时留言,lz及时修改,避免误导后来者。感谢!!!

IDEA开发React环境配置的更多相关文章

  1. Selenium2学习-001-Selenium2 WebUI自动化Java开发 Windows 环境配置

    此文主要介绍 Selenium2 WebUI自动化Java开发 Windows 环境配置,供各位亲们参考,若有不足之处,敬请各位大神指正,非常感谢! 所需软件列表如下所示: 所属分类 具体名称 备注 ...

  2. IntelliJ IDEA开发golang环境配置

    IntelliJ IDEA开发golang环境配置 首先把GO安装好...(自行安装,附上一篇我之前写的MAC安装GO) 安装IntelliJ IDEA,下载地址: https://www.jetbr ...

  3. Android开发adb环境配置

    adb的全称为Android Debug Bridge,就是起到调试桥的作用. 在命令行cmd中打开adb,如果Android开发的环境配置有误,会出现如下错误提示: 解决方法,右键我的电脑-> ...

  4. PHP开发调试环境配置(基于wampserver+Eclipse for PHP Developers )

    1 软件准 WampServer 下载地址:http://www.wampserver.com/en/#download-wrapper    我下的是 里面包含了搭建PHP必须的4个软件:   1. ...

  5. Eclipse++Xdebug开发php环境配置

    一.php环境配置: 本次使用了appserv 2.5.10集成安装包.具体版本如下,安装后php版本是5.2.6 vc6,apache版本2.2 安装完成后,php配置文件在c:\windows目录 ...

  6. PHP开发调试环境配置

    ——基于wamp和Eclipse for PHP Developers 引言 为了搭建PHP开发调试环境,我曾经在网上查阅了无数的资料,但没有一种真正能够行的通的.因为PHP开发环境需要很多种软件相互 ...

  7. Android开发之环境配置篇

    Android环境配置: 一.JDK(不用安装) 1.拷贝 D:\Java\jdk1.8.0_91 文件内容 2. 安卓ADT ADT(Android Development Tools):安装ADT ...

  8. React环境配置(第一个React项目)

    使用Webpack构建React项目 1. 使用NPM配置React环境 NPM及React安装自行百度 首先创建一个文件夹,the_first_React 进入到创建好的目录,npm init,然后 ...

  9. Go程序开发---Go环境配置:CentOS6.5+Go1.8标准包安装

    1.Go安装 1.1Go的三种安装方式 Go有多种安装方式,可以选择自己习惯的方式进行,这里介绍三种安装方式: 1)Go源码安装 2)Go标准包安装 3)第三方工具安装 这里主要介绍下Go标准包在Ce ...

随机推荐

  1. 简单mvc---模拟Springmvc

    1.注解篇 Auwowrited package org.aaron.mvc.annaotation; import java.lang.annotation.Documented; import j ...

  2. Nginx 核心配置-作为下载服务器配置

    Nginx 核心配置-作为下载服务器配置 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.无限速版本的下载服务器 1>.查看主配置文件 [root@node101.yinz ...

  3. maven中,dependency 中的 classifier属性

    classifier元素用来帮助定义构件输出的一些附属构件.附属构件与主构件对应,比如主构件是 kimi-app-2.0.0.jar 该项目可能还会通过使用一些插件生成 如 kimi-app-2.0. ...

  4. K8S当中的本地卷(Local PV)的使用

    Local PV是从kuberntes 1.10开始引入,本质目的是为了解决hostPath的缺陷.通过PV控制器与Scheduler的结合,会对local PV做针对性的逻辑处理,从而,让Pod在多 ...

  5. 对象存储服务 OSS(Object Storage Service),知识点(待补充上仓库代码)

    资料 网址 官方文档 https://help.aliyun.com/product/31815.html?spm=a2c4g.11186623.3.1.3e1459669xRokl OSS Brow ...

  6. 2016 ACM/ICPC亚洲区沈阳站

    A B C D E F G H I J K L M O O O $\varnothing$ $\varnothing$   $\varnothing$ $\varnothing$ $\varnothi ...

  7. css如何让父元素下的所有子元素高度相同

    小颖最近做的项目中要实现一个样式 ,小颖怕自己忘记了,写个随笔记下来 需求父元素下有多个子元素,并且子元素过多时要实现自动换行,给每个子元素都加了右边框,而每个子元素里的内容多少不一定,这就会产生右边 ...

  8. selenium--浏览器滚动条操作

    前戏 在进行web自动化的时候,selenium只能找当前屏幕上的标签,如果标签在当前页面没显示下,需要拖动滚动条才能查看到这个元素,这时候就要操作浏览器的滚动条,让当前页面显示这个元素才可以操作,在 ...

  9. Android Studio 之 GridView

    1. 数据源 ArrayList Cursor 2. 适配器 Adapter ArrayAdapter SmipleAdapter SmipleCursorAdapter BaseAdapter

  10. 批处理中setlocal enabledelayedexpansion的作用详细整理

    转自:https://www.jb51.net/article/29323.htm 设置本地为延迟扩展.其实也就是:延迟变量,全称延迟环境变量扩展, 想进阶,变量延迟是必过的一关!所以这一部分希望你能 ...