Skip to main content

React 简介

什么是 React？​

React 是一个用于构建用户界面的 JavaScript 库，主要用于构建单页应用（SPA）和组件化 UI 设计。

info

React 由 Facebook（现 Meta）开发，现已成为前端开发的主流技术之一。

React 主要应用场景​

领域说明主要库/框架
单页应用（SPA）构建前端动态页面，优化用户体验React Router, Redux
组件化开发复用 UI 组件，提高开发效率Material-UI, Ant Design
服务器端渲染（SSR）提升 SEO 和首屏加载速度Next.js
移动端开发构建跨平台移动应用React Native

React 代码示例​

function App() {
  return <h1>Hello, React!</h1>;
}
export default App;

组件开发示例​

import React from "react";

function Button({ label }) {
  return <button>{label}</button>;
}

export default Button;

React 路由示例​

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

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </Router>
  );
}

export default App;

状态管理示例​

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);
  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}
export default Counter;

服务器端渲染（SSR）示例（Next.js）​

使用 Next.js 进行 SSR
import { GetServerSideProps } from "next";

type Props = {
  message: string;
};

export default function Page({ message }: Props) {
  return <h1>{message}</h1>;
}

export const getServerSideProps: GetServerSideProps = async () => {
  return {
    props: { message: "Hello from Server!" },
  };
};

结论​

React 作为现代前端开发的主流框架，适用于单页应用、移动端开发和服务器端渲染等多个场景。其组件化设计和丰富的生态系统使其成为开发者的首选。

更多 React 资源