React是什么
React是 Facebook在2013年发布的一个视图库。由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
react.jpg
类似技术: Angular、Ember、Backbone 第一代SPA(single page application)
为什么选择React: 《我为什么从 Angular 转移到了 React》
下面我根据《The Road to learn React》这本书，记录自己的React入门之路。你只要看上面的入门教程，就能初步掌握React。当然，我这里会更多的将本书中的练习部分扩展开来，更加深入、全面的了解React。
开发环境
这里，我使用MacOS为开发环境，并用一个IDE覆盖开发的大部分工作。若你想使用一组轻量级的开发工具(Sublime, iTerm2等)来搭建你的开发环境；或者是Windows用户，环境搭建请参考: My development setup as a JavaScript web developer
Node and NPM
本小节是关于 node 和 npm 的速成教程
Node是JavaScript运行在浏览器之外的环境；NPM是node package manager，用于下载框架和包，比如React.js。
常用命令:
// 安装一个全局 node 包npm install -g <package>// 安装一个本地包npm install <package>// 创建 npm 项目npm init -y// --save-dev 标记表示该 node 包只是用作开发环境的一部分，并不会被作为你产品代码的一 部分发布npm install --save-dev <package>
更多关于 npm 的内容请见: npm官方文档
搭建一个简易的 npm 项目，直接看命令行:
// 使用 mkdir < 文件夹名 > 创建一个新的文件夹 && 通过cd<文件夹名>进入该文件夹 mkdir first-app-demo && cd first-app-demo// 运行npm init -y或者npm init来初始化一个npm项目 npm init -y
Wrote to /Users/Lin/Documents/node/first-app-demo/package.json:
{ "name": "first-app-demo", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1"
}, "keywords": [], "author": "", "license": "ISC"}// 安装一个本地包React npm install react
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN first-app-demo@1.0.0 No description
npm WARN first-app-demo@1.0.0 No repository field.
+ react@16.4.2added 18 packages from 90 contributors in 3.772s这里留个练习题: 找找看有没有什么办法把 react 从项目中卸载掉?
请参考关于 npm文档的更多内容。
Visual Studio Code
这个不多说，看Visual Studio Code的官网
create-react-app
该教材将使用create-react-app来创建应用。create-react-app是Facebook 在2016年创建了这样一个零配置的 React 初始化套件。
为什么使用create-react-app?
A: create-react-app可以无配置方式搭建React系统。作为web开发初学者，可以先把Webpack和Babel放一边，使用create-react-app方式进行React开发。
用create-react-app创建第一个React.js应用:
// 安装create-react-appnpm install -g create-react-app// 创建第一个React.js应用create-react-app my-app
git: git官网
一个开源的分布式版本控制系统，必不可少。
创建第一个React应用
将使用 create-react-app 来创建应用。
创建和初始化 React 应用:
npm install -g create-react-app create-react-app --version create-react-app hackernewscd hackernews
简单划分应用中的文件和文件夹:
README.md
node_modules/: 这个文件夹包含了所有通过 npm 安装的 node 包
package.json: 这个文件包含了 node 包依赖列表和一些其他的项目配置
.gitignore: 这个文件包含了所有不应该添加到 git 仓库(repository)中的文件和文件
夹。public/: 这个文件夹包含了所有你的项目构建出的产品文件。
manifest.json 和 registerServiceWorker.js
运行 & 测试:
// 在 http://localhost:3000 启动应用 npm start// 运行所有测试 npm test// 构建项目的产品文件 npm run build
作者：L2先森
链接：https://www.jianshu.com/p/01cece049f14
共同學(xué)習(xí)，寫下你的評(píng)論
評(píng)論加載中...
作者其他優(yōu)質(zhì)文章
