React 初学者指南：基础知识入门-js教程-PHP中文网

A Beginner’s Guide to React: Getting Started with the Basics

React 已成为现代 Web 开发的基石，以其高效、灵活性和强大的生态系统而闻名。 React 由 Facebook 开发，允许开发人员创建可重用的 UI 组件，从而简化了构建交互式用户界面的过程。

无论您是想构建复杂的单页应用程序还是只是想提高您的 Web 开发技能，掌握 React 都是一笔宝贵的财富。

在本指南中，我们将引导您完成 React 入门的基本概念和步骤，包括设置开发环境、了解 React 基础知识以及创建您的第一个组件。

什么是反应？

React 是一个用于构建用户界面的 JavaScript 库，特别是对于需要动态和交互式用户体验的单页应用程序。从本质上讲，React 允许开发人员构建封装的组件来管理自己的状态并组合它们以创建复杂的 UI。 React 的声明性性质使您可以更轻松地推理应用程序，而其基于组件的架构则提高了可重用性和可维护性。

React 的简史和演变

React 于 2013 年由 Facebook 首次发布，并因其构建 UI 的创新方法而迅速受到关注。与直接操作 DOM 的传统库和框架不同，React 引入了虚拟 DOM 的概念。这种抽象允许 React 通过仅更新已更改的 UI 部分来优化渲染，从而实现更高效的性能。

自诞生以来，React 已经发生了显着的发展，引入了钩子、上下文 API 和并发渲染等功能。该库拥有一个充满活力的生态系统，围绕它构建了大量工具、库和框架，进一步增强了其功能。

React 的主要特点

基于组件的架构：React 基于组件的方法允许开发人员将复杂的 UI 分解为更小的、可重用的部分，每个部分都有自己的逻辑和渲染。
虚拟 DOM：虚拟 DOM 是真实 DOM 的内存表示。 React 使用这个虚拟 DOM 通过与之前的状态进行比较并仅应用必要的更改来有效地更新 UI。
声明性语法：React 的声明性语法通过描述任何给定状态下的 UI 应该是什么样子，而不是指定如何更改 UI，使设计 UI 变得更加容易。
单向数据流：React 强制执行单向数据流，这意味着数据从父组件流向子组件，从而更容易跟踪和管理状态更改。

设置开发环境

在深入研究 React 之前，您应该对 HTML、CSS 和 JavaScript 有基本的了解。熟悉这些技术将帮助您更有效地掌握 React 概念，因为 React 建立在这些基本的 Web 技术之上。

安装 Node.js 和 npm

React 开发需要 Node.js 和 npm（Node Package Manager），它们用于管理项目依赖关系和运行开发工具。

如何安装 Node.js 和 npm：

下载并安装 Node.js：前往 Node.js 官方网站并下载适合您操作系统的最新 LTS（长期支持）版本。此安装包包含npm。
验证安装：安装后，打开终端（或命令提示符）并运行以下命令来验证 Node.js 和 npm 是否已正确安装：

   node -v
   npm -v

登录后复制

您应该看到 Node.js 和 npm 的版本号，确认安装成功。

创建反应应用程序

开始使用 React 的最简单方法是使用 create-react-app 工具，该工具使用合理的默认配置设置一个新的 React 项目。

初始化新 React 项目的分步指南：

全局安装 create-react-app：打开终端并运行：

   npx create-react-app my-app

登录后复制

将 my-app 替换为您想要的项目名称。此命令使用给定名称创建一个新目录，并在其中设置一个 React 项目。

Navigate to Your Project Directory:

   cd my-app

登录后复制

Start the Development Server:

   npm start

登录后复制

This command runs the development server and opens your new React application in your default web browser. You should see a default React welcome page, indicating that everything is set up correctly.

Understanding React Basics

Components are the building blocks of a React application. They encapsulate UI elements and logic, making it easier to manage and reuse code. Components can be classified into two types:

Functional Components: These are JavaScript functions that return React elements. They are often used for simple, stateless components.

Example:

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

登录后复制

Class Components: These are ES6 classes that extend React.Component and include a render method. They are used for more complex components with local state and lifecycle methods.

Example:

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

登录后复制

JSX (JavaScript XML)

JSX is a syntax extension for JavaScript that allows you to write HTML-like code within JavaScript. It makes it easier to create React elements and components.

How JSX is Transformed into JavaScript:

JSX is not valid JavaScript by itself. During the build process, a tool like Babel transforms JSX into regular JavaScript. For example:

JSX:

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

登录后复制

Transformed JavaScript:

const element = React.createElement('h1', null, 'Hello, world!');

登录后复制

Props (Properties)

Props are used to pass data from a parent component to a child component. They are read-only and help make components reusable.

Example of Passing Props to a Component:

function Greeting(props) {
  return <p>Welcome, {props.username}!</p>;
}

function App() {
  return <Greeting username="Alice" />;
}

登录后复制

In this example, the Greeting component receives a username prop from the App component and displays it.

State

State allows components to manage their own data and react to user interactions. In functional components, the useState hook is used to manage state.

Introduction to the useState Hook:

The useState hook is a function that returns an array with two elements: the current state value and a function to update it.

Example of State Management Using useState:

import React, { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  );
}

登录后复制

In this example, the Counter component maintains a count state. Clicking the button updates the state, and the UI reflects the new count value.

Building Your First React Component

Let’s create a simple functional component to display a greeting message.

Step-by-Step Example:

Create a New File: In the src directory of your project, create a file named Greeting.js.
Define the Component:

   import React from 'react';

   function Greeting() {
     return <h1>Hello, React!</h1>;
   }

   export default Greeting;

登录后复制

Render the Component: Open src/App.js and render the Greeting component.

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

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

   export default App;

登录后复制

Adding Basic Styles

You can style your components using inline styles or external CSS files. Here’s how to add basic styles:

Inline Styles:

   function StyledGreeting() {
     const style = {
       color: 'blue',
       textAlign: 'center'
     };

     return <h1 style={style}>Hello, styled React!</h1>;
   }

登录后复制

External CSS: Create a CSS file (Greeting.css) in the src directory.

   .greeting {
     color: green;
     text-align: center;
   }

登录后复制

Import the CSS file in Greeting.js and apply the class:

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

   function Greeting() {
     return <h1 className="greeting">Hello, styled React!</h1>;
   }

   export default Greeting;

登录后复制

Conclusion

React is a powerful library that enables developers to build dynamic and interactive user interfaces efficiently. In this guide, we covered the basics of React, including its core concepts, setting up the development environment, understanding components, JSX, props, and state, and building your first component. We also explored styling options to enhance your components.

以上是React 初学者指南：基础知识入门的详细内容。更多信息请关注PHP中文网其他相关文章！