react入门教程01 - 简介、开发环境搭建、创建第一个Rea

2018-08-07 本文已影响119人 L2先森

本系列在《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

(完)