创建 React 应用

想要开始使用 React 构建你的第一个应用吗？这里有一个简单的指南来帮助你创建一个 React 应用。

安装和设置

首先，确保你已经安装了 Node.js 和 npm。然后，你可以使用以下命令来创建一个新的 React 应用：

npx create-react-app my-app

这条命令会创建一个名为 my-app 的新目录，并在其中设置好所有必要的文件和依赖。

运行应用

进入新创建的应用目录，然后使用以下命令来启动你的应用：

npm start

这会启动一个开发服务器，并在浏览器中打开 http://localhost:3000。

代码结构

一个典型的 React 应用包含以下几个部分：

• src/index.js: 应用的入口文件。
• src/App.js: 应用的根组件。
• src/components: 存放所有子组件的目录。

组件

React 应用是由组件组成的。组件可以是一个简单的函数，也可以是一个类。

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

路由

如果你想要在应用中添加多个页面，你可以使用 React Router。

npm install react-router-dom

然后在你的组件中使用 <Switch> 和 <Route> 来定义路由。

import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';

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

学习更多

想要了解更多关于 React 的知识，可以访问我们的 React 教程。

[center]React_Logo[/center]