React 基础学习React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它

React 基础学习文档

一、React 简介

React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它采用组件化的开发方式，使得代码具有良好的可维护性和可复用性。

二、环境搭建

1. Node.js 和 npm 安装

首先需要安装 Node.js，npm（Node Package Manager）会随 Node.js 一起安装。你可以从 Node.js 官方网站下载适合你操作系统的安装包进行安装。安装完成后，在命令行中输入以下命令验证安装是否成功： bash node -v npm -v

2. 创建 React 项目

使用 create-react-app 工具来快速创建一个 React 项目，在命令行中输入以下命令： bash npx create-react-app my-react-app cd my-react-app npm start 执行完上述命令后，浏览器会自动打开 http://localhost:3000，显示 React 的欢迎页面，这表示项目创建成功。

三、React 基本概念

1. 组件（Components）

组件是 React 中最核心的概念，它可以将 UI 拆分成独立的、可复用的部分。组件可以是函数组件或类组件。

函数组件

函数组件是一种简单的 JavaScript 函数，它接收一个 props 对象作为参数，并返回一个 React 元素。以下是一个简单的函数组件示例：

// 定义一个名为 HelloWorld 的函数组件 
function HelloWorld(props) { return <h1>Hello, {props.name}!</h1>; } 
// 使用组件 
const App = () => { return ( <div> <HelloWorld name="React" /> </div> ); }; 
export default App;

类组件

类组件是使用 ES6 类语法创建的组件，它需要继承自 React.Component 类，并实现 render 方法。以下是一个简单的类组件示例：

import React, { Component } from 'react'; 
// 定义一个名为 HelloWorld 的类组件 
class HelloWorld extends Component { 
    render() { 
        return <h1>Hello, {this.props.name}!</h1>;
    } 
} 
// 使用组件 
const App = () => { return ( <div> <HelloWorld name="React" /> </div> ); }; 
export default App;

2. JSX（JavaScript XML）

JSX 是一种 JavaScript 的语法扩展，它允许在 JavaScript 代码中编写类似 HTML 的代码。JSX 最终会被编译成 JavaScript 代码。例如：

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

在 JSX 中可以使用 JavaScript 表达式，需要用花括号 {} 包裹：

const name = "React"; const element = <h1>Hello, {name}!</h1>;

3. Props（属性）

Props 是组件之间传递数据的一种方式，父组件可以通过 Props 向子组件传递数据。子组件通过 props 对象接收数据。例如：

// 父组件 
const App = () => { 
    const message = "Hello from parent!"; 
    return ( 
        <div> <ChildComponent message={message} /> </div> 
       ); 
}; 
   // 子组件 
   const ChildComponent = (props) => { 
       return <p>{props.message}</p>; 
   }; 
export default App;

4. State（状态）

State 是组件内部的私有数据，它可以随着组件的生命周期发生变化。在类组件中，使用 this.state 来定义和访问状态，并且可以通过 this.setState() 方法来更新状态。以下是一个简单的计数器示例：

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> 
                <p>Count: {this.state.count}</p> 
                <button onClick={this.incrementCount}>Increment</button> 
            </div> 
     ); 
   }
} 
export default Counter;

四、事件处理

在 React 中，事件处理和 HTML 中的事件处理类似，但有一些语法上的区别。在 JSX 中，事件处理函数需要使用驼峰命名法，并且需要传递一个函数作为事件处理函数。例如：

import React, { Component } from 'react'; 

class ButtonClick extends Component { 

handleClick = () => { 
    console.log('Button clicked!'); 
}; 
render() { 
    return ( 
        <button onClick={this.handleClick}>Click me</button> 
        ); 
    } 
} 
export default ButtonClick;

五、列表渲染和条件渲染

1. 列表渲染

在 React 中，可以使用 map() 方法来遍历数组并渲染列表。例如：

const numbers = [1, 2, 3, 4, 5]; 
const NumberList = () => { 
    const listItems = numbers.map((number) => ( <li key={number.toString()}>{number}</li> )); 
    
    return ( <ul> {listItems} </ul> ); }; 
    
export default NumberList;

注意：在列表渲染时，每个列表项需要一个唯一的 key 属性，用于帮助 React 识别哪些项发生了变化。

2. 条件渲染

在 React 中，可以使用 JavaScript 的条件语句（如 if、else、ternary operator）来实现条件渲染。例如：

const LoginButton = (props) => { 
    if (props.isLoggedIn) {
        return <button>Logout</button>; 
    } else { 
        return <button>Login</button>; 
    } 
}; 
export default LoginButton;

也可以使用三元运算符来实现更简洁的条件渲染：

const LoginButton = (props) => { 
    return (
        <button>{props.isLoggedIn ? 'Logout' : 'Login'}</button> 
       );
}; 

export default LoginButton;

六、总结

通过以上内容，你已经了解了 React 的基本概念和使用方法，包括组件、JSX、Props、State、事件处理、列表渲染和条件渲染等。这些知识是学习 React 的基础，你可以在此基础上进一步深入学习 React 的高级特性和生态系统。希望这份文档对你学习 React 有所帮助！