在深入学习 React 之前，熟练掌握 JavaScript 的一些核心概念是非常重要的。React 建立在现代 JavaScript（ES6+）之上，因此理解这些概念将帮助你更有效地使用这个框架。这一节将覆盖一些 ES6+ 的基本特性，包括 let、const、箭头函数、模板字面量、解构赋值、模块化等。

1. 变量声明：let 和 const

在 ES6 之前，我们使用 var 来声明变量。但 var 有一些作用域的问题，对代码的可维护性造成不便。ES6 引入了 let 和 const。

• **let**：用来声明一个块级作用域的变量。

  1 2 3 4 5 6

  let x = 10; if (true) { let x = 20; // 这里的 x 是一个新的变量 console.log(x); // 20 } console.log(x); // 10

• **const**：用来声明一个常量，一旦赋值后不能再修改。

  1 2	const PI = 3.14; // PI = 3.14159; // TypeError: Assignment to constant variable.

注意：const 声明的对象是可变的，但不能重新赋值。

1
2

const arr = [1, 2, 3];
arr.push(4); // 合法，arr 变成 [1, 2, 3, 4]

2. 箭头函数

箭头函数是 ES6 引入的一种简化的函数写法，可以让你更方便地定义函数。它的语法更简洁，同时 this 的绑定规则也与普通函数不同。

1
2
3

const add = (a, b) => a + b;

console.log(add(2, 3)); // 输出 5

特点

• 简化语法：省略了 function 关键字和 {}，适用于单行函数。
• **绑定 this**：箭头函数不绑定 this，所以其上下文由外部作用域决定。

1
2
3
4
5
6
7
8
9

function Counter() {
    this.count = 0;
    setInterval(() => {
        this.count++;
        console.log(this.count);
    }, 1000);
}

const counter = new Counter(); // 每秒输出 count

3. 模板字面量

模板字面量是 ES6 引入的一种字符串定义方式，可以在字符串中嵌入表达式，非常方便。

1
2
3

const name = 'React';
const greeting = `Hello, ${name}!`;
console.log(greeting); // 输出 "Hello, React!"

支持多行字符串：

1
2
3

const multiLine = `这是第一行
这是第二行`;
console.log(multiLine);

4. 解构赋值

解构赋值是从数组或对象中提取值的一种简便语法，可以让代码更简洁。

数组解构

1
2
3
4

const arr = [1, 2, 3];
const [first, second] = arr;
console.log(first); // 输出 1
console.log(second); // 输出 2

对象解构

1
2
3
4

const obj = { x: 1, y: 2 };
const { x, y } = obj;
console.log(x); // 输出 1
console.log(y); // 输出 2

可以为解构的变量重命名：

1
2
3
4

const obj = { a: 1, b: 2 };
const { a: alpha, b: beta } = obj;
console.log(alpha); // 输出 1
console.log(beta); // 输出 2

5. 模块化

ES6 引入了模块化机制，你可以使用 import 和 export 来导出和引入模块。

导出

1
2
3
4
5

// a.js
export const MY_CONSTANT = 42;
export function myFunction() {
    console.log('Hello from myFunction!');
}

导入

1
2
3
4
5

// b.js
import { MY_CONSTANT, myFunction } from './a.js';

console.log(MY_CONSTANT); // 输出 42
myFunction(); // 输出 "Hello from myFunction!"

6. 总结

以上是 JavaScript ES6+ 的一些重要基础知识。在学习 React 的过程中，这些特性将会频繁使用。掌握这些特性对于你编写可维护的、现代化的 JavaScript 代码是非常重要的。接下来，我们将深入学习 React 的核心概念和组件模型。

小节：创建第一个React应用

在本节中，我们将学习如何创建我们的第一个React应用。这个过程涉及到安装相关工具、创建项目以及运行应用。让我们一步步来。

1. 准备环境

在开始之前，我们需要确保已经安装以下工具：

• Node.js: React依赖于Node.js，因此你需要先安装它。可以从Node.js官网下载并安装适合你操作系统的版本。

• npm（Node Package Manager）: 安装Node.js后，npm会自动安装。npm是用于安装和管理JS库的工具。

• npx: npx是npm 5.2.0及更高版本自带的，可以用来运行npm包的命令。我们将在创建React应用时使用它。

2. 创建React应用

使用Create React App

Create React App是一个官方支持的脚手架工具，可以快速启动一个新的React项目。打开终端并执行以下命令：

1

npx create-react-app my-first-react-app

这里的my-first-react-app是你所要创建的应用的名称。执行该命令后，Create React App会自动为你创建一个包含基本结构的React项目。

进入项目目录

项目创建完成后，进入项目目录：

1

cd my-first-react-app

3. 运行应用

现在，我们已经在本地创建了一个React应用。要启动开发服务器并查看你的应用，可以执行以下命令：

1

npm start

这会启动开发服务器，并在默认的浏览器中打开http://localhost:3000。你应该会看到一个简单的React应用界面，类似于以下内容：

1
2

Edit src/App.js and save to reload.
Learn React

4. 理解项目结构

在创建的应用中，有几个重要的文件和目录：

• node_modules/: 存放项目依赖的目录。

• public/: 存放静态文件，如index.html等。

• src/: 主要的源代码目录。我们将在这里编写React组件。

  • App.js: 默认生成的React组件。

  • index.js: 应用的入口文件。

5. 修改应用

我们可以对src/App.js文件进行简单修改，以定制我们的应用。打开src/App.js文件，用以下代码替换原有内容：

1
2
3
4
5
6
7
8
9
10
11
12

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, World!</h1>
      <p>Welcome to my first React app!</p>
    </div>
  );
}

export default App;

保存文件后，你的浏览器会自动刷新，并显示新的内容：

1
2

Hello, World!
Welcome to my first React app!

6. 总结

恭喜你！你已经创建并运行了你的第一个React应用。在本小节中，我们学习了如何：

• 安装Node.js并使用npx创建一个新的React项目。
• 启动开发服务器并访问应用。
• 修改React组件以个性化我们的应用。

接下来，我们将深入研究React的基本概念和组件的开发方式，让我们继续前进！

什么是 JSX？

JSX（JavaScript XML）是一种 JavaScript 的语法扩展，用于描述用户界面。通过 JSX，我们可以在 JavaScript 代码中轻松写出 HTML 结构，同时可以与 JavaScript 表达式相结合，极大地方便了界面的构建。

1

const element = <h1>Hello, world!</h1>;

在上述代码中，<h1>Hello, world!</h1> 就是一个 JSX 表达式，它表示一个 HTML 元素。

JSX 的基本语法

1. 嵌套的 JSX

JSX 允许将多个元素嵌套在一起。以下是一个嵌套的示例：

1
2
3
4
5
6

const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>Welcome to learning React!</p>
  </div>
);

在这个例子中，<div> 元素内部嵌套了一个 <h1> 和一个 <p> 元素。

2. 使用 JavaScript 表达式

在 JSX 中，我们可以使用大括号 {} 将 JavaScript 表达式嵌入到 JSX 代码中。例如：

1
2

const name = "Jane Doe";
const element = <h1>Hello, {name}!</h1>;

在这里，{name} 被替换为变量 name 的值，即 “Jane Doe”。

3. JSX 中的属性

JSX 也允许我们在 HTML 元素中添加属性，如同在 HTML 中一样。属性值可以是字符串、表达式或其他变量。例如：

1

const element = <img src="avatar.png" alt="User Avatar" />;

对于表达式，可以这样使用：

1
2

const imageUrl = "avatar.png";
const element = <img src={imageUrl} alt="User Avatar" />;

4. JSX 表达式的条件渲染

在 JSX 中，我们可以通过 JavaScript 的条件语句来实现条件渲染。以下是一个使用三元运算符的例子：

1
2
3
4
5
6

const isLoggedIn = true;
const element = (
  <div>
    {isLoggedIn ? <h1>Welcome back!</h1> : <h1>Please sign in.</h1>}
  </div>
);

5. JSX 列表渲染

我们可以通过 map 方法在 JSX 中渲染列表。以下是一个示例：

1
2
3
4
5
6
7
8
9

const fruits = ['Apple', 'Banana', 'Cherry'];

const elements = (
  <ul>
    {fruits.map((fruit, index) => (
      <li key={index}>{fruit}</li>
    ))}
  </ul>
);

在这个例子中，我们使用 map 方法遍历 fruits 数组，为每个水果生成一个 <li> 元素。

6. JSX 的注意事项

• 使用唯一的 key 属性：在列表渲染时，React 要求每个元素都有一个唯一的 key 属性，以便于高效更新和渲染。

• 不能返回多个根节点：JSX 中的每个返回值必须是一个单独的根元素，例如我们可以通过 <div> 或 <>（Fragment）来包裹多个元素：

  1 2 3 4 5 6

  const element = ( <> <h1>Hello!</h1> <p>This is a paragraph.</p> </> );

7. 将 JSX 转换为 JavaScript

JSX 代码在构建时会被 Babel 转换为 JavaScript。上面的 JSX 代码将被转化为如下形式：

1
2
3
4
5

const element = React.createElement(
  'h1',
  null,
  'Hello, world!'
);

这意味着你可以在使用 React 时，完全不使用 JSX，但它的可读性和便利性使得 JSX 成为首选。

小结

JSX 是React中用于描述 UI 的一种强大工具。通过理解它的基本语法和使用方式，你将能够更轻松地构建复杂的用户界面。在实践中多加练习以上点，能够帮助你快速上手 React 框架。