eclipse和create-react-app（eclipse react导入为工程）

为什么80%的码农都做不了架构师？>>>   

eclipse 搭建react开发环境搭建

create-react-app+eclipse

react eclipse

create-react-app菜鸟总结（eclipse）

第1天初学总结，本教程从零基础搭建eclipse平台下的react官方脚手架开发

作者：pengchuntao@126.com

基于window7环境 ，步骤如下：

1，react开发的方式

第1种方式：

传统的，在html里面导入react的源文件(js)，然后在html编辑。

第2种方式：

使用脚手架来开发 ，比较流行的几个：

1,react-boilerplate

2,react-redux-starter-kit

3,create-react-app

4,阿里的Ant Design of React

其中create-react-app是facebook官方的

后续的教程都是基于这个create-react-app

2,安装node.js服务器

node.js官网

http://nodejs.cn/download/

我这里下载的是Windows 系统 (.msi) ，64位

目前的版本是node-v8.11.3-x86

安装到D:\dev-software\node-v8.11.3-x86

安装完毕后，在dos命令下任意目录使用命令测试

npm -v

得到的结果5.6.0

3.新建文件夹

新建文件夹，修改npm下载模块的保存位置

Dos命令窗口，使用下面命令新建2个文件夹

npm config set prefix "D:\dev-software\node-v8.11.3-x86\node_global"

npm config set cache "D:\dev-software\node-v8.11.3-x86\node_cache"

打开D:\dev-software\node-v8.11.3-x86发现多了2个文件夹

4，添加系统环境变量

计算机—属性—高级系统设置—高级—环境变量—系统变量—新建

变量名：NODE_PATH

变量值：D:\dev-software\node-v8.11.3-x86\node_global\node_modules

变量名：path

变量值：末尾增加;D:\dev-software\node-v8.11.3-x86\node_global\;

此后所安装的模块都会安装到改路径下

如有必要可以在path里面添加%NODE_PATH%

默认安装的时候在path中本身就有D:\dev-software\node-v8.11.3-x86\

5，安装阿里cnpm

Dos任意目录下执行下面命令

npm install -g cnpm --registry=https://registry.npm.taobao.org

输入测试命令看看效果

cnpm -v

6，解决npm下载依赖资源慢

修改下载仓库为淘宝镜像

Dos任意目录下执行下面命令：

npm config set registry https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了

-- 配置后可通过下面方式来验证是否成功

npm config get registry

7，安装create-react-app脚手架

Dos任意目录执行下面命令

npm install -g create-react-app

这样就可以创建react项目了

8，创建项目

新建E:\project-react文件夹

Dos命令进入到该文件夹

C:\Users\PCT>e:

E:\>cd project-react

E:\project-react>create-react-app my-app

create-react-app my-app命令就是创建了一个项目

--node_modules用于存放项目的依赖包，也就是构建这个React项目可能会用到的工具

--public文件夹中是 index.html存放目录，也就是React根页面的所在地

--src中用于存放js文件，也就是项目开发中的主要区域

--package.json用于记录项目信息，以及外部依赖包的导入信息等

Dos进入E:\project-react\my-app>

输入下面命令：

cnpm init （一路回车）

cnpm install --save react react-dom

cnpm install --save react-router-dom

9，启动项目

Dos进入E:\project-react\my-app>

输入：cnpm start

默认浏览器会弹出react首页面信息

10，eclipse导入my-app工程

Eclipse新建一个General-Project ，把这个新工程生成的.project文件拷贝到E:\project-react\my-app下，修改里面的my-app

（所有的eclipse能识别的工程都有个.project,任何地方拷贝过来都可以的，只要eclipse能认为是eclipse工程即可）

打开eclipse导入已经存在的工程

import--General--Projects from Folder or Archive

Import source:E:\project-react\my-app

Folder打勾，my-app

Finish

11，配置启动，停止服务命令

在项目的任意目录下新建一个my-app-start.bat文件，内容如图：

在项目的任意目录下新建一个my-app-stop.bat文件，内容如图：

配置External Tools Configurations

点击菜单Run--External Tools--External Tools Configurations

或者下面图

12,启动，停止服务

自动打开默认浏览器首页，下面我改了内容，不是原始的

停止，点击eclipse上面的红色方块，进程有时候杀不死，所以用dos来杀：

其实上面启动，停止可以直接在dos里面执行

在项目的根目录新建2个文件

my-app-start.bat

里面就一行代码 npm start

 

再建一个my-app-stop.bat

里面代码taskkill /im node.exe /f

直接在硬盘打开所在文件夹，双击就可以了

 

还有一种更便捷的方式启动服务器，见下图

 

如果要终止：ctrl + c

转载于:https://my.oschina.net/hfq/blog/1863093