首頁手記 React課程：新手必學的React基礎教程

React課程：新手必學的React基礎教程

標簽：

React.JS

概述

本课程涵盖了从环境搭建到组件化开发的全面内容，包括Node.js和Create React App的安装、第一个React应用的创建、JSX语法的基础以及组件化开发的详细介绍。此外，文章还涉及React组件的生命周期方法，并通过一个小项目实战演练了实际开发流程。

React简介

什么是React

React 是由 Facebook 开发并维护的一个用于构建用户界面的 JavaScript 库。它主要用来构建单页面应用（SPA）的用户界面，能够高效处理大量数据和复杂交互的应用程序。

React的特点

高效渲染：
- React 使用虚拟 DOM（Virtual DOM）技术，将真实 DOM 的一部分抽象为一个 JavaScript 对象，只在必要时更新真实 DOM，从而提高渲染效率。
组件化：
- React 使用组件化开发，将页面拆分成多个独立的、可复用的组件。每个组件负责一个功能或界面的一部分。
单向数据流：
- React 中的数据流是单向的，从父组件流向子组件，简化了数据流的追踪和组件之间的依赖管理。
JSX语法：
- React 使用 JSX 语法，将 HTML 标签嵌入到 JavaScript 中，使得 HTML 和 JavaScript 代码可以紧密结合，方便编写和理解。
生态系统丰富：
- React 有一个庞大的社区支持，提供了丰富的库和工具，如 Redux、React Router 等，可以快速构建复杂的应用程序。

React的应用场景

单页面应用（SPA）：
- React 适用于构建单页面应用，如电子商务网站、新闻平台、社交平台等，这些应用需要大量数据和复杂交互。
移动应用：
- React Native 是基于 React 构建的移动应用框架，可以使用 React 来构建原生移动应用。
桌面应用：
- 使用 Electron 等技术，可以使用 React 构建桌面应用。
游戏开发：
- 使用 React 构建游戏界面，特别是对于需要高效渲染的应用。

环境搭建

安装Node.js

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境，它使得 JavaScript 可以在服务器端运行。以下是安装 Node.js 的步骤：

访问 Node.js 官方网站 https://nodejs.org/。
选择适合您操作系统的安装包进行下载。
双击下载的安装包，按照提示完成安装。
安装完成后，打开命令行工具，输入以下命令来验证 Node.js 是否安装成功：

node -v
npm -v

安装Create React App

Create React App 是一个官方提供的脚手架工具，用于快速搭建 React 应用。以下是安装步骤：

打开命令行工具，输入以下命令来安装 create-react-app：

npx create-react-app my-app

cd my-app

启动开发服务器：

npm start

默认会在浏览器中打开 http://localhost:3000，显示默认的 React 应用界面。

创建第一个React应用

使用 create-react-app 创建的第一个应用已经包含了基本的 React 项目结构。以下是项目的主要目录结构：

my-app/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  ├── src/
  │   ├── index.js
  │   ├── App.js
  │   ├── App.css
  ├── package.json
  ├── README.md
  ├── package-lock.json

index.html：应用的 HTML 文件。
index.js：应用的入口文件。
App.js：应用的主要组件。
App.css：应用的样式文件。

启动应用后，可以在命令行工具中看到以下信息：

Compiled successfully!

You can now view my-app in the browser.

  Local:            http://localhost:3000

JSX语法基础

什么是JSX

JSX 是一种 JavaScript 的扩展语法，它允许在 JavaScript 代码中嵌入 HTML 标签。JSX 允许更接近 HTML 的语法来描述用户界面，使得编写 React 组件更加直观。

JSX的基本语法

JSX 语法类似于 HTML，但在 JSX 中可以内嵌 JavaScript 表达式。以下是一些基本的 JSX 语法示例：

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

标签：JSX 中可以使用标准的 HTML 标签。
属性：JSX 中可以使用属性来设置元素的属性。
JavaScript 表达式：JSX 中可以使用 {} 包裹 JavaScript 表达式。

const name = 'John';
const element = <h1>Hello, {name}!</h1>;

如何使用JSX编写React组件

在 React 中，组件是可复用的代码块，通常用于描述用户界面的一部分。以下是如何使用 JSX 编写 React 组件的基本步骤：

定义组件

使用 React.Component 类或函数定义组件。

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <div>Hello, World!</div>;
  }
}

函数组件

使用箭头函数定义函数组件。

import React from 'react';

const MyComponent = () => {
  return <div>Hello, World!</div>;
};

使用组件

在其他组件中使用定义的组件。

import React from 'react';
import ReactDOM from 'react-dom';
import MyComponent from './MyComponent';

ReactDOM.render(
  <MyComponent />,
  document.getElementById('root')
);

组件化开发

React组件的定义

React 组件是可复用的代码块，用于描述用户界面的一部分。每个组件可以有输入（props）和状态（state），可以独立于其他组件进行扩展和重用。

类组件

使用 React.Component 类定义组件。

import React from 'react';

class MyComponent extends React.Component {
  render() {
    return <div>Hello, {this.props.name}!</div>;
  }
}

函数组件

使用箭头函数定义组件。

import React from 'react';

const MyComponent = (props) => {
  return <div>Hello, {props.name}!</div>;
};

函数组件与类组件

React 中有两种主要的组件类型：函数组件和类组件。

函数组件

函数组件是轻量级的组件，只接收输入（props）并返回一个 UI。函数组件没有状态（state）和生命周期方法。

import React from 'react';

const FunctionComponent = (props) => {
  return <div>Hello, {props.name}!</div>;
};

类组件

类组件可以包含状态（state）和生命周期方法，可以执行副作用操作。类组件需要继承自 React.Component 类。

import React from 'react';

class ClassComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'John'
    };
  }

  render() {
    return <div>Hello, {this.state.name}!</div>;
  }
}

组件的props和state管理

props

组件的输入属性（props），传递给组件的数据。子组件可以接收父组件传递的 props。

import React from 'react';

const ChildComponent = (props) => {
  return <div>Hello, {props.name}!</div>;
};

const ParentComponent = () => {
  return <ChildComponent name="John" />;
};

state

组件的状态（state）是组件内部的数据，可以用来控制组件的渲染。组件的状态可以通过 this.setState 方法来更新。

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'John'
    };
  }

  changeName = () => {
    this.setState({ name: 'Jane' });
  }

  render() {
    return (
      <div>
        <div>Hello, {this.state.name}</div>
        <button onClick={this.changeName}>Change Name</button>
      </div>
    );
  }
}

React生命周期方法

组件的生命周期介绍

React 组件的生命周期可以划分为三个主要阶段：初始化、更新和卸载。

初始化阶段

在组件的生命周期中，初始化阶段用于组件的创建和渲染。

constructor(props)：构造函数，用于初始化组件的状态。
static getDerivedStateFromProps(props, state)：静态方法，用于处理从 props 到 state 的转换。
render()：用于渲染组件。
componentDidMount()：组件挂载完成后调用，用于执行初始化操作，如数据加载。

更新阶段

在组件的生命周期中，更新阶段用于组件状态和 props 的变化。

static getDerivedStateFromProps(props, state)：静态方法，用于处理从 props 到 state 的转换。
shouldComponentUpdate(nextProps, nextState)：判断组件是否需要重新渲染。
getSnapshotBeforeUpdate(prevProps, prevState)：在组件更新渲染之前调用，可以读取 DOM 信息。
render()：用于渲染组件。
componentDidUpdate(prevProps, prevState)：组件更新完成后调用，用于执行副作用操作。

清理阶段

在组件的生命周期中，清理阶段用于组件的卸载。

componentWillUnmount()：组件卸载前调用，用于清理副作用操作，如取消网络请求。

初始化阶段的方法

组件的初始化阶段包括构造函数和挂载后的生命周期方法。

constructor(props)：构造函数，用于初始化组件的状态。

import React from 'react';

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'John'
    };
  }

  render() {
    return <div>Hello, {this.state.name}</div>;
  }
}

static getDerivedStateFromProps(props, state)：静态方法，用于处理从 props 到 state 的转换。

import React from 'react';

class MyComponent extends React.Component {
  static getDerivedStateFromProps(props, state) {
    if (props.name !== state.name) {
      return { name: props.name };
    }
    return null;
  }

  render() {
    return <div>Hello, {this.state.name}</div>;
  }
}

componentDidMount()：组件挂载完成后调用，用于执行初始化操作，如数据加载。

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

更新阶段的方法

组件的更新阶段包括 shouldComponentUpdate、getSnapshotBeforeUpdate 和 componentDidUpdate 方法。

shouldComponentUpdate(nextProps, nextState)：判断组件是否需要重新渲染。

import React from 'react';

class MyComponent extends React.Component {
  shouldComponentUpdate(nextProps, nextState) {
    return nextProps.name !== this.props.name || nextState.name !== this.state.name;
  }

  render() {
    return <div>Hello, {this.state.name}</div>;
  }
}

getSnapshotBeforeUpdate(prevProps, prevState)：在组件更新渲染之前调用，可以读取 DOM 信息。

import React from 'react';

class MyComponent extends React.Component {
  getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.name !== this.props.name) {
      return 'Component is updating';
    }
    return null;
  }

  componentDidUpdate(prevProps, prevState, snapshot) {
    if (snapshot) {
      console.log(snapshot);
    }
  }

  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

componentDidUpdate(prevProps, prevState)：组件更新完成后调用，用于执行副作用操作。

import React from 'react';

class MyComponent extends React.Component {
  componentDidUpdate(prevProps, prevState) {
    if (this.props.name !== prevProps.name) {
      console.log('Component updated');
    }
  }

  render() {
    return <div>Hello, {this.props.name}</div>;
  }
}

清理阶段的方法

组件的清理阶段包括 componentWillUnmount 方法。

componentWillUnmount()：组件卸载前调用，用于清理副作用操作，如取消网络请求。

import React from 'react';

class MyComponent extends React.Component {
  componentDidMount() {
    console.log('Component mounted');
  }

  componentWillUnmount() {
    console.log('Component unmounted');
  }

  render() {
    return <div>Hello, World!</div>;
  }
}

实战项目

小项目实战演练

本节将通过一个小项目来演练实际的开发流程，包括组件的定义、状态管理、生命周期等。

项目需求

实现一个简单的待办事项应用，可以添加、删除和完成待办事项。

项目结构

项目的基本结构如下：

todo-app/
  ├── node_modules/
  ├── public/
  │   ├── index.html
  ├── src/
  │   ├── App.js
  │   ├── App.css
  │   ├── index.js
  │   ├── index.css
  ├── package.json
  ├── README.md
  ├── package-lock.json

主要组件

项目中包含以下主要组件：

App.js：应用的主组件，负责管理应用的状态和逻辑。
TodoList.js：待办事项列表组件，负责显示所有待办事项。
TodoItem.js：单个待办事项组件，负责显示单个待办事项及其操作。
NewTodo.js：添加待办事项的组件，负责添加新的待办事项。

代码实现

以下是项目的完整代码实现。

App.js

import React, { Component } from 'react';
import './App.css';
import TodoList from './TodoList';
import NewTodo from './NewTodo';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      todos: [
        { id: 1, text: 'Learn JavaScript', completed: false },
        { id: 2, text: 'Learn React', completed: false },
        { id: 3, text: 'Learn Redux', completed: false },
      ],
    };
    this.addTodo = this.addTodo.bind(this);
    this.removeTodo = this.removeTodo.bind(this);
    this.toggleTodo = this.toggleTodo.bind(this);
  }

  addTodo(text) {
    const id = this.state.todos.length + 1;
    const newTodo = { id, text, completed: false };
    this.setState({ todos: [...this.state.todos, newTodo] });
  }

  removeTodo(id) {
    this.setState({
      todos: this.state.todos.filter(todo => todo.id !== id),
    });
  }

  toggleTodo(id) {
    this.setState({
      todos: this.state.todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      ),
    });
  }

  render() {
    return (
      <div className="App">
        <h1>Todo List</h1>
        <TodoList todos={this.state.todos} removeTodo={this.removeTodo} toggleTodo={this.toggleTodo} />
        <NewTodo addTodo={this.addTodo} />
      </div>
    );
  }
}

export default App;

TodoList.js

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

const TodoList = ({ todos, removeTodo, toggleTodo }) => (
  <ul>
    {todos.map(todo => (
      <TodoItem
        key={todo.id}
        todo={todo}
        removeTodo={removeTodo}
        toggleTodo={toggleTodo}
      />
    ))}
  </ul>
);

export default TodoList;

TodoItem.js

import React from 'react';

const TodoItem = ({ todo, removeTodo, toggleTodo }) => (
  <li>
    <input
      type="checkbox"
      checked={todo.completed}
      onChange={() => toggleTodo(todo.id)}
    />
    <span style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}>
      {todo.text}
    </span>
    <button onClick={() => removeTodo(todo.id)}>Remove</button>
  </li>
);

export default TodoItem;

NewTodo.js

import React, { Component } from 'react';

class NewTodo extends Component {
  constructor(props) {
    super(props);
    this.state = { text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleChange(event) {
    this.setState({ text: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    this.props.addTodo(this.state.text);
    this.setState({ text: '' });
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input
          type="text"
          value={this.state.text}
          onChange={this.handleChange}
        />
        <button type="submit">Add</button>
      </form>
    );
  }
}

export default NewTodo;

项目部署与上线

在完成项目开发后，可以通过以下步骤将项目部署到生产环境。

使用npm打包

运行以下命令打包应用：

npm run build

打包完成后，会在 build 目录生成静态文件。

部署到服务器

将 build 目录中的文件上传到服务器。
配置 Web 服务器（如 Nginx、Apache）来提供静态文件服务。

例如，使用 Nginx 配置静态文件服务：

server {
  listen 80;
  server_name yourdomain.com;

  root /path/to/your/build;
  index index.html;

  location / {
    try_files $uri $uri/ /index.html;
  }
}

启动 Web 服务器，使应用可以被访问。

使用第三方云服务

也可以将应用部署到云服务提供商，如 AWS、阿里云等，通过这些服务可以快速部署和托管应用。

注册并登录云服务提供商的控制台。
创建一个新应用或实例。
将打包后的静态文件上传到云服务提供商的存储服务（如 S3、OSS）。
配置域名和访问权限，使应用可以被访问。

通过以上步骤，可以将 React 应用部署到生产环境，使其可以被用户访问。

點擊查看更多內容

為 TA 點贊

若覺得本文不錯，就分享一下吧！

評論

評論

共同學習，寫下你的評論

評論加載中...

展開查看更多評論

作者其他優質文章

正在加載中

慕蓋茨4494581

手記
篇

粉絲

12

獲贊與收藏

29

關注作者，訂閱最新文章

閱讀免費教程

后端通用面試教程

41個小節 32074 358

網絡編程入門教程

20個小節 13196 249

Pandas 入門教程

25個小節 19586 369

推薦

評論

收藏

共同學習，寫下你的評論



感謝您的支持，我會繼續努力的～

掃碼打賞，你說多少就多少

贊賞金額會直接到老師賬戶

支付方式

打開微信掃一掃，即可進行掃碼打賞哦

今天注冊有機會得

100積分直接送

付費專欄免費學

大額優惠券免費領

立即參與放棄機會

點擊
抽獎

慕課手記新用戶專享福利

恭喜你，你的運氣太好了，居然抽中了 100個積分！

恭喜你，抽中了價值元的專欄！

太棒了，直接落到你賬戶里！

積分商城里的羅技鼠標、機械鍵盤、
Kindle 閱讀器、小米平衡車
Apple iPad （10.2英寸）、大額優惠券
在等著你去兌換了噢

作者：

免費贈送

兌換碼：1111222211 復制

優惠券可用于購買實戰課、體系課
無門檻使用

先去看看，有什么好東西馬上兌換我愛學習，選課去


亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

React課程：新手必學的React基礎教程

什么是React

React的特点

React的应用场景

安装Node.js

安装Create React App

创建第一个React应用

什么是JSX

JSX的基本语法

如何使用JSX编写React组件

定义组件

函数组件

使用组件

React组件的定义

类组件

函数组件

函数组件与类组件

函数组件

类组件

组件的props和state管理

props

state

组件的生命周期介绍

初始化阶段

更新阶段

清理阶段

初始化阶段的方法

更新阶段的方法

清理阶段的方法

小项目实战演练

项目需求

项目结构

主要组件

代码实现

App.js

TodoList.js

TodoItem.js

NewTodo.js

项目部署与上线

使用npm打包

部署到服务器

使用第三方云服务

閱讀免費教程