react项目开发笔记（创建项目篇）

最新推荐文章于 2024-07-24 11:09:48 发布

男孩12

最新推荐文章于 2024-07-24 11:09:48 发布

阅读量521

点赞数 1

分类专栏：开发者文档文章标签： vue.js reactjs 前端

本文链接：https://blog.csdn.net/weixin_51666715/article/details/124179960

版权

开发者文档专栏收录该内容

24 篇文章 0 订阅

订阅专栏

这篇博客介绍了如何使用create-react-app创建React项目，并详细阐述了React路由重定向的实现方法，通过react-router-dom和自定义组件完成。同时，文章讲解了如何运用MobX进行状态管理，包括安装、配置以及在组件中使用。在项目中引入并配置MobX Store，以便全局访问和修改数据。

摘要由CSDN通过智能技术生成

React项目的开发

一、项目创建是通过我们的create-react-app创建项目的。

二、react和vue都是单页面项目，也就是说只有一页,我们要实现多个页面的操作的话是需要react路由的,所依赖的东西是react-router-dom

三、我们要实现路由重定向的话需要自己声明，操作如下：

import { useEffect } from "react";
import { useNavigate } from "react-router-dom";

export default function Redirect({ to }) {
  let navigate = useNavigate();
  useEffect(() => {
    navigate(to);
  });
  return null;
}

然后倒入这个代码段,从中拿到Redirect，然后实现路由路由重定向.

四、使用mobx来进行对数据的保存

我们首先要安装依赖

npm i mobx
npm i mobx-react

然后定义一个我们的文件来进行mobx的配置

import * as mobx from "mobx"

class Store {
    token = "1213465"
	//这是十分重要的
    constructor(){
        mobx.makeAutoObservable(this);
    }
}
export default new Store();

然后需要我们能够在全局中引入的话需要index.js中配置

import store from "./store/index";
import {Provider } from "mobx-react"

root.render(
  <React.StrictMode>
    <Provider store={store}>
    <App />
    </Provider>
  </React.StrictMode>
);

然后要在packpage,json中配置

{
  "scripts": {},
  "babel": {
    "plugins": [
      [
        "@babel/plugin-proposal-decorators",
        {
          "legacy": true
        }
      ]
    ],
    "presets": [
      "react-app"
    ]
  }
}

然后要在我们使用mobx的地方使用即可

import React from 'react';
import {inject,observer} from "mobx-react"
import store from '../../store';

function Target(props) {
    
    return ( 
        <div>
            Target {props.value}\{store.token}
        </div>
     );
}
//只是访问数据的话就只用inject就好了,修改数据的话要加上observer
export default inject("store")(observer(Target));