Technology Sharing

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

A friend told me that he has graduated and started an internship. But the company is still usingVueThe leader said that he would be allowed to use it after a while.ReactWhen doing a project, learn on your own first.

I found some documents for him. By the way, since I write a blog myself, I might as well write one myself, hoping it can help people in need.

Table of contents

1 Project Installation

1.1 Select the directory and start the terminal

1.2 Install create-react-app command

1.3 Create a project

1.4 View directory files

1.5 Start the project

2 Third-party libraries that will definitely be used

2.1 js-tool-big-box

2.1.1 Time and date class

2.1.2 Web store class

2.1.3 Event Class

2.1.4 Number Class

2.1.5 String Class

2.1.6 Regular Validation Class

2.1.7 Ajax Class

2.1.8 Data Class

2.1.9 browser class

2.2 LESS or SASS preprocessor

2.3 axios request library

2.4 UI Library

---

1 Project Installation

1.1 Select the directory and start the terminal

You can find a folder on your computer as the directory for this React project practice, then enter "cmd" at the URL of the folder, and the terminal will pop up, and you can also specify the target directory:

 

Right here, enter "cmd" and press Enter to bring up the terminal pop-up window.

1.2 Install create-react-app command

Execute the following command, -g means global installation

npm install -g create-react-app

1.3 Create a project

For example, we want to create a js-tool-big-box-react , you can execute the following command:

create-react-app js-tool-big-box-react

Then the terminal will install it.Installation may be a little slow, wait patiently, after the installation is complete, it will be as shown below:

1.4 View directory files

• The public directory contains the HTML files we are familiar with and some static files required;
• The src directory is an important directory for project development
• Further down, index.js is the entry file
• You can try to make some changes in App.js and then check the effect on the web page.

1.5 Start the project

In the picture above, we use the VSCode editor to open the React project. At this time, enter the command in the console:

npm start 

Then, the project will actively help us wake up the browser,http://localhost:3000/, and then you can see the rotating React icon, and the project is installed.

 

2 Third-party libraries that will definitely be used

After the project is installed, it is time to start the project development. As the saying goes, if you want to do your work well, you must first improve your spirit. Before the project development, let's talk about a few things that will definitely be used in the front-end project development.Third-party libraries. Using these third-party libraries can help us developMore efficient。

2.1 js-tool-big-box

First, here is the learning address of js-tool-big-box, click me:js-tool-big-box tool library learning address

js-tool-big-box is a must-have npm library for almost all front-end development projects. It is feature-rich and easy to use, making front-end development extremely efficient. Currently, its functions include but are not limited to:

2.1.1 Time and date class

1. Time and date conversion;
2. More flexible time formats;
3. More personalized time acquisition;
4. The time period from a certain point in time to now (more detailed return information)
5. Determine whether it is a common year or a leap year;
6. How many days are there in a particular month?
7. sign of the Zodiac;
8. Legal holidays during the year;
9. Get the time of key cities around the world;

2.1.2 Web store class

1. Get the parameter value in the URL
2. Set cookies;
3. Get cookies;
4. Delete cookies;
5. Set localStorage;
6. Get localStorage

2.1.3 Event Class

1. Stabilization
2. Throttling

2.1.4 Number Class

1. Thousands are separated by commas;
2. Determine whether it is greater than 0;
3. Determine whether the integer is greater than 0;
4. Generate a random number within a specified range;
5. Generate a random number of specified digits;
6. Convert numbers to lowercase Chinese;
7. Convert numbers to uppercase Chinese;

2.1.5 String Class

1. String reversal;
2. Henggang to Xiaotuofeng
3. Henggang turns to Datuofeng;
4. Version number comparison;
5. Get the byte length of a string;
6. Generate uuid;
7. Get gender, age and date of birth based on ID number;
8. Add special symbols in the middle of the string to hide key information;
9. String uppercase and lowercase letter conversion;

2.1.6 Regular Validation Class

1. Email format verification;
2. Mobile phone number format verification;
3. URL format verification;
4. ID card number format verification;
5. IP address format verification;
6. Postal code format validation;

7. Determine whether it is a Unicode character;

8. Detect password strength value;

2.1.7 Ajax Class

1. Send jsonp request;
2. Download the pure functional version of the file;
3. Download files, fetch + download function version;

2.1.8 Data Class

1. Get the value of a random number in the array;
2. Copy text to clipboard;
3. Array deduplication;
4. Get more detailed data types;
5. Sorting of numerical arrays (in ascending and descending order);
6. Sorting arrays of objects (in ascending and descending order)

2.1.9 browser class

1. Determine whether the current browser is a mobile phone;
2. Determine whether the element is within the visible range;

3. Get whether the current browser is scrolling up or down, and get the current distance from the top and bottom;

4. Turn full screen on and off;

5. Get browser userAgent and detailed information;

2.2 LESS or SASS preprocessor

The traditional way of writing CSS is relatively low-end. Using preprocessors such as less or sass can make CSS development more efficient, which is highly recommended.

Study Documents(Less Quick Start | Less.js Chinese Documentation - Less Chinese Website (bootcss.com))

2.3 axios request library

Generally, projects involve interaction with the server, and at this time you can use axios to send requests.

Axios learning document (axios Chinese documentation | axios Chinese website | axios (axios-js.com))

2.4 UI Library

For React, if it is C-end development, we still hope to handwrite some lightweight UI libraries, but if it is B-end, we recommend Ant Design.

Ant Design learning document(Ant Design - An enterprise-level UI design language and React component library)