React JavaScript 示例

2025年4月10日 | 阅读 12 分钟

React 是 Facebook（现称 Meta）为其自身平台创建的库，但由于其在创建 Web 应用程序用户界面方面的受欢迎程度和优势，它被开源。React 最常用于创建单页 Web 应用程序，这意味着只加载一次。它被认为是用于创建 Web 应用程序界面的 JavaScript 最强大的库。React 的优点在于其基于组件的架构以及能够虚拟转换文档对象模型。因此，React 是当前现代 Web 开发中最需要的 JavaScript 库。

如何开始？

要开始使用 React，我们需要设置开发环境。我们可以直接设置文件和文件夹并安装必要的模块。但最简单直接的方法是使用 Create React App。此命令将作为一个工具，用于设置具有标准配置和结构的新 React 项目。下面的命令将用于设置项目，最后一个命令将在本地启动开发服务器以运行项目。

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

React 基本示例

让我们看一些基本的 React 语法示例，我们将学习重要且必要的初学者主题，这些主题是编写 React 代码和理解 React 在 JavaScript 背后工作方式的重要组成部分。

1. 组件结构

在 React 中，UI 是利用组件构建的，组件是 React 应用程序的结构块。组件可以编写为 JavaScript 函数或类。函数组件是一个基本函数，它将 props（属性）作为参数并返回一个 React 元素，该元素描述了应该在屏幕上渲染什么。

示例

import React from 'react';

// Functional component that receives props and returns a greeting message
function Welcome( props ) {
  return <h1> Hello, { props.name } </h1>;
}

export default Welcome;

2. 类组件

类组件是 React 中定义组件的另一种方法。它们比函数组件更具功能性，并且包含生命周期方法和状态。类组件通过使用 ES6 类语法、继承自 React.Component 来定义，并且必须包含一个返回 React 元素的渲染方法。

示例

import React, { Component } from 'react';

// Class component that renders a greeting message
class Welcome extends Component {
  render() {
    return <h1> Hello, { this.props.name } </h1>;
  }
}

export default Welcome;

3. 状态管理

状态是 React 组件中一个独特的属性，它保存着可能随时间变化的数据。类组件使用 this.state 管理状态，并且可以使用 this.setState 更新状态。管理状态允许组件通过使用更新后的信息重新渲染来响应用户输入和各种事件。

示例

import React, { Component } from 'react';

class Counter extends Component {
  constructor( props ) {
    super( props );
    // Initializing the state with a count of 0
    this.state = { count : 0 };
  }

  // Method to increment the count
  increment = ( ) => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p> Count : { this.state.count }</p>
        {/* Button for triggering the increment method */}
        <button onClick = { this.increment } > Increment </button>
      </div>
    );
  }
}

export default Counter;

4. 带有 Hooks 的函数组件

Hooks 是 React 16.8 中引入的一项功能，它允许函数组件使用状态和其他 React 特性。useState Hook 用于向函数组件添加状态。Hooks 使函数组件功能更强大，并允许它们管理状态和执行副作用。

示例

import React, { useState } from 'react';

function Counter() {
  // useState hook to manage the count state
  const [ count, setCount ] = useState( 0 );

  return (
    <div>
      <p> Count : { count } </p>
      {/* Button to increment the count state */}
      <button onClick = { () => setCount( count + 1 )} > Increment </button>
    </div>
  );
}

export default Counter;

5. Effect Hook

useEffect Hook 用于处理功能组件中的副作用，例如获取数据、更新 DOM 以及设置订阅或计时器。它用于模拟基于类的组件的生命周期方法。引入 useEffect Hook 的动机是为了消除使用基于类的组件的副作用。例如，像更新 DOM、从编程接口端点获取数据、设置订阅或计时器等任务都可能导致不适当的副作用。由于渲染方法会迅速产生副作用，因此需要使用生命周期方法来观察副作用。

示例

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [ data, setData ] = useState( null );

  // useEffect hook to fetch data when the component mounts
  useEffect( ( ) => {
    fetch( ' https://api.example.com/data ')
      .then( response => response.json( ) )
      .then( data => setData( data ));
  }, [ ]); // Empty dependency array means this effect runs once after the initial render

  // Display loading message until data is fetched
  if ( !data ) {
    return <div> Loading . . . </div>;
  }

  // Display fetched data
  return <div> { JSON.stringify( data )} </div>;
}

export default DataFetcher;

6. 条件渲染

React 允许我们有条件地渲染组件，这意味着开发人员可以根据一些预定义的条件选择在屏幕上渲染哪个组件。这被称为条件渲染。React 中的条件渲染与 JavaScript 中的条件工作方式相同。使用 JavaScript 运算符，如 if 或条件运算符来创建表示当前状态的元素，并让 React 更新 UI 以匹配它们。

示例

import React, { useState } from 'react';

function Greeting() {
  const [ isLoggedIn, setIsLoggedIn ] = useState( false );

  return (
    <div>
      {/* Conditional rendering based on isLoggedIn state */}
      { isLoggedIn ? <h1> Welcome back! </h1> : <h1> Please sign in. </h1>}
      {/* Button to toggle the isLoggedIn state */}
      <button onClick = { ( ) => setIsLoggedIn( !isLoggedIn ) }>
        { isLoggedIn ? ' Logout ' : ' Login ' }
      </button>
    </div>
  );
}

export default Greeting;

7. 列表和 Key

React 中的列表和 key 是最基本的概念之一。列表用于以有序格式显示数据，通常用于在网站上显示菜单。在 React 中，列表的创建方式与我们在 JavaScript 中创建列表的方式相同。key 是一个独特的标识符。在 React 中，它用于识别列表中有哪些项已更改、更新或删除。当动态创建组件或用户修改列表时，它很有用。它还有助于弄清楚集合中的哪些组件需要重新渲染，而不是每次都重新渲染整个组件集合。

示例

import React from 'react';

function ItemList( props ) {
  const items = props.items;
  return (
    <ul>
      {/* Map over items and render a list item for each, providing a unique key */}
      { items.map( item => (
        < li key = { item.id } > { item.name } </li>
      ))}
    </ul>
  );
}

export default ItemList;

8. 表单和受控组件

React 受控组件通过组件状态管理表单数据，通过 props 获取值并通过 onChange 等回调进行更新。父组件维护状态，将更新后的值作为 props 传递给受控组件。表单元素，无论是输入还是选择，都会触发状态，通过 onchange 上的函数进行刷新。

示例

import React, { useState } from 'react';

function NameForm() {
  const [ name, setName ] = useState(' ');

  // Handler to update the name state on input change
  const handleChange = ( event ) => {
    setName( event.target.value );
  };

  // Handler to alert the submitted name and prevent default form submission
  const handleSubmit = ( event ) => {
    alert( ' A name was submitted : ' + name );
    event.preventDefault();
  };

  return (
    <form onSubmit = { handleSubmit } >
      <label>
        Name:
        {/* Input element controlled by the name state */}
        <input type = " text " value = { name } onChange = { handleChange } />
      </label>
      <button type = " submit " > Submit </button>
    </form>
  );
}
export default NameForm;

9. 组合组件

React 中的组件结构包括在一个组件中包含一个或多个组件，其中每个子组件还可以包含额外的组件。React 中的组件是用于创建 UI 的构建块。

示例

import React from 'react';

function Avatar( props ) {
  // Avatar component renders user's avatar image
  return (
    <img src = { props.user.avatarUrl } alt = { props.user.name } />
  );
}

function UserInfo( props ) {
  // UserInfo component renders user information and uses the Avatar component
  return (
    <div className = " UserInfo ">
      <Avatar user = { props.user } />
      <div className = " UserInfo ? name ">
        { props.user.name }
      </div>
    </div>
  );
}

function Comment( props ) {
  // Comment component composes UserInfo and other elements
  return (
    <div className = " Comment " >
      <UserInfo user = { props.author } />
      <div className = " Comment ? text ">
        { props.text }
      </div>
      <div className = " Comment ? date ">
        { props.date }
      </div>
    </div>
  );
}
export default Comment;

React 项目示例

我们已经看了一些基本的语法示例以及如何为状态管理、组件、表单、列表、键和 Hooks 等重要主题编写 React 代码。现在让我们深入研究那些被认为是项目和在面试和模拟 React 练习中最常问的重要 React 任务的示例。这些练习将帮助我们更清楚地理解 React。

1. React 计数器应用

React 计数器应用程序是一个允许用户与数值计数器值交互的程序。它展示了 UI 中管理和用户交互的基本状态。要使用 React 创建一个简单的计数器应用程序，只需创建一个名为 count 的 useState 变量和 setCount() 来更新状态。创建名为 addition 和 decrement 的按钮，它们分别将 count 状态修改为 +1 和 -1。使用事件控制器将按钮与 setCount 连接起来。

计数器组件 - Counter.js

// src/Counter.js
import React, { useState } from 'react';

function Counter() {
  const [ count, setCount ] = useState(0);

  const increment = () => {
    setCount( count + 1 );
  };

  const decrement = () => {
    setCount( count-1 );
  };

  return (
    <div style={{ textAlign: ' center ', marginTop : ' 50px ' }}>
      <h1> React Counter App </h1>
      <h2> { count } </h2>
      <button onClick = { increment } style = {{ marginRight : ' 10px ', padding : ' 10px ', fontSize : ' 16px ' }}>Increment</button>
      <button onClick = { decrement } style = {{ padding : ' 10px ', fontSize : ' 16px ' }}> Decrement </button>
    </div>
  );
}

export default Counter;

主组件 - App.js

// src/App.js
import React from 'react';
import './App.css';
import Counter from './Counter';

function App() {
  return (
    <div className = " App " >
      <Counter />
    </div>
  );
}

export default App;

此组件 (Counter) 是一个使用 React 构建的简单计数器应用程序。

它从 React 导入 useState Hook 来管理状态。

状态变量 count 和 setCount 函数是使用 useState Hook 创建的，初始值为 0。

定义了两个函数，augmentation 和 decrement，用于在单击相关按钮时更新 count 状态。

return 语句包含渲染计数器应用程序 UI 的 JSX。

它包含显示“React 计数器应用程序”的 h1 标题。

使用 h2 组件显示 count 的当前值。

提供了两个名为“Increment”和“Decrement”的按钮，分别用于增加和减少计数器。

onClick 事件处理程序分配给 augmentation 和 decrement 函数，以便在单击按钮时更新计数器。

应用了内联样式以调整内容焦点并为组件顶部添加边缘。

添加样式 - App.css

/* src/App.css */

.App {
  font-family: sans-serif;
  text-align: center;
}

button {
  margin: 5px;
  padding: 10px 20px;
  font-size: 16px;
  cursor: pointer;
}

项目结构

react-counter/
├── node_modules/
├── public/
│   ├── index.html
│   └── ...
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── Counter.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── serviceWorker.js
├── .gitignore
├── package.json
├── README.md
└── yarn.lock

输出

2. 提交表单

在 React 中创建 From 包括使用 JSX 元素。我们将使用一个功能组件来渲染这些元素。项目中创建了各种 HTML 元素。为了完成任务，我们将使用 CSS 进行样式设计。处理表单就是如何处理数据在值更改或提交时的处理方式。在 HTML 中，表单数据通常由 DOM 处理。在 React 中，表单数据通常由组件处理。

表单组件 - SimpleForm.js

// src/ components/ SimpleForm.js
import React, { useState } from 'react';
import './SimpleForm.css';

function SimpleForm() {
  const [ name, setName ] = useState(' ');
  const [ email, setEmail ] = useState(' ');
  const [ submittedData, setSubmittedData ] = useState( null );

  const handleSubmit = ( event ) => {
    event.preventDefault( );
    // Store the submitted form data in an object
    const formData = {
      name: name,
      email: email
    };
    // Set the submitted data in the below state
    setSubmittedData( formData );
  };

  return (
    <div className = " form-container ">
      <h2> Simple Form </h2>
      <form onSubmit = { handleSubmit } >
        <div className = " form-group " >
          <label htmlFor = " name " > Name: </label>
          <input 
            type = " text " 
            id = " name " 
            value = { name } 
            onChange = { ( event ) => setName( event.target.value )} 
            required 
          />
        </div>
        <div className = " form-group " >
          <label htmlFor = " email " > Email: </label>
          <input 
            type = " email " 
            id = " email " 
            value = { email } 
            onChange = {( event ) => setEmail( event.target.value )} 
            required 
          />
        </div>
        <button type = " submit " > Submit </button>
      </form>
      { submittedData && (
        <div className = " submitted-data " >
          <h2> Submitted Data </h2>
          <p> Name: { submittedData.name } </p>
          <p> Email: { submittedData.email } </p>
        </div>
      )}
    </div>
  );
}

export default SimpleForm;

SimpleForm 是一个用于创建简单表单的 React 组件。此文件将负责导入 react 和 hook useState，以及用于样式化表单的 CSS。此组件主要使用 hook 来管理输入字段的状态（姓名和电子邮件）以及提交的数据。当表单提交时，将调用 handleSubmit 函数。它还会默认阻止表单提交。

主组件 - App.js

// App.js

import React from 'react';
import SimpleForm from './components/SimpleForm';

function App() {
  return (
    <div className = " App ">
      <SimpleForm />
    </div>
  );
}

export default App;

此 App.js 文件是负责输出的 React 主组件。它是表单应用程序的入口点。此组件将返回一个包含 SimpleForm 的 div。

应用样式 - SimpleForm.css

/* SimpleForm.css */

.form-container {
  width: 400px;
  margin: 0 auto;
}

.form-group {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"],
input[type="email"] {
  width: 100%;
  padding: 10px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

.submitted-data {
  margin-top: 20px;
}

CSS 为应用程序增添了视觉吸引力。此表单 CSS 文件专门为按钮、输入字段和文本区域设置样式。主要样式化的组件是标签、输入字段、提交的数据部分、表单组和按钮。

React 入口点 - index.js

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

index.js 文件组件导入 React 和 React Dom 以进行组件渲染。组件 App 将在 HTML 文档的元素根中渲染。

样式 - index.css

/* index.css */

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.App {
  text-align: center;
  margin-top: 50px;
}

项目结构

simple-form-app/
│
├── public/
│   ├── index.html
│   └── ...
│
└── src/
    ├── components/
    │   ├── SimpleForm.js
    │   └── SimpleForm.css
    ├── App.js
    ├── index.js
    └── index.css

输出

结论

我们已经介绍了多个 React 示例及其语法，解释了如何使用 React JavaScript 编写代码。这些示例涵盖了从 States、Props 和 Hooks 到状态管理、控制组件和表单组件等更难的概念。在本文中，我们看到了两个主要的 React 项目示例，即计数器和表单提交。这两个示例将有助于更简单地理解 React。

下一主题JS string includes() 方法

React JavaScript 示例

如何开始？

React 基本示例

1. 组件结构

2. 类组件

3. 状态管理

4. 带有 Hooks 的函数组件

5. Effect Hook

6. 条件渲染

7. 列表和 Key

8. 表单和受控组件

9. 组合组件

React 项目示例

1. React 计数器应用

2. 提交表单

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

React JavaScript 示例

如何开始？

React 基本示例

1. 组件结构

2. 类组件

3. 状态管理

4. 带有 Hooks 的函数组件

5. Effect Hook

6. 条件渲染

7. 列表和 Key

8. 表单和受控组件

9. 组合组件

React 项目示例

1. React 计数器应用

2. 提交表单

结论

相关帖子

JavaScript 对象通过键获取值

Filter JavaScript