为了账号安全，请及时绑定邮箱和手机立即绑定
首页 手记 React教程：从零开始的React入门指南

React教程：从零开始的React入门指南

标签：
React.JS

本文详细介绍了如何搭建React开发环境并编写第一个React应用，涵盖了React的基本概念、组件开发、生命周期方法以及事件处理等内容。通过本文，你将学会如何安装Node.js和npm，安装React，并创建简单的React应用。此外，还探讨了JSX语法的使用和React路由与状态管理的基础知识。

React简介与环境搭建

什么是React

React是Facebook开发的一个用于构建用户界面的JavaScript库。它是一个开源的框架，主要用于构建大型应用，尤其是在数据频繁更改的环境中。React的应用程序以组件的形式构建，每个组件都是一个独立的、可复用的代码块，通常负责渲染UI的一部分以及处理数据。React利用虚拟DOM来提高性能，从而减少了对DOM的直接操作。

安装Node.js和npm

要开始开发React应用，首先需要确保已经安装了Node.js和npm（Node Package Manager）。Node.js是一个开源的JavaScript运行时环境，可以构建服务器端和客户端应用程序。npm是Node.js的包管理和分发工具，它允许您安装和管理各种JavaScript库和框架。

在安装Node.js时，npm会自动包含在内。您可以从Node.js的官方网站下载并安装最新的稳定版本。对于未曾安装过Node.js和npm的读者，可以在命令行中执行以下命令来安装：

# 下载Node.js和npm
# 在Windows系统中
choco install nodejs -y
# 在Linux或Mac系统中
curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs

安装React

要开始使用React，可以通过npm安装React和相关的开发工具。以下是在命令行中安装React和创建项目的步骤：

  1. 打开终端或命令提示符。
  2. 创建一个新的文件夹作为项目目录，并进入该文件夹：
mkdir my-React-app
cd my-React-app
  1. 初始化一个新的npm项目，并安装React和相关依赖：
npx create-react-app my-app
cd my-app
npm start

create-react-app会生成一个基本的React项目结构，并安装所有必要的依赖项。运行npm start命令后，它会在浏览器中启动开发服务器。

创建第一个React应用

以下是一个简单的React应用，它将打印文本到页面上。首先，我们创建一个新的文件夹并初始化项目：

mkdir first-react-app
cd first-react-app
npx create-react-app first-app
cd first-app

在src文件夹中，编辑App.js文件以包含以下代码：

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

function App() {
  return (
    <div className="App">
      <h1>Hello, React!</h1>
    </div>
  );
}

export default App;

然后在public文件夹中，编辑index.html文件以包含以下代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>My First React App</title>
</head>
<body>
  <div id="root"></div>
</body>
</html>

运行npm start命令启动开发服务器。浏览器会自动打开并显示React应用。如果遇到权限问题或版本不兼容等错误，请确保您使用的命令行具有管理员权限，并且Node.js和npm的版本是最新版本。如果仍然遇到问题，可以参考官方安装指南进行排查。

JSX基础

JSX概念介绍

JSX是JavaScript XML的缩写，它是一种JavaScript的语法扩展，可以让你在JavaScript中编写类似于HTML的代码。JSX语法允许你在JavaScript中编写HTML结构，然后将其插入到React组件中。

JSX语法入门

JSX允许你使用类似于HTML的语法来描述React组件的结构。在JSX中，可以使用<div>、<p>等HTML标签，也可以使用自定义的React组件标签。在JSX中，属性以key="value"的形式书写，子元素通过嵌套来表示。

以下是一个简单的JSX示例：

function Welcome() {
  return <h1>Hello, world!</h1>;
}

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

在React中使用JSX

在React中，JSX元素需要被包裹在一个React.createElement()调用中，或者使用JSX语法。以下是一个使用JSX语法的例子：

import React from 'react';

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

function App() {
  return (
    <div>
      <WelcomeMessage name="John" />
      <WelcomeMessage name="Jane" />
    </div>
  );
}

export default App;

更多JSX标签与属性使用示例

你可以使用更多的JSX标签和属性，如下所示：

import React from 'react';

function App() {
  return (
    <div>
      <h1>Hello, JSX!</h1>
      <p id="description">This is a JSX example.</p>
    </div>
  );
}

export default App;
React组件开发

创建组件

React组件可以分为两类：函数组件和类组件。函数组件是一种简单的函数，接受props作为参数，并返回UI。类组件则继承自React.Component类，并实现render方法来返回UI。

以下是一个简单的函数组件示例：

import React from 'react';

function Button() {
  return <button>Click Me!</button>;
}

export default Button;

以下是一个简单的类组件示例：

import React from 'react';

class Button extends React.Component {
  render() {
    return <button>Click Me!</button>;
  }
}

export default Button;

类组件与函数组件

函数组件是一种函数，它接受props作为参数，并返回一个表示UI的元素。函数组件通常用于简单的组件，它们只需要渲染UI而不需要状态或生命周期方法。

类组件则是从React.Component继承的类，它们实现了render方法来返回UI，并且可以使用状态和生命周期方法。类组件通常用于需要管理状态和生命周期的复杂组件。

组件的属性和状态

属性（props）是组件从其父组件接收的参数。一个组件可以通过属性将数据传递给子组件。例如：

import React from 'react';

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

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

export default App;

状态（state）是组件内部的数据，它可以在组件的生命周期中发生变化。状态通常用于管理组件的内部状态。例如：

import React, { Component } from 'react';

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  incrementCount = () => {
    this.setState(prevState => ({
      count: prevState.count + 1,
    }));
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={this.incrementCount}>Increment</button>
      </div>
    );
  }
}

export default Counter;
React生命周期方法

组件生命周期简介

React组件的生命周期可以分为几个阶段：挂载（Mounting）、更新（Updating）、卸载（Unmounting）。

  • 挂载：组件被创建并添加到DOM中。
  • 更新：组件的props或state发生变化时，组件被重新渲染。
  • 卸载：组件从DOM中移除。

组件的挂载、更新和卸载

在组件生命周期中，有一些关键的方法可以在特定阶段进行调用。

  • 挂载阶段：

    • constructor(props)：初始化组件的状态。
    • componentDidMount()：在组件挂载后立即调用，可以用于初始化DOM操作。

  • 更新阶段：

    • componentWillReceiveProps(nextProps)：在状态或props发生变化时调用。
    • shouldComponentUpdate(nextProps, nextState)：确定组件是否应该更新。
    • componentWillUpdate(nextProps, nextState)：在组件更新之前调用。
    • componentDidUpdate(prevProps, prevState)：在组件更新后调用。
  • 卸载阶段：
    • componentWillUnmount()：在组件卸载前调用，用于清理资源。

常用生命周期方法示例

以下是一些常用的生命周期方法示例：

import React, { Component } from 'react';

class LifeCycle extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
  }

  componentDidMount() {
    console.log('Component mounted');
    // 可以在这里执行DOM操作
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component updated');
    // 可以在这里执行DOM操作
  }

  componentWillUnmount() {
    console.log('Component unmounting');
    // 可以在这里清理资源
  }

  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}>Increment</button>
      </div>
    );
  }
}

export default LifeCycle;
React事件与表单处理

事件处理基础

在React中，事件处理与传统的DOM事件有些不同。React中事件处理函数通过JSX绑定到元素上。以下是一个简单的事件处理示例：

import React from 'react';

class EventDemo extends React.Component {
  handleClick = (event) => {
    console.log('Button clicked');
    console.log(event.target.tagName); // 输出点击的元素类型
  }

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

export default EventDemo;

表单元素的事件处理

在React中，表单元素的行为也需要通过事件处理来管理。以下是一个简单的表单示例：

import React from 'react';

class FormDemo extends React.Component {
  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Form submitted');
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" name="username" />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default FormDemo;

受控组件与非受控组件

在React中，表单通常有两种实现方式：受控组件和非受控组件。

  • 受控组件：表单元素的值由React组件的状态控制。每个表单元素都有一个onChange事件处理函数来更新状态。

  • 非受控组件：表单元素的值由DOM来控制。可以使用ref来访问表单元素的值。

以下是一个受控组件的示例：

import React, { Component } from 'react';

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

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

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

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

export default ControlledInput;

以下是一个非受控组件的示例：

import React, { Component } from 'react';

class UncontrolledInput extends Component {
  constructor(props) {
    super(props);
    this.textInput = React.createRef();
  }

  handleSubmit = (event) => {
    event.preventDefault();
    console.log('Username:', this.textInput.current.value);
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input type="text" ref={this.textInput} />
        <button type="submit">Submit</button>
      </form>
    );
  }
}

export default UncontrolledInput;
React路由与状态管理

React Router简介

React Router是React生态系统中的一个流行包，用于实现客户端路由。它允许你定义不同的URL路径，并根据不同的路径加载不同的组件。以下是一个简单的React Router示例：

首先，需要安装React Router：

npm install react-router-dom

然后，在项目中使用React Router：

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';

import Home from './Home';
import About from './About';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </Router>
  );
}

export default App;

使用React Router进行路由配置

React Router支持多种路由配置方式，包括懒加载、嵌套路由等。以下是一个嵌套路由的示例：

import React from 'react';
import { BrowserRouter as Router, Route, Switch, Link, Redirect } from 'react-router-dom';

import Home from './Home';
import About from './About';
import Contact from './Contact';

function App() {
  return (
    <Router>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </Switch>
    </Router>
  );
}

export default App;

状态管理工具Redux简介

Redux是一个用于JavaScript应用的状态管理库。它通过一个单一的状态树来管理应用的所有状态，并提供了一种方法来更改应用的状态。

以下是使用Redux的基本步骤：

  1. 安装Redux：
npm install redux
  1. 创建Redux store：
import { createStore } from 'redux';

const initialState = { count: 0 };

function reducer(state = initialState, action) {
  switch (action.type) {
    case 'INCREMENT':
      return { count: state.count + 1 };
    case 'DECREMENT':
      return { count: state.count - 1 };
    default:
      return state;
  }
}

const store = createStore(reducer);
  1. 在React组件中使用Redux：
import React from 'react';
import { useDispatch, useSelector } from 'react-redux';

function Counter() {
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();

  const increment = () => {
    dispatch({ type: 'INCREMENT' });
  };

  const decrement = () => {
    dispatch({ type: 'DECREMENT' });
  };

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

通过以上步骤，您可以使用Redux管理应用的状态。Redux可以与React Router结合使用，以实现更复杂的状态管理场景。

点击查看更多内容
发表于 2024.12.05 14:27， 共 22 人浏览

本文原创发布于慕课网 ，转载请注明出处，谢谢合作

举报
为 TA 点赞

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

评论

作者其他优质文章

正在加载中

交互式爱情

手记
篇
粉丝
23
获赞与收藏
76

关注作者，订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习，写下你的评论
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消