1. Download //Applicable to both js and ts npm i –save react-router-dom @types/react-router-dom 2. Use RouterProvider and createBrowserRouter are introduced in react-router-dom. The createBrowserRouter function is an array. The elements of the array are objects, which store routing information. The two most important attributes are path and element. path is a string type attribute that […]
Tag: React
web3 uses antd to build the basic structure of the order component in React dapp
The above web3 dapp React project introduces antd to style the balance user token information component. In the middle, we import the antd component, which is a relatively complete preparation of the user asset component. So starting today, we are going to talk about the order component. This will be much more complicated than before. […]
react implements the printer effect of chatGPT, is compatible with rich text, and comes with a git address
1. Method 1: Use the plug-in typed.js typed.js website address, click me to open it 1.1. The core code is as follows: //TypeWriteEffect/index.tsx component import React, {<!– –> useEffect, useRef } from ‘react’; import Typed from ‘typed.js’; import {<!– –> PropsType } from ‘./index.d’; const TypeWriteEffect: React.FC<PropsType> = ({<!– –> text = ”, callback, seed […]
React technical principles and code development practice: combined use of React and Redux
Author: Zen and the Art of Computer Programming 1. Background Introduction React is a JavaScript library for building user interfaces, created and open sourced by Facebook. Like other JavaScript frameworks, React’s biggest feature is that it is easy to use and can easily implement various functions. React is not only a front-end framework, it is […]
React technical principles and code development practice: React elements and components
Author: Zen and the Art of Computer Programming 1. Background Introduction React introduction React (pronounced “reac?t”) is a JavaScript library for building user interfaces, launched by Facebook and open source. Its main feature is the declarative programming style, which makes the code more understandable, maintainable and reusable, so it is becoming more and more popular. […]
To understand React Hooks, this article is enough
1. Understand what Hooks are In React, Hooks is actually a function. The name of this function starts with use, and the function returns a result; React Hooks actually encapsulate some common and public methods, which are some common tools. 2. Official Hooks Official Hooks refer to some Hooks officially recommended by React, such as: […]
React simple server rendering example (including the use of redux, redux-thunk)
1. package.json { “name”: “react-server”, “version”: “1.0.0”, “description”: “”, “main”: “index.js”, “scripts”: { “dev”: “npm-run-all –parallel dev:**”, “dev:build:client”: “webpack –config config/webpack.client.js –watch”, “dev:build:server”: “webpack –config config/webpack.server.js –watch”, “dev:start”: “nodemon –watch dist –exec node “./dist/bundle.js”” }, “keywords”: [], “author”: “”, “license”: “ISC”, “devDependencies”: { “@babel/core”: “^7.0.0”, “@babel/plugin-proposal-private-property-in-object”: “^7.21.11”, “@babel/preset-env”: “^7.22.20”, “@babel/preset-react”: “^7.22.15”, “@babel/preset-stage-0”: “^7.8.3”, “@babel/preset-typescript”: “^7.23.0”, […]
React technical principles and code development practice: from Webpack to Parcel
Author: Zen and the Art of Computer Programming 1. Background Introduction What is React? React is a JavaScript library for building user interfaces that was first released in September 2013. It was invented by Facebook engineer Jean Preact and open sourced in 2017. Its main features include declarative programming, component-based design, one-way data flow, etc., […]
How to Unleash the Power of React Hooks
React is a popular JavaScript library for building user interfaces that has undergone significant changes and improvements over the years. One of the most disruptive new features in React is the introduction of Hooks. React Hooks revolutionize the way developers manage state and lifecycle in functional components. In this comprehensive guide, take a deep dive […]
Build a front-end development project from scratch based on Vite4, Typescript, React18, react-router-dom6.4, Redux4, Reduxjs/toolkit, and Ant Design5.9
Build a front-end development project from scratch based on Vite, Typescript, React, react-router-dom, Redux, Reduxjs/toolkit, and Ant Design vite project initialization Native environment node v16.14.2 npm 8.5.0 yarn 1.22.18 vite project initialization yarn create vite Follow the steps to enter the project name, select React for the framework, and use TypeScript for js to create […]