首页手记 React教程：初学者必备指南

React教程：初学者必备指南

标签：

前端工具 React.JS React

概述

本文介绍了React的基本概念、安装方法和项目搭建流程，涵盖了组件化、状态管理及事件处理等核心内容。通过Create-React-App快速启动项目，并深入讲解了组件的生命周期和高阶组件的使用。初学者可以全面了解并掌握React开发的基本技能。

React教程：初学者必备指南

React简介

React是什么

React 是由 Facebook 开发并维护的一种用于构建用户界面的开源 JavaScript 库。它主要用于构建单页应用（SPA）中的用户界面，能够提高应用的性能和可维护性。React 的核心设计目标是使得开发大型单页应用时，能够保证开发效率和代码质量。

React的优点

React 的优点主要体现在以下几个方面：

虚拟DOM：React 通过虚拟 DOM 实现了高效的 DOM 操作，减少了对实际 DOM 的直接操作，从而提高了应用的性能。
单向数据流：React 采用单向数据流的设计，使得组件间的通信更加简单和清晰。
组件化：React 通过组件化的设计理念，使得代码的复用性和可维护性大大增强。
JSX：JSX 是一种扩展的 JavaScript 语法，使得 HTML 标签能在 JavaScript 中像书写 HTML 一样书写，使得 HTML 与 JavaScript 能更自然地结合。
生态系统：React 拥有庞大的社区支持，提供了丰富的第三方库和工具，如 Redux、MobX、React Router 等，使得开发更加便捷。

如何安装React

安装 React 通常需要使用 Node.js 和 npm（或 yarn）。

安装 Node.js

首先，确保你的电脑上安装了 Node.js。你可以在 Node.js 官方网站下载最新版本的 Node.js。安装完成后，可以通过以下命令验证 Node.js 是否安装成功：

node -v
npm -v

使用 Create-React-App 快速搭建项目

Create-React-App 是一个官方推荐的脚手架工具，用于快速启动一个 React 项目。首先，确保安装了 create-react-app：

npm install -g create-react-app

然后，通过以下命令创建一个新的 React 项目：

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

这将会创建一个名为 my-app 的新目录，并在其中生成一个基本的 React 项目。运行 npm start 命令后，项目会自动启动开发服务器，并在浏览器中打开。

React基本概念

组件的理解与使用

在 React 中，组件是构建用户界面的基本单位。它将 UI 划分为独立的、可复用的小部件。每个组件都有自己的内部状态和生命周期方法，可以被视为一个独立的黑盒子。

创建一个 React 组件

创建一个 React 组件，可以通过 JavaScript 类或函数来实现。下面是一个简单的类组件和函数组件的例子：

类组件

// 创建一个类组件
import React, { Component } from 'react';

class Greeting extends Component {
  render() {
    return <h1>Hello, world</h1>;
  }
}

export default Greeting;

函数组件

// 创建一个函数组件
import React from 'react';

const Greeting = () => {
  return <h1>Hello, world</h1>;
};

export default Greeting;

状态（State）与属性（Props）

在 React 中，组件的状态（State）和属性（Props）是两个核心概念，用于管理组件的内部状态和组件间的数据传递。

组件状态

组件状态（State）是组件的内部变量，仅可由组件自身修改。状态的变化会触发组件的重新渲染。

// 定义组件状态
import React, { Component } from 'react';

class Timer extends Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(prevState => ({
      seconds: prevState.seconds + 1
    }));
  }

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

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

  render() {
    return <h1>Seconds: {this.state.seconds}</h1>;
  }
}

export default Timer;

属性传递

属性（Props）是父组件传递给子组件的数据。属性可以是任何类型的数据，包括字符串、数字、对象、数组等。

// 父组件传递属性给子组件
import React from 'react';
import ChildComponent from './ChildComponent';

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

export default ParentComponent;

// 子组件接收并使用属性
import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <h1>Name: {props.name}</h1>
      <p>Age: {props.age}</p>
    </div>
  );
};

export default ChildComponent;

生命周期方法

React 组件的生命周期分为三个阶段：挂载（Mounting）、更新（Updating）和卸载（Unmounting）。每个阶段都有对应的方法，用于处理组件的不同阶段的操作。

生命周期方法示例

// 生命周期方法示例
import React, { Component } from 'react';

class LifecycleExample extends Component {
  constructor(props) {
    super(props);
    this.state = {
      message: 'Hello, world'
    };
  }

  componentDidMount() {
    console.log('Component did mount');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component did update');
  }

  componentWillUnmount() {
    console.log('Component will unmount');
  }

  render() {
    return <div>{this.state.message}</div>;
  }
}

export default LifecycleExample;

创建第一个React应用

安装与配置

安装 Node.js 和 npm（或 yarn）。
安装 create-react-app，并使用它创建一个新的 React 项目。

安装 create-react-app

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

编写第一个React组件

在 my-app 目录下，打开 src/App.js 文件，编写一个简单的 Hello World 组件。

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>Hello, world!</p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

运行和测试应用

运行 npm start 命令启动开发服务器。开发服务器会自动开启一个新窗口并打开浏览器，展示你的应用。

npm start

React组件进阶

类组件与函数组件

在 React 中，组件可以分为类组件和函数组件两种。

类组件

类组件（Class Component）基于 ES6 类继承 React.Component。它具有状态（State）和生命周期方法。

import React, { Component } from 'react';

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

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

export default Greeting;

函数组件

函数组件（Functional Component）是一个简单的函数，接收 props 作为参数，并返回 UI。函数组件不具有状态（State）。

import React from 'react';

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

export default Greeting;

高阶组件

高阶组件（Higher-Order Component，HOC）是一种将现有组件封装成新组件的技术。它主要用于代码复用和逻辑复用。

使用高阶组件

import React from 'react';

// 创建高阶组件
const withLogging = (WrappedComponent) => {
  return class extends React.Component {
    componentDidMount() {
      console.log('Component did mount');
    }

    render() {
      return <WrappedComponent {...this.props} />;
    }
  };
};

// 使用高阶组件
const Greeting = (props) => {
  return <h1>Hello, {props.name}</h1>;
};

const EnhancedGreeting = withLogging(Greeting);

export default EnhancedGreeting;

组件间的通信

在 React 中，父组件和子组件之间的通信可以通过属性（Props）和回调函数实现，而子组件和父组件之间的通信则可以通过回调函数或上下文（Context）实现。

父组件向子组件传递数据

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

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

export default ParentComponent;

import React from 'react';

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

export default ChildComponent;

子组件向父组件传递数据

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

const ParentComponent = (props) => {
  const handleChildClick = (childData) => {
    console.log(childData);
  };

  return (
    <ChildComponent onClick={handleChildClick} />
  );
};

export default ParentComponent;

import React from 'react';

const ChildComponent = (props) => {
  const handleClick = () => {
    props.onClick('Child Data');
  };

  return (
    <button onClick={handleClick}>
      Click Me
    </button>
  );
};

export default ChildComponent;

React事件处理与表单

事件绑定

在 React 中，事件绑定与普通的 DOM 事件绑定略有不同。通常使用 on 前缀来绑定事件，例如 onClick、onSubmit 等。

事件绑定示例

import React, { Component } from 'react';

class ButtonComponent extends Component {
  handleClick = (event) => {
    console.log('Button clicked');
  };

  render() {
    return (
      <button onClick={this.handleClick}>
        Click Me
      </button>
    );
  }
}

export default ButtonComponent;

表单处理

在 React 中处理表单时，通常需要监听表单元素的输入事件（如 onChange），并将输入值存储在组件的状态中。

表单处理示例

import React, { Component } from 'react';

class FormComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      value: ''
    };

    this.handleChange = this.handleChange.bind(this);
  }

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

  render() {
    return (
      <form>
        <label>
          Name:
          <input
            type="text"
            value={this.state.value}
            onChange={this.handleChange}
          />
        </label>
      </form>
    );
  }
}

export default FormComponent;

用户交互实例

一个典型的用户交互实例是创建一个简单的登录表单，包含用户名和密码输入框，以及一个提交按钮。

用户交互示例

import React, { Component } from 'react';

class LoginForm extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: '',
      password: ''
    };

    this.handleUsernameChange = this.handleUsernameChange.bind(this);
    this.handlePasswordChange = this.handlePasswordChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleUsernameChange(event) {
    this.setState({ username: event.target.value });
  }

  handlePasswordChange(event) {
    this.setState({ password: event.target.value });
  }

  handleSubmit(event) {
    event.preventDefault();
    console.log('Username:', this.state.username);
    console.log('Password:', this.state.password);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <div>
          <label>
            Username:
            <input
              type="text"
              value={this.state.username}
              onChange={this.handleUsernameChange}
            />
          </label>
        </div>
        <div>
          <label>
            Password:
            <input
              type="password"
              value={this.state.password}
              onChange={this.handlePasswordChange}
            />
          </label>
        </div>
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default LoginForm;

React项目部署

构建应用

在部署 React 应用之前，需要先构建应用。构建应用将会生成一个可以部署到生产环境的静态文件。

构建应用

npm run build

部署到GitHub Pages或其他平台

部署到 GitHub Pages 或其他平台通常涉及将构建后的文件上传到服务器或部署平台。

部署到GitHub Pages

准备 GitHub 仓库。
使用 gh-pages 插件自动化部署。
在项目中安装 gh-pages 并配置 package.json。
运行 npm run deploy 命令进行部署。

npm install --save gh-pages

{
  "name": "my-app",
  "version": "0.1.0",
  "private": true,
  "homepage": "https://<username>.github.io/<repository>",
  "dependencies": {
    "react": "^16.8.6",
    "react-dom": "^16.8.6",
    "react-scripts": "2.1.8"
  },
  "scripts": {
    "deploy": "gh-pages -d build"
  }
}

npm run build
npm run deploy

部署到其他平台

使用 Netlify 或 Vercel 等平台部署。
将构建后的文件上传到平台。
配置域名和环境变量。
启动应用。

npm run build

上传构建文件到 Netlify 或 Vercel，按照平台提供的指南进行部署。

通过以上步骤，你已经掌握了创建和部署一个简单的 React 应用所需的所有基础知识。希望这对你学习 React 和开发前端应用有所帮助。

点击查看更多内容

为 TA 点赞

若觉得本文不错，就分享一下吧！

评论

评论

共同学习，写下你的评论

评论加载中...

展开查看更多评论

作者其他优质文章

正在加载中

炎炎设计

手记
篇

粉丝

74

获赞与收藏

371

关注作者，订阅最新文章

阅读免费教程

后端通用面试教程

41个小节 30583 343

网络编程入门教程

20个小节 12561 237

Pandas 入门教程

25个小节 18499 337

推荐

评论

收藏

共同学习，写下你的评论



感谢您的支持，我会继续努力的～

扫码打赏，你说多少就多少

赞赏金额会直接到老师账户

支付方式

打开微信扫一扫，即可进行扫码打赏哦

今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与放弃机会

点击
抽奖

慕课手记新用户专享福利

恭喜你，你的运气太好了，居然抽中了 100个积分！

恭喜你，抽中了价值元的专栏！

太棒了，直接落到你账户里！

积分商城里的罗技鼠标、机械键盘、
Kindle 阅读器、小米平衡车
Apple iPad （10.2英寸）、大额优惠券
在等着你去兑换了噢

作者：

免费赠送

兑换码：1111222211 复制

优惠券可用于购买实战课、体系课
无门槛使用

先去看看，有什么好东西马上兑换我爱学习，选课去


热搜

最近搜索清空

React教程：初学者必备指南

React是什么

React的优点

如何安装React

安装 Node.js

使用 Create-React-App 快速搭建项目

组件的理解与使用

创建一个 React 组件

类组件

函数组件

状态（State）与属性（Props）

组件状态

属性传递

生命周期方法

生命周期方法示例

安装与配置

安装 create-react-app

编写第一个React组件

运行和测试应用

类组件与函数组件

类组件

函数组件

高阶组件

使用高阶组件

组件间的通信

父组件向子组件传递数据

子组件向父组件传递数据

事件绑定

事件绑定示例

表单处理

表单处理示例

用户交互实例

用户交互示例

构建应用

构建应用

部署到GitHub Pages或其他平台

部署到GitHub Pages

部署到其他平台

阅读免费教程