小白学前端--第二天（2026/2/3）项目搭建-1

今天给大家介绍一下学习成果：

react项目搭建

一、项目创建

首先我们要下载react(本文来自黑马程序员react教学)

在cmd上输入npx create-react-app 进行下载，第三个为名称位置（没有npx的话请移步到其他帖子哦），接下来删掉多余的页面，将页面整理为这个样子

（craco.config.js先创建出来，后面也有用）

二、配置基础路由Router

所有代码都挤在一起是不是很不美观，也不方便维护。所以我们要将项目拆解开，拆解的原则按照一个页面一个文件夹，放在pages文件夹内，并留出一个index.js文件。见下图

我创建了两个Layout和Login页面文件夹，在index文件里可以进行简单书写，便于测试页面是否可以显示，如下：

const Layout = () => {
return <h2>Layout Page</h2>;
}
export default Layout;

接下来就去下载react-router-dom吧

下载之后，我们要去router文件夹里面去配置index.js文件

里面这样写：

import { createBrowserRouter } from "react-router-dom";
import Layout from "@/pages/Layout";
import Login from "@/pages/Login";

const routes = [
{
path: "/",
element: <Layout />,
},
{
path: "/login",
element: <Login />,
}
]
const router = createBrowserRouter(routes);
export default router;

这样，我们就将两个页面成功的合成为一个统一的router导出了（大家不要用@先，先用相对路径）

导出之后我们就可以进行应用，将导出的router挂在最外面的index.js里面，像这样

代码部分如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';

import router from './router';
import { RouterProvider } from 'react-router-dom';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<RouterProvider router={router} />
</React.StrictMode>
);

之后我们就可以尝试跑一下，出现这样的话就算是跑通了。

三、axios请求的搭建

作为前端，很多时候需要渲染的数据都在后端，这时候我们就要用目前比较流行的axios来发送请求。

所以我们就要下载axios,并进行配置。

npm i axios一下

然后创建utiil里面request.js和index.js两个文件。

在request.js里面这么写：

//axios

import axios from "axios";

const request= axios.create({
baseURL:'',//需填写
timeout:5000
})

request.interceptors.request.use((config)=>{
return config
},(error)=>{
return Promise.reject(error)
})
request.interceptors.response.use((response)=>{
return response.data
},(error)=>{
return Promise.reject(error)
})

export {request}

创建好request之后，就可以导入在index里面

index.js里面如下：

import {request} from './request'

export {
request
}

给他导出，这样我们就可以直接在util里面应用了，而且不同的axios请求分别引用，不会污染源头！

下一篇我会继续分享如何持久化token和redux模块管理哦！今天先写到这里！