preface

Today is the second day of learning React. My first small goal is to implement all functions of the todo manifest software on the Web side by one-for-one!

To see how this works, you can use the React-Todo Gitee repository pull code

Create react App+Tailwind CSS +Material UI

Configuration eslint

Before today’s development starts, I’d like to configure ESLint to implement a code format check so that I don’t have to know I’m having problems with some of my development habits from the start of learning React.

If you don’t have esLint installed, run the following command to install ESLint globally

npm install eslint -g
Copy the code

We then execute the esLint initialization command in the root directory

npx eslint --init
Copy the code

When you’re done, a guide will appear to select the options you need for your own project, as I did for my current project

Select Yes and you will be prompted to install some ESLint extensions. The esLint configuration file.eslintrc.js will appear in the root directory of the project after installation as follows:

module.exports = {
    "env": {
        "browser": true."es2021": true."commonjs":true
    },
    "extends": [
        "eslint:recommended"."plugin:react/recommended"]."parserOptions": {
        "ecmaFeatures": {
            "jsx": true
        },
        "ecmaVersion": 12."sourceType": "module"
    },
    "plugins": [
        "react"]."rules": {}};Copy the code

At this point, our code check is configured, if there is any unaccustomed place can be added to the configuration file separately

Prettier lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint lint Code formats can be implemented directly from esLint configuration files.

To install this extension, install the following packages globally, depending on the type of project you are developing

After installing the extension, right-click in vscode and select use prettier eslint to format code.

Redirect the navigation route

Today’s task is mainly to write yesterday’s navigation bar and route module to combine, to achieve a click jump function.

First of all, according to the page corresponding to the path in the data data of the left navigation menu written yesterday, there is one in each directory

Index.jsx entry file

\

Since our project only needs to switch routing components in the right area of the navigation bar, we modify the location of route import

Create a new routes folder under the SRC directory and create an entry file named index.jsx. Write the following code

import React from "react";
import { Route, Routes } from "react-router-dom";
import DayTodo from ".. /pages/dayTodo/index";

const routes = [
  {
    path: "dayTodo".component: DayTodo,
  },
];

const Router = () = > (
  <Routes>
    {routes.map((item) => {
      return (
        <Route
          key={item.path}
          exact
          path={item.path}
          element={item.component()}
        ></Route>
      );
    })}
  </Routes>
);

export default Router;

Copy the code

We start with a component DayTodo, create an array routes to hold the component and its routing path, and then create a Router method that returns the routing label created by Routes. In the future, if you need to add other pages, just import the component and add it to the Routes array.

Then we need to introduce our routing component in Layout /index.jsx and add the click-to-jump function to the list items in the left navigation bar as follows:

import React, { useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
import Router from '.. /routes';

import { List, ListItem, ListItemButton, ListItemIcon, Button, Card } from '@mui/material';
import WbSunnyOutlinedIcon from '@mui/icons-material/WbSunnyOutlined';
import CalendarTodayOutlinedIcon from '@mui/icons-material/CalendarTodayOutlined';
import CalendarViewMonthOutlinedIcon from '@mui/icons-material/CalendarViewMonthOutlined';
import InboxOutlinedIcon from '@mui/icons-material/InboxOutlined';
import SearchOutlinedIcon from '@mui/icons-material/SearchOutlined';
import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';

const LeftList = () = > {
  const data = [
    { icon: <WbSunnyOutlinedIcon />, label: "Day Todo".path: "dayTodo" },
    { icon: <CalendarTodayOutlinedIcon />, label: "To do.".path: "recentlyTodo" },
    { icon: <CalendarViewMonthOutlinedIcon />, label: "Date Overview".path: "dateOverview" },
    { icon: <InboxOutlinedIcon />, label: "To-do box".path: "todyBox" },
    { icon: <SearchOutlinedIcon />, label: "Search".path: "search" },
    { icon: <ListAltOutlinedIcon />, label: "Data recovery".path: "dataReview"},]const [active, setActive] = useState("dayTodo");

  return (<List>
    {data.map(item => {
      return (
        <Link to={item.path} key={item.path}>
          <ListItem
            disablePadding
            className={item.path= = =active ? 'bg-gray-200' :"'}onClick={()= > setActive(item.path)}>
            <ListItemButton>
              <ListItemIcon>
                {item.icon}
              </ListItemIcon>
              <span className="text-sm" >
                {item.label}
              </span>
            </ListItemButton>
          </ListItem>
        </Link>)})}</List>)}export default function Layout() {
  return (<div className='w-screen h-screen flex items-center justify-center'>
    <Card variant="outlined" className='w-2/3 h-3/4 shadow-lg bg-white flex'>
      <div className='w-1/5 bg-gray-50'>
        <div className=' flex items-center justify-center p-5'>
          <Button variant="contained">This is a button</Button>
        </div>
        <LeftList />
      </div>
      <div className=" w-4/5">
        <Router></Router>
      </div>
    </Card>
  </div>)}Copy the code

The key point of this code is that I put a Link tag around the ListItem tag, which can be clicked to the specified page by passing in the to attribute. At the same time, the Router component is introduced and placed in the page, so that the response component is displayed when switching routes

It should also be noted that I have introduced BrowserRouter in index.js, which is more convenient in the outermost layer.

// index.js
ReactDOM.render(
    <BrowserRouter>
        <React.StrictMode>
            <App />
        </React.StrictMode>
    </BrowserRouter>
    ,
    document.getElementById("root"))Copy the code

Let’s look at what the page looks like:

When my route is in /dayTodo, the right side will render the specified component, and click the navigation menu on the left side of the route will make a switch, indicating that my route jump function is complete ~!

conclusion

React-router-dom and Vue-router are different from each other.

Vue-router: If you search the Internet, you can see that most developers use a unified configuration.

React-router-dom: I’ve come up with a number of possible configuration methods while using the react-router-dom. There are a number of different configuration methods available on the web, but one of the most flexible is the react-router-dom.

It’s no wonder Vue is a little easier to get started with than React, because the way you use react is so limited that you can’t be worse off. But I can imagine how different developers have different development styles with React. However, it should also be a very cool thing to find out their own norms ~