React 是一个用于构建用户界面的 JavaScript 库，由 Facebook 开发并维护。它专注于视图层，让开发者可以用声明式的编码方式创建交互式的 UI。以下是 React 前端框架的一些关键概念和用法：

1. 基础概念

组件（Components）

React 应用由组件构成。组件是可复用的 UI 元素，它们有自己的状态和属性。

JSX

JSX 是 JavaScript 的一个语法扩展，它看起来很像 XML 或 HTML。React 使用 JSX 来描述用户界面应该呈现出什么样子。

元素（Elements）

React 元素是对 UI 的轻量级描述。它们是不可变的。

虚拟 DOM（Virtual DOM）

React 使用虚拟 DOM 来渲染 UI，并且通过 diff 算法高效地更新真实 DOM。

2. 组件类型

函数组件

使用 JavaScript 函数创建的组件。

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

类组件

使用 ES6 的类创建的组件。

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

3. 状态管理

State

状态是组件内部管理的数据。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

Props

属性（Props）是组件的输入，它们是不可变的。

<Welcome name="Sara" />

4. 生命周期方法

React 组件有生命周期方法，如 ​​componentDidMount​​, ​​componentDidUpdate​​, 和 ​​componentWillUnmount​​。

5. 事件处理

React 元素可以很容易地添加事件处理函数。

function handleClick() {
  console.log('Clicked!');
}
<button onClick={handleClick}>Click me</button>

6. 条件渲染

React 中的条件渲染和 JavaScript 中的条件运算非常相似。

function Greeting(props) {
  if (props.isLoggedIn) {
    return <h1>Welcome back!</h1>;
  }
  return <h1>Please log in.</h1>;
}

7. 列表 & Keys

使用 ​​map()​​ 函数渲染列表数据，并且每个列表项应该有一个独特的 ​​key​​ 属性。

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

8. 状态提升

将多个组件需要共享的状态提升到它们的最近共同祖先中。

9. Hook

React 16.8 引入了 Hook，它允许在不编写类的情况下使用 state 以及其他的 React 特性。

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>
  );
}

10. 路由

React Router 是 React 生态系统中用于页面导航的库。

import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>
        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

React 提供了强大的功能，让开发者能够创建高效、响应式的用户界面。上述只是 React 的基础内容，实际上它还有更多高级特性和生态系统中的库，比如 Redux 用于状态管理，Next.js 用于服务器端渲染等。