eclipse和create-react-app（eclipse react导入为工程）
为什么80%的码农都做不了架构师？>>>
eclipse 搭建react开发环境搭建
create-react-app+eclipse
react eclipse
create-react-app菜鸟总结（eclipse）
第1天初学总结，本教程从零基础搭建eclipse平台下的react官方脚手架开发
作者：[email protected]
基于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
以上是 eclipse和create-react-app（eclipse react导入为工程） 的全部内容， 来源链接： utcz.com/z/383077.html
