React从入门到项目 (第三篇) Vue-cli脚手架

React从入门到项目 (第三篇) Vue-cli脚手架

简介：React是facebook(现在叫Meta)出的针对视图层的library库，目前最新版本18X
React官网- 点我去官网
通过这篇文章你会学到以下知识：

1. 你将会学习到
2. 如何创建和嵌套组件
3. 如何添加标签和样式
4. 如何显示数据
5. 如何渲染条件和列表
6. 如何对事件做出响应并更新界面
7. 如何在组件间共享数据

1、创建项目

1.1 React官网创建方式：

npx create-react-app first-react-app-demo # 创建项目
cd first-react-app-demo
npm start # 启动

1.2 使用Vite创建 （建议使用，速度很快、快、快）
Vite官网-点我去官网

npm create vite@latest

---

项目的目录
我们之前写的组件都可以在这进行练习

2、路由

组件APP.js

import { Route, Switch, Link, NavLink } from "react-router-dom";
import Home from "./pages/Home";
import List from "./pages/List";
import About from "./pages/About";
import Detail from "./pages/Detail";
import PageNotFound from "./pages/PageNotFound";
import "./App.css";

function App() {
  return (
    <div className="App">
      <NavLink exact to="/">
        【首页】
      </NavLink>
      <NavLink to="/liebiao?id=1&name=tom">【列表】</NavLink>
      <NavLink to="/about">【关于】</NavLink>
      <hr />

      {/* Switch 作用是之匹配一个 */}
      <Switch>
        {/* path 表示路径,  component 表示需要展示的组件, exact表示绝对匹配 */}
        {/* 通过component属性设置当前组件的话，那么在组件的属性中可以直接传递路由数据
            通过render或者子组件表示展示组件的时候，组件的属性中不会包含路由信息
        */}
        <Route path="/" exact component={Home} />
        {/* <Route path="/liebiao" component={List} />
        <Route path="/about" component={About} /> */}

        {/* 路由的第二种写法 */}
        <Route exact path="/liebiao" render={() => <List />} />

        {/* 路由的第三种写法，建议使用第三种 */}
        <Route path="/about">
          <About />
        </Route>

        <Route path="/liebiao/:id/:name">
          <Detail />
        </Route>
        <Route>
          <PageNotFound />
        </Route>
      </Switch>
    </div>
  );
}

export default App;

待更新 ：：：：：：