React应用开发利器：Vite实战指南，助你快速搭建项目！

2023-03-01 00:14:04

用 Vite 和 React 构建你的第一个 React 应用程序：分步指南

搭建项目环境

踏出建立你第一个 React 应用的第一步是设置你的项目环境。首先，安装 Vite，这是一个用于快速构建现代 Web 应用程序的构建工具：

npm install -g vite

接下来，初始化一个新项目并选择一个 React 模板：

mkdir my-react-project
cd my-react-project
vite init

构建组件库

React 应用通常由称为组件的可重用代码块组成。要创建组件，请在 src/components 目录中创建文件。例如，你可以创建一个 Header 组件：

touch src/components/Header.jsx

在 Header.jsx 中，编写以下代码：

import React from 'react';

const Header = () => {
  return (
    <header>
      <h1>My React App</h1>
    </header>
  );
};

export default Header;

应用 CSS 样式

为了让你的应用程序更有吸引力，可以使用 CSS 预处理器，如 Sass。首先，安装 Sass：

npm install -D sass

然后，在 src 目录中创建 styles.scss 文件：

touch src/styles.scss

并在 styles.scss 中编写 CSS 代码：

body {
  font-family: 'Arial', sans-serif;
}

h1 {
  color: #333;
}

配置路由

路由允许用户在应用程序的不同页面之间导航。要设置路由，请安装 React Router DOM：

npm install react-router-dom

然后，在 src/App.jsx 中，配置路由：

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

import Header from './components/Header';
import Footer from './components/Footer';
import Home from './pages/Home';
import About from './pages/About';

const App = () => {
  return (
    <Router>
      <Header />
      <main>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </main>
      <Footer />
    </Router>
  );
};

export default App;