概述

习惯了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. Class.forName() 与 ClassLoader.loadClass()的区别

        看到一个面试题,说说Class.forName() 与 ClassLoader.loadClass()的区别,特意记录一下,方便后续查阅.     在我们写java代码时,通常用这两种方式来动 ...

  2. spoon数据转换中文乱码(kettle)

    (1) 查看mysql数据库是否为utf8(status) (2) 设置spoon (3) 文本打开spoon.bat,找到set OPT=%OPT% %PENTAHO_DI_JAVA_OPTIONS ...

  3. 0x02 Python logging模块利用配置加载logger

    目录 logging模块利用配置加载logger 方式一模板:logging.config.dictConfig(config_dict) logging模块利用配置加载logger logging. ...

  4. nginx 配置相关解析

    nginx模块处理流程一般是这样的: 客户端发送HTTP请求 –> Nginx基于配置文件中的位置选择一个合适的处理模块 ->(如果有)负载均衡模块选择一台后端服务器 –> 处理模块 ...

  5. Alipay SDK验签PHP低于5.5版本错误

    低于PHP5.5版本不支持OPENSSL_ALGO_SHA256函数,要想使用RSA2加密,把OPENSSL_ALGO_SHA256函数替换为:sha256WithRSAEncryption 解密方法 ...

  6. The 2016 ACM-ICPC Asia China-Final L World Cup(深搜+回溯 暴力求解)

    题目分析: 对于A,B,C,D四支队伍,两两之间进行一场比赛,获胜得3分,平局得1分,失败不得分,现在对给出的四个队伍的得分,判断能否满足得到这种分数,且方案唯一输出yes,不唯一输出no,不可能则输 ...

  7. Transformer---BERT模型

    一.BERT介绍 论文地址:BERT: Pre-training of Deep Bidirectional Transformers for Language Understanding  BERT ...

  8. rtmpdump应用在window中

    rtmp.c 中RTMP_GetTime()函数要改成如下: #pragma comment(lib, "winmm.lib ")uint32_tRTMP_GetTime(){// ...

  9. Nacos 学习资料

    资料 网址 官方网站 https://nacos.io/zh-cn/docs/what-is-nacos.html github https://github.com/alibaba/nacos 程序 ...

  10. MySQL体系结构与存储引擎

    MySQL 体系结构 先看 MySQL 数据库的体系结构,如下图所示. MySQL 体系结构由 Client Connectors 层.MySQL Server 层及存储引擎层组成. Client C ...