preface

Today is the first day of learning React as a VUE developer. I decided to record the whole process of learning react, and I will spend an hour learning React every day. React is mapped from previous VUE learning to learn the excellence of each other.

\

My first small goal is to implement all functions of the todo manifest software on the Web side one-for-one through react!

I am used to task-driven when learning new things. Only by developing my favorite things in a new language can I get started more quickly.

Create a project

First, create a new project using the create-React-app scaffolding as recommended by the official documentation

npx create-react-app react-todo
Copy the code

\

Once created, you can see the directory as shown below. The node_modules directory already exists, so you don’t need to perform installation dependencies

\

Then run the react default page on the terminal using the package.json startup command.

npm run start
Copy the code

Perfect the directory

\

Next, temporarily add the following directories in the original directory, and then continue to increase according to actual needs

Layout directory: Used to place the outermost page frame

Pages directory: Used to place pages

Components directory: Used to place components

Assets directory: Used to store static files

Install dependencies

\

react-router-dom

Based on our development experience in VUE, we need at least one routing tool like vue-router. I used react-router-dom

React-router-dom official document link

yarn add react-router-dom
Copy the code

After the installation is complete, create a todo folder in the Pages directory, create an index. JSX, and write the official hook case

// pages/todo/index.jsx
import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import Example from "./pages/todo"
function App() {
    return (
        <Router>
            <Routes>
                <Route exact path="/" element={<Example></Example>} ></Route>
            </Routes>
        </Router>)}export default App
Copy the code

Add the react-router-dom to app.js

import React, { useState } from 'react';

export default function Example() {
  // Declare a new state variable called "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={()= > setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}
Copy the code

Then look at the website page and it says something like this and you’re done

tailwind css

Next I’ll introduce tailwind CSS, the style library I use most often in VUE

Note: The create React APP file in tailwindCSS is incorrect and not compatible with V5. Follow my instructions

Tailwindcss, postcss, and autoprefixer are installed first

yarn add -D -D tailwindcss postcss autoprefixer
Copy the code

\

\

Next, generate your tailwind.config.js file:

npx tailwindcss init -p
Copy the code

In your tailwind.config.js file, configure the template path

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",].theme: {
    extend: {},},plugins: [],}Copy the code

Add tailwind. CSS to index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
Copy the code

Remember to install tailwind CSS code hint plugin tailwind CSS IntelliSense in vscode

Modify the todo/index.jsx code to give the button a red background color

<button className='bg-red-600' onClick={() = > setCount(count + 1)}>
    Click me
</button>
Copy the code

If we look at the page, the button turns red to indicate that our tailwindCSS has been installed successfully

\

Material-UI

The reason why I chose Material UI over Ant Design, the most popular component library on React, is simply because I like the style of Material UI, which is more durable and comfortable overall.

First install the MUI-related packages according to the documentation

yarn add @mui/material @emotion/react @emotion/styled
Copy the code

\

Delete the official case from our Pages and write the code in Layout /index.js

import React, { useState, useEffect } from 'react'
import Button from "@mui/material/Button"
export default function Layout(){
  return (<div className='w-screen h-screen flex items-center justify-center'>
    <div className=' w-1/2 h-1/3 shadow-md bg-white'>The outer container<Button >This is a button</Button>
    </div>
  </div>)}Copy the code

Modify the App. Js

import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import Layout from "./layout"
function App() {
    return (
        <Router>
            <Routes>
                <Route exact path="/" element={<Layout></Layout>} ></Route>
            </Routes>
        </Router>)}export default App
Copy the code

View the page, as shown in the picture below. If there is a button component displayed, the installation is successful

Next, modify the default theme and change app.js to the following code

import { BrowserRouter as Router, Route, Routes } from "react-router-dom"
import { ThemeProvider, createTheme } from "@mui/material/styles"
import Layout from "./layout"

const theme = createTheme({
    palette: {
        primary: {
            main: "# 008080",}}})function App() {
    return (
        <ThemeProvider theme={theme}>
            <Router>
                <Routes>
                    <Route exact path="/" element={<Layout></Layout>} ></Route>
                </Routes>
            </Router>
        </ThemeProvider>)}export default App
Copy the code

Change the theme color using the ThemeProvider. If the button color changes, the change is successful

\

conclusion

Most of the first day was spent installing dependencies, and there are many dependencies that are not installed yet, such as Redux for global data management and Axios for sending requests, but overall progress is good so far. Back dependencies and other functions need to be used when to install.

Since the development of React has not officially started, so far there is no difference in syntax between React and Vue. However, in the use of surrounding ecology, react has more choices, but most of them are English documents first, which will really increase the difficulty for domestic developers.

For example, the Chinese version of the TailwindCSS React installation documentation is already lagging behind. There was an error when I installed according to the document. If I had not searched for a long time on Github and finally found the new installation method in the English version of the document, I could not solve the problem. That should dissuade a lot of developers.

Tomorrow, I will develop the page and get familiar with the following react Hook writing method. I will also sort out routing files and navigation bar development ideas.

If you have a better choice of surrounding ecology, you can comment and tell me. If you are interested in the final development results, you are also welcome to pay attention to oh ~