手把手教你写react项目

最新推荐文章于 2025-04-27 13:04:18 发布

原创

最新推荐文章于 2025-04-27 13:04:18 发布

· 1.7k 阅读

9 ·

版权

本文手把手教你如何从创建react项目开始，逐步进行配置、搭建页面结构、请求数据、使用UI库、实现路由跳转、状态管理、模拟数据以及深入理解diff算法、组件状态管理等，涵盖了React开发的多个重要环节。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建项目

cnpm / npm i create-react-app -g
npx create-react-app myapp
在这里插入图片描述

2.抽离配置文件

cd myapp
运行 npm run eject 抽离配置文件
在这里插入图片描述
修改package.json ，配置dev指令

3.配置项目

配置src文件夹的别名 @

pakeage.json的alias选项中：

      'react-native': 'react-native-web',
      '@': path.join(__dirname,'../','src')

配置sass

npm i node-sass -D

4.项目基本结构

1.在App.js,创建样式基本结构

import React from 'react';
function App() {
   
  return (
    <div className="container">
      <header className="header">header</header>
      <div className="content">cont</div>
      <footer className="footer">foot</footer>
    </div>
  );
}

export default App;

2.创建基本页面

在src新建各个页面
在这里插入图片描述
3.入口文件处引入相关文件并且配置

路由：
npm i react-router-dom -S

import {
    BrowserRouter as Router, Route, Switch } from 'react-router-dom';
//给根节点root要通过路由去渲染页面，只有一个子元素switch
ReactDOM.render(
	<Router> 
	<Switch>  
		<Route path="/" component={
   App}/>
	</Switch>
	</Router>
	, document.getElementById('root'));

4.app.js

import {
   Route,Switch} from 'react-router-dom';
return (
    <div className="container">
			<Switch>
			<route path="/home" component={
   Home} />
			<route path="/car" component={
   Car} />
			<route path="/kind" component={
   Kind} />
			<route path="/mine" component={
   Mine} />
			</Switch>
      <footer className="footer">foot</footer>
    </div>
  );

但是什么都不输入的时候，不出效果 ------- 重定向

import {
   Route,Switch,Redirect} from 'react-router-dom';
<Redirect to="/home"/>

5.底部布局，完成跳转

路由的跳转、声明式跳转

Link ---- 选中无效果
NavLink ---- 选中有效果

import {
   Route,Switch,Redirect, NavLink} from 'react-router-dom';
      <footer className="footer">
      <ul>
      <NavLink to

最低0.47元/天解锁文章