Condivisione della tecnologia

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

Un amico mi ha detto che si era laureato e aveva iniziato uno stage.Ma l'azienda utilizza ancoraVista, il leader ha detto che gli sarebbe stato permesso di usarlo dopo un po'ReagirePrima di realizzare un progetto, imparalo tu stesso.

Ho trovato alcuni documenti per lui. A proposito, dato che scrivo anche un blog, potrei anche scriverne uno io stesso, spero che possa aiutare le persone bisognose.

Sommario

1 installazione del progetto

1.1 Selezionare la directory e avviare il terminale

1.2 Installa il comando create-react-app

1.3 Crea progetto

1.4 Visualizzare i file della directory

1.5 Avviare il progetto

2 Librerie di terze parti che verranno sicuramente utilizzate

2.1 js-tool-grande-scatola

2.1.1 Classe di data e ora

2.1.2 Classe del negozio Web

2.1.3 Classe evento

2.1.4 Classe numerica

2.1.5 Classe stringa

2.1.6 Classe di verifica regolare

2.1.7 classe ajax

2.1.8 classe dati dati

2.1.9 classe del browser del browser

2.2 meno o preprocessore sass

Libreria di richieste 2.3 axios

Libreria dell'interfaccia utente 2.4

---

1 installazione del progetto

1.1 Selezionare la directory e avviare il terminale

Puoi trovare una cartella sul tuo computer come directory per esercitarti in questo progetto React, quindi inserisci "cmd" nell'URL della cartella, verrà visualizzato il terminale e potrai anche specificare la directory di destinazione:

 

Qui è dove inserisci "cmd" e premi Invio per visualizzare la finestra pop-up del terminale.

1.2 Installa il comando create-react-app

Esegui il comando seguente, -g significa installarlo globalmente

npm install -g crea-react-app

1.3 Crea progetto

Ad esempio, vogliamo creare un file denominato js-tool-grande-scatola-react project, quindi puoi eseguire il seguente comando:

creare-react-app js-tool-grande-scatola-react

Verrà quindi installato il terminale,L'installazione potrebbe essere un po' lenta, attendere pazientemente, come mostrato nella figura seguente, una volta completata l'installazione:

1.4 Visualizzare i file della directory

• La directory pubblica memorizza file html familiari e alcuni file statici richiesti;
• La directory src è una directory importante per lo sviluppo del progetto.
• Più in basso, index.js è il file di ingresso.
• Puoi provare ad apportare alcune modifiche in App.js e quindi verificare l'effetto della pagina web

1.5 Avviare il progetto

Nell'immagine sopra, utilizziamo l'editor VSCode per aprire il progetto React. A questo punto, inserisci il comando nella console:

inizio npm

Quindi, il progetto ci aiuterà attivamente ad attivare il browser,http://localhost:3000/L'indirizzo, quindi puoi vedere l'icona React rotante e il progetto è installato.

 

2 Librerie di terze parti che verranno sicuramente utilizzate

Una volta completata l'installazione del progetto, inizierà lo sviluppo del progetto. Come si suol dire, se un lavoratore vuole fare bene il suo lavoro, deve prima affinare le sue energie.Prima dello sviluppo del progetto, parliamo di alcune cose che verranno sicuramente utilizzate nello sviluppo del progetto front-end.Librerie di terze parti .Utilizzando queste librerie di terze parti, possono aiutarci a svilupparepiù efficiente。

2.1 js-tool-grande-scatola

Per prima cosa vieni all'indirizzo di apprendimento di js-tool-big-box, fai clic qui:Indirizzo di apprendimento della libreria degli strumenti js-tool-big-box

js-tool-big-box è quasi una libreria npm indispensabile per i progetti di sviluppo front-end. Ha funzioni avanzate ed è facile da usare, rendendo lo sviluppo front-end estremamente efficiente. Le sue funzioni attuali includono ma non sono limitate a:

2.1.1 Classe di data e ora

1. Conversione di data e ora;
2. Formato orario più flessibile;
3. Acquisizione del tempo più personalizzata;
4. Il periodo di tempo da un certo momento ad oggi (informazioni più dettagliate sulla restituzione)
5. Determina se si tratta di un anno ordinario o bisestile;
6. Quanti giorni ci sono in un mese;
7. segno zodiacale;
8. giorni festivi dell'anno;
9. Ottieni l'ora delle principali città del mondo;

2.1.2 Classe del negozio Web

1. Ottieni il valore del parametro nell'URL
2. impostare i cookie;
3. Ottieni i cookie;
4. Eliminare i cookie;
5. Imposta localStorage;
6. Ottieni localStorage

2.1.3 Classe evento

1. Anti-shake
2. Acceleratore

2.1.4 Classe numerica

1. Migliaia separate da virgole;
2. Determina se è maggiore di 0;
3. Determina se un numero intero è maggiore di 0;
4. Genera numeri casuali all'interno dell'intervallo specificato;
5. Genera un numero casuale con un numero specificato di cifre;
6. Convertire i numeri in cinese minuscolo;
7. Convertire i numeri in cinese maiuscolo;

2.1.5 Classe stringa

1. inversione di corda;
2. Henggang e piccola gobba
3. Henggang si trasforma in una grande gobba;
4. Confronto del numero di versione;
5. Ottieni la lunghezza in byte di una stringa;
6. generare uuid;
7. Ottenere sesso, età e data di nascita in base al numero identificativo;
8. Aggiungi simboli speciali al centro della stringa per nascondere le informazioni chiave;
9. Conversione di stringhe di lettere maiuscole e minuscole;

2.1.6 Classe di verifica regolare

1. Verifica del formato email;
2. Verifica del formato del numero di cellulare;
3. Verifica del formato URL;
4. Verifica del formato del numero identificativo;
5. Verifica del formato dell'indirizzo IP;
6. Convalida del formato del codice postale;

7. Determina se si tratta di un carattere Unicode;

8. Rileva il valore di sicurezza della password;

2.1.7 classe ajax

1. Invia richiesta jsonp;
2. Scarica la versione puramente funzionale del file;
3. Scarica file, recupera + scarica la versione della funzione;

2.1.8 classe dati dati

1. Ottieni un numero casuale di valori dall'array;
2. Copia il testo negli appunti;
3. Deduplicazione di array;
4. Ottieni tipi di dati più dettagliati;
5. Ordinamento di array numerici (ordine diretto e inverso);
6. Ordinamento dell'array di oggetti (ordine diretto e inverso)

2.1.9 classe del browser del browser

1. Determina se il browser corrente è mobile;
2. Determina se l'elemento si trova all'interno dell'intervallo visibile;

3. Scopri se il browser corrente scorre verso l'alto o verso il basso e ottieni la distanza corrente dall'alto e dal basso;

4. Attiva e disattiva lo schermo intero;

5. Ottieni userAgent del browser e informazioni dettagliate;

2.2 meno o preprocessore sass

Il modo tradizionale di scrivere CSS è relativamente di fascia bassa. L'uso di preprocessori come less o sass può rendere lo sviluppo CSS più efficiente ed è altamente raccomandato.

Documenti di studio (Less Quick Start |. Documentazione cinese Less.js - Sito Web Less cinese (bootcss.com))

Libreria di richieste 2.3 axios

Generalmente, i progetti implicano l'interazione con il server e in questo momento è possibile utilizzare axios per inviare richieste.

documentazione di apprendimento axios(axios Documentazione cinese |. axios Sito web cinese |. axios (axios-js.com))

Libreria dell'interfaccia utente 2.4

Per React, se si tratta di sviluppo lato C, speriamo ancora di essere in grado di scrivere a mano alcune librerie dell'interfaccia utente relativamente leggere, ma se si tratta di sviluppo lato B, consigliamo Ant Design.

Documento didattico sulla progettazione delle formiche (Ant Design: un linguaggio di progettazione dell'interfaccia utente di livello aziendale e una libreria di componenti React)