React学习记录（1）

React 初学者学习笔记

1. 什么是 React?

React 是一个由 Facebook 创建的用于构建用户界面的 JavaScript 库。它注重于构建快速、动态的用户界面，主要用于开发单页应用（SPA）。

2. React 的核心概念

2.1 组件（Components）

组件是 React 的核心概念之一。每个组件可以看作是一个独立的模块，它可以接受输入（称为 "props"）并返回 React 元素来描述用户界面的一部分。

javascript

import React from 'react';

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

2.2 JSX

JSX 是一种 JavaScript 的语法扩展，允许我们在 JavaScript 中编写类似 HTML 的代码。它使得编写 React 组件的结构变得简单直观。

javascript

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

2.3 状态（State）和属性（Props）

状态（State）是组件内部的数据，属性（Props）是传递给组件的数据。

javascript

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

3. 安装和设置

3.1 安装 Node.js 和 npm

React 的开发依赖于 Node.js 和 npm（Node 包管理器）。可以从 Node.js 官网 下载并安装。

3.2 创建 React 应用

使用 create-react-app 命令行工具可以快速创建一个新的 React 应用。

bash

npx create-react-app my-app
cd my-app
npm start

4. 目录结构

create-react-app 创建的目录结构如下：

my-app/
  README.md
  node_modules/
  package.json
  public/
    index.html
    favicon.ico
  src/
    App.css
    App.js
    App.test.js
    index.css
    index.js
    logo.svg

5. 创建第一个组件

5.1 创建一个简单的组件

创建一个新的组件文件 Greeting.js：

javascript

import React from 'react';

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

export default Greeting;

5.2 使用组件

在 App.js 中使用新创建的组件：

javascript

import React from 'react';
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="World" />
    </div>
  );
}

export default App;

6. 使用状态和生命周期

6.1 添加状态

在 Clock 组件中添加状态并设置定时器：

javascript

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

6.2 渲染组件

在 App.js 中渲染 Clock 组件：

javascript

import React from 'react';
import Clock from './Clock';

function App() {
  return (
    <div>
      <Clock />
    </div>
  );
}

export default App;