React 是一个流行的 JavaScript 库，用于构建用户界面。它提供了一种简洁而强大的方式来创建交互式 UI，同时也支持组件化开发，使得代码更易于维护和扩展。

本文和大家一起从头开始学习 React，从 JSX 到组件化开发，逐步深入了解 React 的核心概念和常用技巧。

创建React

1. 安装 Node.js: 如果你还没有安装 Node.js，你需要先从官方网站 nodejs.org/ 下载并安装。Node.js 是运行 JavaScript 代码的环境，也是 React 应用程序的必备组件。

2. 创建新的 React 应用程序: 一旦安装了 Node.js，你就可以使用 create-react-app 命令来创建一个新的 React 应用程序。打开终端（命令行界面）并执行以下命令：

   npx create-react-app my-app
   

   这将在名为 my-app 的新目录中创建一个新的 React 应用程序。你可以将 my-app 替换为你想要的任何应用程序名称。

3. 进入应用程序目录: 进入你的新创建的应用程序目录：

   cd my-app
   

4. 启动开发服务器: 在应用程序目录中运行以下命令，启动开发服务器：

   npm start
   

   这将启动一个开发服务器，并在默认的浏览器中打开你的新应用程序。你将能够在开发过程中实时查看应用程序的变化。

JSX

JSX 是 React 的一种语法扩展，它允许我们在 JavaScript 中编写类似 HTML 的代码。

在 JSX 中，你可以使用大括号 {} 来嵌入 JavaScript 表达式，实现动态渲染和逻辑控制。

JSX 使用

1. 引号传递字符串：可以直接在 JSX 中传递字符串，用双引号或单引号括起来。

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

1. 使用 JavaScript 变量：可以在 JSX 中使用 JavaScript 变量。

以下是一个示例，演示如何在组件中使用 JavaScript 变量：

import React from 'react';

function App() {
    const greeting = 'hello React'; // 定义一个 JavaScript 变量 greeting

    return (
        <div className="app">
            <h2>{greeting}</h2> {/* 在 JSX 表达式中使用 greeting 变量 */}
        </div>
    );
}

export default App;

在这个示例中，我定义了一个名为 greeting 的 JavaScript 变量，它包含了一个字符串 "hello React"。然后，我在 JSX 表达式中使用了这个变量，通过大括号 {} 将其包裹起来，以输出变量的值。这样，在渲染组件时，<h2> 标签中就会显示 "hello React"。

1. 函数调用和方法调用：可以在 JSX 中调用函数和对象的方法。

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: '张',
  lastName: '伟',
};

const element = <h1>Hello, {formatName(user)}!</h1>;

1. 使用 JavaScript 对象：可以在 JSX 中使用 JavaScript 对象，但需要用 {} 包裹起来。

const user = {
  firstName: 'John',
  lastName: 'Doe',
};

const element = (
  <div>
    <h1>Hello, {user.firstName}!</h1>
    <h2>Your last name is {user.lastName}.</h2>
  </div>
);

列表渲染

在 React 中，可以使用 map 方法来渲染列表。在渲染列表时，需要确保给每个子元素设置一个唯一的 key 属性，以帮助 React 识别和管理列表中的每个元素。

import React from 'react';

const songs = [
    { id: 1, name: "庐州月" },
    { id: 2, name: "青花瓷" },
    { id: 3, name: "等你下课" },
];

function App() {
    return (
        <div className="app">
            <h2>hello React</h2>
            <ul>
                {songs.map((item) => {
                    return <li key={item.id}>{item.name}</li>;
                })}
            </ul>
        </div>
    );
}

export default App;

这里遍历为什么不用 forEach 用map呢？

在 React 中，通常使用 map 而不是 forEach 来遍历数组并渲染列表的原因是因为 map 方法有一个重要的特性：它会返回一个新的数组，其中包含了根据原始数组每个元素进行操作后的结果。

相比之下，forEach 方法只是用于遍历数组，它不会返回任何新的数组，也就是说它不会生成任何 JSX 元素。在 React 组件中，我们需要将数组的每个元素映射为一个或多个 JSX 元素，并将它们组合成一个列表。而 map 方法正是用于这个目的。

另外，map 方法可以更加简洁地编写代码，因为它可以直接返回 JSX 表达式，而不需要在外部声明一个空数组然后在内部使用 push 方法来添加元素。

条件渲染

在 JSX 中，我们不能直接在标签内使用传统的 JavaScript if 语句，因为 JSX 是 JavaScript 的一种扩展语法，而不是完全独立的模板语言。

但是可以使用逻辑与运算符 && 和三元表达式来实现条件渲染。

1. 逻辑与运算符 && ：当条件为真时，渲染某个元素。

function App() {
    const flag = true;

    return (
        <div className="app">
            {flag && <h2>hello React</h2>}
        </div>
    );
}

export default App;

条件渲染部分使用了 flag && <h2>hello React</h2> 的形式，如果 flag 为 true，则渲染 "hello React" 的 <h2> 元素，否则不渲染任何内容。

1. 三元表达式适用于 1 对多：根据条件渲染不同的元素。

function App() {
    const flag = true;

    return (
        <div className="app">
            <h2>{flag ? "react真好用" : "react不好用"}</h2>
        </div>
    );
}

export default App;

它根据变量 flag 的值来动态渲染标题内容，如果 flag 为 true，则显示 "react真好用"，否则显示 "react不好用"。

样式添加

在 React 中，有几种常见的方式可以为组件添加样式：

1. 内联样式：可以直接在 JSX 元素的 style 属性中以对象的形式添加样式。这种方式适用于需要动态计算样式的情况，但不太适合复杂的样式结构。

   function MyComponent() {
       const style = {
           color: 'red'
       };
   
       return <div style={style}>Hello World</div>;
   }
   

   也可以写成这种形式：

    function MyComponent() {
        return <div style={{ color: 'red'}}>Hello World</div>;
    }

1. CSS 文件：可以在 React 项目中创建 .css 文件，并通过 import 引入到组件中。然后，将 CSS 类名应用到 JSX 元素的 className 属性中。

   // MyComponent.css
   .myComponent {
       color: red;
       background-color: blue;
   }
   
   // MyComponent.js
   import React from 'react';
   import './MyComponent.css';
   
   function MyComponent() {
       return <div className="myComponent">Hello World</div>;
   }
   

事件绑定

onClick 是 React 中用于处理点击事件的一种事件属性。它是一个内置的 JSX 属性，用于将点击事件处理函数绑定到特定的 JSX 元素上。

当用户点击绑定了 onClick 事件的元素时，React 将调用指定的事件处理函数。这个函数可以执行任何逻辑，例如更新组件的状态、发送网络请求、处理用户输入等操作。

下面是一个简单的示例，演示了如何在 React 中使用 onClick：

import React from 'react';

function MyComponent() {
  // 点击事件处理函数
  function handleClick() {
    console.log('按钮被点击了');
  }

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

export default MyComponent;

在这个例子中，当用户点击按钮时，handleClick 函数会在控制台中输出消息 按钮被点击了 。

React组件

React 组件是构建用户界面的独立、可重用的代码单元。它们将 UI 分成独立的部分，每个部分负责一部分 UI 的呈现和交互。组件可以是函数组件或类组件。

函数组件

React 中的函数组件名称应以大写字母开头。这是为了区分 React 组件和普通的 HTML 元素或者其他 DOM 元素。

function HelloReact() {
    return <div>这是一个函数组件</div>
}

function App() {


    return (
        <div className="app">
            <HelloReact></HelloReact> // 或者写成 <HelloReact />
        </div>
    );
}

export default App;

类组件

React 类组件是基于 ES6 类语法创建的组件，它们是 React 中最早引入的组件类型之一。类组件通过继承 React.Component 类来定义组件。

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

import React, { Component } from "react";

class HelloReact extends Component {
    render() {
        return <div>这是一个类组件</div>
    }
}

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

export default App;

这段代码与之前提供的代码相比，主要区别在于 HelloReact 组件是一个类组件而不是函数组件。类组件需要继承自 React.Component，并实现 render 方法来返回组件的 UI 结构。函数组件则是一个简单的函数，直接返回 UI 结构即可。

总结

通过学习以上内容，我们已经掌握了 React 的基础知识，包括 JSX 的使用、列表和条件渲染、事件绑定以及组件的创建。

Ps : 因为这是初步认识React，文章内容的代码相对来说比较简单，方便理解，后面还会继续更新React系列。