概述

习惯了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. 个人项目-WC (java实现)

    一.Github地址:https://github.com/734635746/WC 二.PSP表格 PSP2.1 Personal Software Process Stages 预估耗时(分钟) ...

  2. 七月伊始 LeetCode算法总结

    七月伊始 早上买了LeetCode的课程,解锁了付费题目,付费倒逼学习: 意识到这么久学习的东西,都是写在自己的笔记, 如今希望自己能够用自己拙笔记录这个学习和总结的过程. 队列的学习 设计循环队列 ...

  3. Resin开放远程调试端口

    Resin开放远程调试端口在启动加载的resin.xml中,找到  <server-default>, 在其下加入 <jvm-arg>-Xdebug</jvm-arg&g ...

  4. 【JavaScript】案例三:使用JS完成页面定时弹出广告——事件(onload)

     事件(onload) *注意点: 变量加var局部变量,不加var全局变量 setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭. 返回值:返回 ...

  5. system.exit(int status)中status值不同时的区别

    status为0时为正常退出程序,也就是结束当前正在运行中的java虚拟机. status为非0的其他整数(包括负数,一般是1或者-1),表示非正常退出当前程序. 可以明确的是,无论status是什么 ...

  6. pymysql 增删改 查 索引

    pymysql 模块的使用 pip install pymysql username = input ("请输入用户") pwd = input ("请输入密码" ...

  7. Python学习笔记7 头文件的添加规则(转载)

    转载自:https://www.cnblogs.com/taurusfy/p/7605787.html ************************************************ ...

  8. 重新学习Spring注解——声明式事务

    36.声明式事务-环境搭建 37.声明式事务-测试成功 38.[源码]-声明式事务-源码分析 /** * 声明式事务: * * 环境搭建: * 1.导入相关依赖 * 数据源.数据库驱动.Spring- ...

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

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

  10. pycharm调整选中的变量的颜色