《React进阶之路》学习笔记 第一章：初识React

Chapter1 初识React

§1.1 React简介

React：以组件（component）为核心，用组件搭建UI的开发模式。

React的特点：

1. 声明式的视图层
2. 简单的更新流程
3. 灵活的渲染实现
4. 高效的DOM操作

React需要结合其他库（如Redux等）使用才能发挥最大作用。

§1.2 ES 6语法简介

简述了Javascript语言ES 6标准的新特性

1. 声明变量

//var, const, let
{
	var a = 1;
	let b = 2;
}
a		// 1
b		// Error, b is not defined
const c = 3;
c = 4;	// Error

2. 声明函数

//省略function, return关键字
//case 1
var f = () => 1;		//等价于：function f() { return 1; }
var f = a => a+1;		//等价于：function f(a) { return a + 1; }
var f = (a, b) => a+b;	//等价于：function f(a, b) { return a + b; }
var f = (x, y) => {
	x++;
	y--;
	return x + y;
}						//同上，但多条语句的情况下不能省略return

3. 字符串

//普通字符串
var str1 = 'string';	//valid
var str2 = "string";	//valid
//模板字符串（以反引号` `标识字符串）
var str3 = `string`;	//valid
var str4 = `str
			ing`;		//valid, defined in multi-line
var str5 = "SYSU";
var str6 = `Hello, ${str5}!`	//valid, embedded variable

4. 解构赋值
   解构：按照一定模式从数组和对象中提取值，对变量进行赋值

//数组解构
let [a, b, c] = [1, 2, 3];	// a=1, b=2, c=3
//对象解构
//case 1
let name = 'SDCS';
let age = 4;
let college = {name, age};	// the same as {name: "SDCS", age: 4}
//case 2
let college = {name: "SDCS", age: 4};
let {name, age} = college;	// name == "SDCS", age == 4
//函数参数解构
//case 1: 数组参数
function sum ([x, y]) {
	return x + y;
}
sum([1, 2]);				// 3
//case 2: 对象参数
function sum ({x, y}) {
	return x + y;
}
sum({x: 1, y: 2});			// 3
//嵌套结构的解构
let [a, [b], c] = [1, [2], 3];	// a==1, b==2, c==3
let {college: {name, age}, fun} = 
	{college: {name: "SDCS", age: 4}, fun: 'fun'};

5. class

//定义一个类
class College {
	constructor(name, age) {
		this.name = name;
		this.age = age;
	}
	getName() {
		return this.name;
	}
	getAge() {
		return this.age;
	}
}
let college = new College("SDCS", 4);	//创建类的对象

类的继承使用 extends 和 super关键字

//类的继承
class ComputerScience extends College {
	constructor(name, age) {
		super(name, age);
	}
	getProfession() {
		return 'Computer Science';
	}
}
let computerScience = new ComputerScience('SDCS', 4);

6. import、export
   实现模块化标准主要由两个关键字构成：export 和 import 。export 用于规定模块外对外暴露的接口，import 用于引入其他模块提供的接口。
   （详情见后续部分）

§1.3 开发环境与工具

§1.3.1 基础环境

1. Node.js
   Node.js是一个JavaScript运行时，它让JavaScript在服务器端运行成为现实
   点击此处下载
2. NPM
   NPM时一个模块管理工具，用于管理模块的发布、下载及模块之间的依赖关系

§1.3.2 辅助工具

Webpack, Babel, ESLint, Visual Studio Code（简称VS Code）

§1.3.3 Create React App

梦想开始的地方

1. 安装
   Windows系统下按下Win+R，输入cmd进入命令行终端，输入以下命令：
   npm install -g create-react-app
   通过使用-g参数，我们将 create-react-app 安装到了系统的全局环境，这样我们就可以在任意路径下使用它了。
2. 创建应用
   使用 create-react-app 在桌面创建一个新应用，在命令行终端运行：
   cd Desktop
create-react-app my-app
   这时会在桌面创建一个名为 my-app 的文件夹， my-app 也就是我们新创建的 React 应用。
3. 运行应用
   在命令行终端运行：
   cd my-app
npm start
   当应用启动成功后，在Chrome地址栏输入http://localhost:3000即可访问应用。
   用VS Code打开 my-app 文件夹，可看到文件夹内的目录如下图所示：
   
   node_modules：文件夹内是安装的所有依赖模块。
   package.json：文件定义了项目的基本信息，如项目名称、版本号、在该项目下可执行的命令以及项目的依赖模块等。
   public：文件夹下的 index.html 是应用的入口界面。
   src：（src即为source）文件夹下是项目源代码。
   index.js：为代码入口。

index.js 导入了模块 App.js ，修改 App.js ，将它的方法修改如下：

function App() {
  return (
    <div className="App">
      <div className = "App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <h1>I love SDCS</h1>
        </div>
        <p className = "App-intro">
          Hello, world!
        </p>
    </div>
  );
}

保存文件之后，可以看到浏览器页面实时进行了更新：

至此，我们完成了第一个 React 应用。