React基础配置与路由导航入门

前端

2023-10-08 19:57:28

前言

React是一款非常强大的前端框架，能够构建出具有动态性和复杂性的网页应用。本文将从零开始，介绍React的基础配置，并对代码格式化和路由导航进行详细讲解，帮助读者快速入门React开发。

React基础配置

在开始使用React之前，我们需要先进行一些基础配置。

安装Node.js和npm

Node.js是JavaScript的运行时环境，npm是Node.js的包管理工具。在安装React之前，我们需要先安装Node.js和npm。

安装create-react-app

create-react-app是React官方提供的脚手架工具，可以帮助我们快速创建一个React项目。

创建React项目

使用create-react-app创建React项目，只需要在命令行中输入以下命令：

npx create-react-app my-react-project

运行React项目

使用以下命令运行React项目：

npm start

代码格式化

为了使代码更加规范和可读，我们可以使用ESLint来对代码进行格式化。

npm install eslint --save-dev

在项目根目录下创建.eslintrc.json文件，并添加以下内容：

{
  "extends": "eslint:recommended",
  "parser": "babel-eslint"
}

路由导航

React-router-dom是React官方提供的路由导航库，可以帮助我们在React项目中实现页面导航。

npm install react-router-dom --save

在项目根目录下创建src/App.js文件，并添加以下内容：

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

function App() {
  return (
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/contact">Contact</Link>
          </li>
        </ul>

        <hr />

        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/contact" component={Contact} />
      </div>
    </Router>
  );
}

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

function Contact() {
  return <h1>Contact</h1>;
}

export default App;

在项目根目录下创建public/index.html文件，并添加以下内容：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  
</head>
<body>
  <div id="root"></div>
  <script src="%PUBLIC_URL%/static/js/bundle.js"></script>
  <script src="%PUBLIC_URL%/static/js/0.chunk.js"></script>
  <script src="%PUBLIC_URL%/static/js/main.chunk.js"></script>
</body>
</html>