React简介

React是一个用于构建用户界面的JavaScript库，由Facebook开发并开源。它采用组件化模式，声明式编程，可以帮助开发者高效地创建交互式UI。

React 核心概念

组件化：将UI拆分为独立、可复用的组件，每个组件管理自己的状态。

声明式编程：描述UI应该是什么样子，而不是如何更新它，简化代码逻辑。

虚拟DOM：React使用虚拟DOM来提高性能，通过比较虚拟DOM的变化来最小化实际DOM操作。

React与其他框架对比

React专注于视图层，不提供完整的前端解决方案（如路由、状态管理），但拥有丰富的生态系统。

第一个React应用

这是一个简单的React示例，展示了React的基本工作原理：

第一个React组件 
// 使用JSX语法创建React组件
class Welcome extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, React!</h1>
        <p>这是我的第一个React组件</p>
      </div>
    );
  }
}

// 渲染组件到DOM
ReactDOM.render(
  <Welcome />,
  document.getElementById('root')
);
React组件演示

JSX语法

JSX是JavaScript的语法扩展，允许在JavaScript中编写类似HTML的代码。它最终会被编译为普通的JavaScript函数调用。

JSX语法示例 
// JSX示例
const element = <h1>Hello, world!</h1>;

// JSX中使用JavaScript表达式
const name = 'React';
const element = <h1>Hello, {name}!</h1>;

// JSX属性
const element = <img src="logo.png" alt="Logo" />;

// JSX中的条件渲染
function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please sign up.</h1>;
}

// JSX中的列表渲染
const numbers = [1, 2, 3, 4, 5];
const listItems = numbers.map((number) =>
  <li key={number.toString()}>{number}</li>
);

JSX重要规则

1. JSX必须有一个根元素（或使用Fragment <></>）

2. JSX中的JavaScript表达式使用花括号 {} 包裹

3. JSX中的class属性要写成 className

4. 内联样式要使用对象形式：style={{color: 'red', fontSize: '14px'}}

JSX实践演示

下面的React组件展示了JSX的各种用法：

JSX语法演示

组件基础

React组件是构建UI的基本单元。组件可以是类组件或函数组件，它们接收参数（props）并返回描述UI的React元素。

React组件定义 
// 1. 函数组件 (简单组件)
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 2. 类组件 (可以包含状态和生命周期方法)
class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// 3. 箭头函数组件
const Welcome = (props) => {
  return <h1>Hello, {props.name}!</h1>;
};

// 4. 组件组合
function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
      <Welcome name="Charlie" />
    </div>
  );
}
组件组合演示

下面的示例展示了多个React组件的组合使用：

组件演示区

Props与State

Props和State是React中两个重要的概念。Props是父组件传递给子组件的数据，State是组件内部的状态数据。

Props与State示例 
// Props示例：父组件向子组件传递数据
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Alice" />
      <Welcome name="Bob" />
    </div>
  );
}

// State示例：类组件中的状态管理