通过关注重要的 20% 概念来掌握 React.js

学习任何技术时，都有一条黄金法则：专注于最有影响力的 20% 概念，以掌握其 80% 的功能。React.js 也不例外！通过集中精力于关键思想，您将节省时间并为创建交互式动态 Web 应用程序奠定坚实的基础。

在这篇博文中，我将带您了解您需要了解的**20% 的 React.js 概念**。一旦掌握了这些概念，您就会有足够的信心构建您的第一个 React 应用程序并轻松应对更高级的主题。

这只是**概念概述**，您可以从中开始更好地掌握 React 库。一旦您熟悉了这些概念，您就可以探索更高级的主题，例如 Context API、Redux 和服务端渲染 (SSR)。

最好的部分是什么？你不需要昂贵的课程来学习 React——YouTube 上有很多 **免费资源** 可以帮助你成为专业人士！我在这篇文章的末尾列出了一些优秀的 YouTube 频道。

让我们开始吧！

什么是 React.js？

React.js 是一个开源 JavaScript 库，用于构建现代用户界面 (UI)。它通过将 UI 分解为可重复使用的组件来帮助开发人员创建交互式 Web 应用。无论您是构建小型个人项目还是大型企业级应用程序，React.js 都可以随您扩展。

现在，您应该重点关注以下 20% 的 React 概念，以了解 80% 的工作原理：

1.JSX（JavaScript XML）

JSX 让您可以在 JavaScript 中编写类似 HTML 的语法。它使代码更易于阅读和编写。

例子：

const greeting = Hello, World!
;

要点：

JSX 必须返回一个父元素。

使用 {} 在 JSX 中嵌入 JavaScript 表达式。

2. 组件：功能和类

React 应用由组件构建而成。组件就像是 UI 的构建块。

**功能组件：**

function Welcome(props) {
    return Hello, {props.name}!;
}

**类组件（现在带钩子的情况不太常见）：**

class Welcome extends React.Component {
    render() {
        return Hello, {this.props.name}!;
    }
}

3. Props（属性）

Props 让你可以将数据从父组件传递到子组件。

例子：

function Greeting(props) {
    return {props.message};
}
;

要点：

Props 是只读的，不能被子组件修改。

4. 州

状态就像组件的“记忆”，可以让它跟踪变化。

例子：

import React, { useState } from "react";

function Counter() {
    const [count, setCount] = useState(0);
    return (
        
            Count: {count}
            
        
    );
}

要点：

使用 useState 钩子来管理功能组件中的状态。

5. 生命周期方法

生命周期方法允许类组件在不同阶段执行任务：

**安装：**`componentDidMount()`

**更新：**`componentDidUpdate()`

**卸载：**`componentWillUnmount()`

功能组件使用“useEffect”钩子实现类似的行为。

例子：

useEffect(() => {
    console.log("Component mounted or updated");
    return () => console.log("Component unmounted");
}, []);

6. 钩子

Hooks 让您可以在功能组件中使用状态和其他 React 功能。

常见钩子：

**useState：**管理状态。

**useEffect：**处理获取数据等副作用。

**useContext：**访问全局数据。

例子：

const [data, setData] = useState([]);
useEffect(() => {
    fetch("https://api.example.com")
        .then((response) => response.json())
        .then((data) => setData(data));
}, []);

7. React 中的事件

React 使用 camelCase 语法来处理诸如 onClick 或 onChange 之类的事件处理程序。

例子：

function ClickButton() {
    const handleClick = () => alert("Button clicked!");
    return ;
}

8. 条件渲染

根据条件呈现不同的组件或内容。

例子：

function Greeting({ isLoggedIn }) {
    return isLoggedIn ? Welcome back!
 : Please log in.;
}

9. 列表和键

当渲染列表时，使用 key 属性来提高性能。

例子：

const items = ["Apple", "Banana", "Cherry"];
return (
    
        {items.map((item, index) => (
            {item}
        ))}
    
);

10. React 路由器

对于构建多页应用程序，React Router 是必不可少的。

例子：

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";

function App() {
    return (
        
            
                } />
                } />
            
        
    );
}

免费学习 React 的资源：

学习 React.js 不需要花一分钱！你可以从 YouTube 上的免费高质量教程开始学习。以下是一些学习 React.js 的最佳 YouTube 频道：

**Traversy 媒体**

Brad Traversy 为 React 和其他 Web 开发技术提供了适合初学者的教程。他的讲解很简单，而且他的项目很实用。

**代码进化**

Codevolution 提供了详细的视频，包括完整的 React.js 速成课程和有关钩子、状态管理等的视频。

**网络忍者**

该频道提供了一个结构化的 React 播放列表，涵盖了从基础知识到 Redux 等高级概念的所有内容。

**freeCodeCamp.org**

他们有一个 5 小时的适合初学者的 React 教程，如果你想深入了解该库，它是完美的选择。

**学术思想**

他们的 React 系列组织良好，包含可以清晰解释概念的实际示例。

**使用 Mosh 进行编程**

Mosh 的 React 教程专注于构建真实世界的应用程序，非常适合各个级别的开发人员。

最后的话

通过关注这 20% 的 React.js 概念，您将能够顺利构建响应式、交互式的 Web 应用。请记住，这只是开始！深入了解这些免费的 YouTube 资源，构建一些小项目，并继续尝试。

请在评论中告诉我你对这种方法的看法，或者如果我遗漏了任何内容，请分享你最喜欢的 React 学习资源。

CLIS.CC