React生态之React环境搭建

React特点

Declarative（声明式编码）
Component-Based (组件化编码)
高效的DOM Diff 算法,最小化页面重绘
单向数据流

• React 生态：React、React-Router、Redux、Axios、 Babel、Webpack

React 脚手架配置开发环境

1. 普通方式

   npm install -g create-react-app
create-react-app my-app(项目目录)

   cd my-app
npm start

2. 官方方式 (需要Node>= 6和npm >= 5.2)

   npx create-react-app my-app(项目目录)
cd my-app
npm start

官方解释 npx 命令：第一行的npx并不是一个打印错误——它是npm 5.2+附带的一个包运行器工具。

以下是 npx create-react-app my-app2 运行过程

可以看到以下是通过yarn来运行项目 。yarn是新一代包管理工具,相比npm更高效
yarn add v1.13.0 yarn版本
yarn start 项目本地运行命令
yarn build 项目打包命令
yarn test 启动测试项目
yarn eject 开放配置文件

	D:\NodeProject>npx create-react-app my-app2
	npx: installed 1 in 9.405s
	Path must be a string. Received undefined
	npx: installed 63 in 23.755s
	C:\Users\Administrator\AppData\Roaming\npm-cache\_npx\11088\node_modules\create-react-app\index.js
	
	Creating a new React app in D:\NodeProject\my-app2.
	
	Installing packages. This might take a couple of minutes.
	Installing react, react-dom, and react-scripts...
	
	yarn add v1.13.0
	[1/4] Resolving packages...
	[2/4] Fetching packages...
	info fsevents@1.2.7: The platform "win32" is incompatible with this module.
	info "fsevents@1.2.7" is an optional dependency and failed compatibility check. Excluding it from installat
	ion.
	info fsevents@1.2.4: The platform "win32" is incompatible with this module.
	info "fsevents@1.2.4" is an optional dependency and failed compatibility check. Excluding it from installat
	ion.
	[3/4] Linking dependencies...
	[4/4] Building fresh packages...
	success Saved lockfile.
	warning Your current version of Yarn is out of date. The latest version is "1.15.2", while you're on "1.13.
	0".
	info To upgrade, run the following command:
	$ curl --compressed -o- -L https://yarnpkg.com/install.sh | bash
	success Saved 5 new dependencies.
	info Direct dependencies
	├─ react-dom@16.8.5
	├─ react-scripts@2.1.8
	└─ react@16.8.5
	info All dependencies
	├─ fork-ts-checker-webpack-plugin@1.0.0-alpha.6
	├─ react-dev-utils@8.0.0
	├─ react-dom@16.8.5
	├─ react-scripts@2.1.8
	└─ react@16.8.5
	Done in 236.63s.
	
	Initialized a git repository.
	
	Success! Created my-app2 at D:\NodeProject\my-app2
	Inside that directory, you can run several commands:
	
	  yarn start
	    Starts the development server.
	
	  yarn build
	    Bundles the app into static files for production.
	
	  yarn test
	    Starts the test runner.
	
	  yarn 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 my-app2
	  yarn start
	
	Happy hacking!