本系列在《The Road to learn React》指导下，记录如何写出 Hacker News (译者注:一个著名黑客论坛)应用，以及更多相关知识的梳理，能够更好的教会你 React。
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.2
added 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-app
npm 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 hackernews
cd 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
(完)
网友评论