概述

习惯了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. Linux源码编译nginx

    1.安装nginx 安装编译工具及库文件 yum -y install make zlib zlib-devel gcc-c++ libtool openssl openssl-devel 首先要安装 ...

  2. 【Spring Boot】Spring Boot之使用 Spring Boot Configuration Processor 完成设置自定义项目属性自动补全

    一.引入Maven坐标 <dependency> <groupId>org.springframework.boot</groupId> <artifactI ...

  3. bert模型参数简化

    我们下载下来的预训练的bert模型的大小大概是400M左右,但是我们自己预训练的bert模型,或者是我们在开源的bert模型上fine-tuning之后的模型的大小大约是1.1G,我们来看看到底是什么 ...

  4. 《MySQL性能优化篇》阅读笔记

    建表的时候,不要用null赋默认值,如:字符串的设置'',数据类型的设为0,不要将null设为默认值. 在MySQL中没有 full [outer] join,用union代替 各种 JOIN SQL ...

  5. mui或者uni退出app

    在安卓上可以使用 //1.1 var backButtonPress = 0; $.back = function(event) { backButtonPress++; if(backButtonP ...

  6. 【java异常】Expected one result (or null) to be returned by selectOne(), but found: 63

    OmQuotaTBBean omQuotaTBBean = mOmQuotaTBMapper.findOmQuotaTB(); 改成 List<OmQuotaTBBean> listOmQ ...

  7. GrowingIO配置

    一.什么是UTM参数UTM是一套标准的跟踪渠道流量的参数,你可以通过它来跟踪访问你网站的流量来自于哪些渠道.哪些媒介等. 二.高级用法 UTM参数包括了utm_source在内的5个参数,分别是: 参 ...

  8. Windbg Assembly Code(反汇编)窗口的使用

    在WinDbg中,可以通过输入命令(u, ub, uu (Unassemble))或使用反汇编窗口查看程序汇编代码. 如何打开 DissAssembly Code窗口 通过菜单View-->Di ...

  9. 【Codeforces】B. Div Times Mod

    B. Div Times Mod time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  10. helm repository 相关

    chart repo是一个可用来存储index.yaml与打包的chart文件的HTTP server.当要分享chart时,需要上传chart文件到chart仓库,任何一个能够提供yaml与tar文 ...