Reacționați la cele mai bune practici pentru a vă îmbunătăți jocul în 2022

Publicat: 2022-12-09

React a rămas una dintre cele mai populare biblioteci pentru crearea de interfețe cu utilizatorul atunci când construiesc aplicații web. Este utilizat pe scară largă de multe companii și are o comunitate activă.

În calitate de dezvoltator React, înțelegerea modului în care funcționează biblioteca nu este singurul lucru de care aveți nevoie pentru a construi proiecte care sunt ușor de utilizat, ușor de scalat și de întreținut.

De asemenea, este necesar să înțelegeți anumite convenții care vă vor permite să scrieți cod React curat. Acest lucru nu numai că vă va ajuta să vă serviți mai bine utilizatorii, dar vă va face mai ușor pentru dvs. și pentru alți dezvoltatori care lucrează la proiect să mențineți baza de cod. Lucrezi la următorul tău proiect React? Învățarea să scrieți codul React curat este un mușchi care schimbă jocul Începeți aici ️ Faceți clic pentru a Tweet

În acest tutorial, vom începe prin a vorbi despre unele dintre provocările comune cu care se confruntă dezvoltatorii React, apoi vom aborda unele dintre cele mai bune practici pe care le puteți urma pentru a vă ajuta să scrieți codul React într-un mod mai eficient.

Să începem!

Provocări cu care reacționează dezvoltatorii

În această secțiune, vom discuta câteva dintre provocările majore cu care se confruntă dezvoltatorii React în timpul și după construirea aplicațiilor web.

Toate provocările pe care le veți vedea în această secțiune pot fi evitate urmând cele mai bune practici, pe care le vom discuta în detaliu mai târziu.

Vom începe cu cea mai de bază problemă care îi afectează pe începători.

Condiții preliminare pentru a reacționa

Una dintre provocările majore cu care se confruntă dezvoltatorii React este înțelegerea modului în care funcționează biblioteca, împreună cu cerințele prealabile pentru utilizarea acesteia.

Înainte de a învăța React, trebuie să cunoașteți câteva lucruri. Deoarece React folosește JSX, cunoașterea HTML și JavaScript este o necesitate. Desigur, ar trebui să cunoașteți și CSS sau un cadru CSS modern pentru proiectarea aplicațiilor dvs. web.

În special, există concepte și funcționalități de bază JavaScript pe care ar trebui să le cunoașteți înainte de a vă scufunda în React. Unele dintre ele, care se încadrează în cea mai mare parte sub ES6, includ:

  • Funcții săgeți
  • Operator de odihnă
  • Operator de răspândire
  • Module
  • Destructurarea
  • Metode de matrice
  • Literale șablon
  • Promisiuni
  • variabile let și const

Subiectele JavaScript enumerate mai sus vă vor ajuta să înțelegeți, ca începător, cum funcționează React.

De asemenea, veți învăța despre noi concepte în React, cum ar fi:

  • Componente
  • JSX
  • Conducerea statului
  • Recuzită
  • Elemente de randare
  • Gestionarea evenimentelor
  • Redare condiționată
  • Liste și chei
  • Formulare și validare de formulare
  • Cârlige
  • Styling

Având o înțelegere solidă a conceptelor React și a cerințelor prealabile pentru utilizarea bibliotecii vă va ajuta să utilizați funcțiile acesteia în mod eficient.

Dar nu lăsa asta să te copleșească. Cu practică și învățare constantă, puteți înțelege rapid cum să utilizați React pentru a construi proiecte minunate. Este similar cu învățarea unui nou limbaj de programare - este nevoie doar de puțin timp și de practică pentru a înțelege.

Managementul Statului

Actualizarea stării/valorii variabilelor dvs. în React funcționează diferit de modul în care ați face-o folosind JavaScript vanilla.

În JavaScript, actualizarea unei variabile este la fel de simplă ca și alocarea unei noi valori utilizând operatorul egal cu ( = ). Iată un exemplu:

 var x = 300; function updateX(){ x = 100; } updateX(); console.log(x); // 100

În codul de mai sus, am creat o variabilă numită x cu o valoare inițială de 300 .

Folosind operatorul egal cu, i-am atribuit o nouă valoare de 100 . Acest lucru a fost scris într-o funcție updateX .

În React, actualizarea stării/valorii variabilelor funcționează diferit. Iată cum:

 import { useState } from 'react'; function App() { const [x, setX] = useState(300) let updateX =()=>{ setX(100); } return ( <div className="App"> <h1>{x}</h1> <button onClick={updateX}>Update X</button> </div> ); } export default App;

Când actualizați starea unei variabile în React, utilizați useState Hook. Există trei lucruri de reținut atunci când utilizați acest Hook:

  • Numele variabilei
  • O funcție pentru actualizarea variabilei
  • Valoarea/starea inițială a variabilei

În exemplul nostru, x este numele variabilei, iar setX este funcția de actualizare a valorii lui x , în timp ce valoarea inițială ( 300 ) a lui x este transmisă ca parametru funcției useState :

 const [x, setX] = useState(300)

Pentru a actualiza starea lui x , am folosit funcția setX :

 import { useState } from 'react'; let updateX =()=>{ setX(100); }

Deci, funcția updateX invocă funcția setX , care apoi setează valoarea lui x la 100 .

Deși acest lucru pare să funcționeze perfect pentru actualizarea stării variabilelor dvs., crește complexitatea codului dvs. în proiecte foarte mari. Având o mulțime de State Hooks, codul este foarte greu de întreținut și de înțeles, mai ales pe măsură ce proiectul tău se extinde.

O altă problemă cu utilizarea State Hook este că aceste variabile create nu sunt partajate între diferitele componente care alcătuiesc aplicația dvs. Încă va trebui să folosiți Props pentru a trece datele de la o variabilă la alta.

Din fericire pentru noi, există biblioteci construite pentru a gestiona eficient managementul de stat în React. Ele vă permit chiar să creați o variabilă o dată și să o utilizați oriunde doriți în aplicația React. Unele dintre aceste biblioteci includ Redux, Recoil și Zustand.

Problema cu alegerea unei biblioteci terță parte pentru managementul statului este că ai fi forțat să înveți concepte noi străine de ceea ce ai învățat deja în React. Redux, de exemplu, era cunoscut pentru că are o mulțime de cod standard, ceea ce a făcut dificilă înțelegerea de către începători (deși acest lucru este remediat cu Redux Toolkit, care vă permite să scrieți mai puțin cod decât ați face cu Redux).

Mentenabilitatea și scalabilitatea

Pe măsură ce cerințele utilizatorului unui produs continuă să se schimbe, există întotdeauna nevoia de a introduce modificări la codul care alcătuiește produsul.

Este adesea dificil să-ți scalați codul atunci când acel cod nu este ușor de întreținut pentru echipă. Dificultăți ca acestea apar din urma practicilor proaste atunci când scrieți codul. Poate părea că funcționează perfect la început, oferindu-ți rezultatul dorit, dar orice funcționează „deocamdată” este ineficient pentru viitorul și creșterea proiectului tău.

În secțiunea următoare, vom trece peste câteva convenții care pot ajuta la îmbunătățirea modului în care scrieți codul React. Acest lucru vă va ajuta, de asemenea, să colaborați mai bine atunci când lucrați cu o echipă de profesioniști.

Cele mai bune practici React

În această secțiune, vom vorbi despre unele dintre cele mai bune practici de urmat atunci când scrieți codul dvs. React. Să ne scufundăm direct.

1. Mențineți structura clară a folderelor

Structurile de foldere vă ajută pe dvs. și pe alți dezvoltatori să înțelegeți aranjarea fișierelor și a activelor utilizate într-un proiect.

Cu o structură bună a dosarelor, este ușor să navigați cu ușurință, economisind timp și ajutând la evitarea confuziei. Structurile de foldere diferă în funcție de preferințele fiecărei echipe, dar iată câteva dintre structurile de foldere utilizate în mod obișnuit în React.

Gruparea folderelor după caracteristici sau rute

Gruparea fișierelor din dosarul dvs. în funcție de rutele și caracteristicile acestora vă ajută să păstrați totul despre o anumită caracteristică într-un singur spațiu. De exemplu, dacă aveți un tablou de bord pentru utilizator, puteți avea fișierele JavaScript, CSS și de testare referitoare la tabloul de bord într-un singur folder.

Iată un exemplu pentru a demonstra că:

 dashboard/ index.js dashboard.css dashboard.test.js home/ index.js Home.css HomeAPI.js Home.test.js blog/ index.js Blog.css Blog.test.js

După cum se poate vedea mai sus, fiecare caracteristică de bază a aplicației are toate fișierele și activele stocate în același folder.

Gruparea fișierelor similare

Alternativ, puteți grupa fișiere similare în același folder. De asemenea, puteți avea foldere individuale pentru cârlige, componente și așa mai departe. Consultați acest exemplu:

 hooks/ useFetchData.js usePostData.js components/ Dashboard.js Dashboard.css Home.js Home.css Blog.js Blog.css

Nu trebuie să urmați cu strictețe aceste structuri de foldere atunci când codați. Dacă aveți o modalitate specifică de a vă comanda fișierele, mergeți la el. Atâta timp cât tu și alți dezvoltatori aveți o înțelegere clară a structurii fișierelor, sunteți gata!

2. Instituiți o comandă de import structurată

Pe măsură ce aplicația dvs. React continuă să crească, sunteți obligat să faceți importuri suplimentare. Structura importurilor dumneavoastră vă ajută să înțelegeți ce compune componentele dumneavoastră.

Ca convenție, gruparea utilităților similare pare să funcționeze bine. De exemplu, puteți grupa importurile externe sau terțe părți separat de importurile locale.

Aruncă o privire la următorul exemplu:

 import { Routes, Route } from "react-router-dom"; import { createSlice } from "@reduxjs/toolkit"; import { Menu } from "@headlessui/react"; import Home from "./Home"; import logo from "./logo.svg"; import "./App.css";

În codul de mai sus, am grupat mai întâi biblioteci terțe (acestea sunt biblioteci pe care a trebuit să le instalăm în prealabil).

Apoi am importat fișiere pe care le-am creat local, cum ar fi foi de stil, imagini și componente.

De dragul simplității și al înțelegerii ușoare, exemplul nostru nu descrie o bază de cod foarte mare, dar țineți cont de consecvența cu acest format de importuri vă va ajuta pe dvs. și pe alți dezvoltatori să înțelegeți mai bine aplicația dvs. React.

Puteți continua să grupați fișierele locale în funcție de tipurile de fișiere, dacă acest lucru funcționează pentru dvs. - adică gruparea componentelor, imaginilor, foilor de stil, Hooks și așa mai departe separat sub importurile locale.

Iată un exemplu:

 import Home from "./Home"; import About from "./About" import Contact from "./Contact" import logo from "./logo.svg"; import closeBtn from "./close-btn.svg" import "./App.css"; import "Home.css"

3. Respectați convențiile de denumire

Convențiile de denumire ajută la îmbunătățirea lizibilității codului. Acest lucru nu este aplicabil numai numelor de componente, ci chiar și numelor dvs. de variabile, până la Hooks.

Documentația React nu oferă niciun model oficial pentru denumirea componentelor dumneavoastră. Cele mai utilizate convenții de denumire sunt camelCase și PascalCase.

PascalCase este folosit mai ales pentru numele componentelor:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

Componenta de mai sus se numește StudentList , care este mult mai ușor de citit decât Studentlist sau studentlist .

Pe de altă parte, convenția de denumire camelCase este folosită în principal pentru denumirea variabilelor, Hooks, funcții, matrice și așa mai departe:

 & const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {} const [firstName, setFirstName] = useState("Ihechikara"); const studentList = []; const studentObject = {}; const getStudent = () => {}

4. Folosiți un Linter

Un instrument linter ajută la îmbunătățirea calității codului. Unul dintre cele mai populare instrumente linter pentru JavaScript și React este ESlint. Dar cum anume ajută acest lucru la îmbunătățirea calității codului?

Un instrument linter ajută la coerența unei baze de cod. Când utilizați un instrument precum ESLint, puteți seta regulile pe care doriți să le respecte fiecare dezvoltator care lucrează la proiect. Aceste reguli pot include cerințe pentru utilizarea ghilimelelor duble în loc de ghilimele simple, acolade în jurul funcțiilor de săgeți, o anumită convenție de denumire și multe altele.

Instrumentul vă observă codul și apoi vă anunță când o regulă a fost încălcată. Cuvântul cheie sau rândul care încalcă regula ar fi de obicei subliniat cu roșu.

Deoarece fiecare dezvoltator are propriul stil de codare, instrumentele linter pot ajuta la uniformizarea codului.

Instrumentele Linter ne pot ajuta, de asemenea, să remediem erorile cu ușurință. Putem vedea erori de ortografie, variabile care au fost declarate, dar nu sunt utilizate și alte astfel de funcționalități. Unele dintre aceste erori pot fi remediate automat pe măsură ce codificați.

Instrumente precum ESLint sunt încorporate în majoritatea editorilor de cod, astfel încât să beneficiați de funcționalități linter din mers. De asemenea, îl puteți configura pentru a se potrivi cerințelor dvs. de codare.

5. Folosiți biblioteci de fragmente

Lucrul tare despre utilizarea unui cadru cu o comunitate activă este disponibilitatea instrumentelor create pentru a ușura dezvoltarea.

Bibliotecile de fragmente pot face dezvoltarea mai rapidă, oferind cod predefinit pe care dezvoltatorii îl folosesc des.

Un bun exemplu este extensia ES7+ React/Redux/React-Native pentru fragmente, care are o mulțime de comenzi utile pentru generarea codului predefinit. De exemplu, dacă doriți să creați o componentă funcțională React fără a tasta tot codul, tot ce trebuie să faceți folosind extensia este să tastați rfce și să apăsați Enter .

Comanda de mai sus va continua pentru a genera o componentă funcțională cu un nume care corespunde cu numele fișierului. Am generat codul de mai jos folosind extensia ES7+ React/Redux/React-Native pentru fragmente:

 import React from 'react' function StudentList() { return ( <div>StudentList</div> ) } export default StudentList

Un alt instrument util pentru fragmente este extensia Tailwind CSS IntelliSense, care simplifică procesul de stilare a paginilor web cu Tailwind CSS. Extensia vă poate ajuta cu completarea automată, sugerând clase de utilitate, evidențierea sintaxei și funcționalități de listing. Puteți chiar să vedeți cum arată culorile dvs. în timp ce codificați.

6. Combinați CSS și JavaScript

Când lucrați la proiecte mari, utilizarea fișierelor de foaie de stil diferite pentru fiecare componentă poate face structura fișierelor voluminoasă și dificil de navigat.

O soluție la această problemă este să combinați codul dvs. CSS și JSX. Puteți utiliza cadre/biblioteci precum Tailwind CSS și Emotion pentru aceasta.

Iată cum arată stilul cu Tailwind CSS:

 <p className="font-bold mr-8">resource edge</p>

Codul de mai sus dă elementului paragraf un font aldine și adaugă o marjă în partea dreaptă. Putem face acest lucru folosind clasele de utilitate ale cadrului.

Iată cum ați stila un element folosind Emotion:

 <h1 css={css` color: black; font-size: 30px; `} > Hello World! </h1>

7. Limitați crearea componentelor

Una dintre caracteristicile de bază ale React este reutilizarea codului. Puteți crea o componentă și reutiliza logica acesteia de cât mai multe ori posibil fără a rescrie acea logică.

Te lupți cu timpii de nefuncționare și problemele WordPress? Kinsta este soluția de găzduire concepută pentru a vă economisi timp! Verificați caracteristicile noastre

Având în vedere acest lucru, ar trebui să limitați întotdeauna numărul de componente pe care le creați. Dacă nu faceți acest lucru, structura fișierelor este umflată cu fișiere inutile care nu ar trebui să existe în primul rând.

Vom folosi un exemplu foarte ușor pentru a demonstra acest lucru:

 function UserInfo() { return ( <div> <h1>My name is Ihechikara.</h1> </div> ); } export default UserInfo

Componenta de mai sus arată numele unui utilizator. Dacă ar fi să creăm un fișier diferit pentru fiecare utilizator, în cele din urmă am avea un număr nerezonabil de fișiere. (Desigur, folosim informațiile utilizatorului pentru a menține lucrurile simple. Într-o situație din viața reală, este posibil să aveți de-a face cu un alt tip de logică.)

Pentru a face componenta noastră reutilizabilă, putem folosi elementele de recuzită. Iată cum:

 function UserInfo({userName}) { return ( <div> <h1>My name is {userName}.</h1> </div> ); } export default UserInfo

După aceea, putem importa această componentă și o putem folosi de câte ori vrem:

 import UserInfo from "./UserInfo"; function App() { return ( <div className="App"> <UserInfo userName={"Ihechikara"} /> <UserInfo userName={"John"} /> <UserInfo userName={"Jane"} /> </div> ); } export default App;

Acum avem trei instanțe diferite ale componentei UserInfo care provin din logica creată într-un singur fișier, în loc să avem trei fișiere separate pentru fiecare utilizator.

8. Implementați Lazy Loading

Încărcarea lenevă este foarte utilă pe măsură ce aplicația dvs. React crește. Când aveți o bază de cod mare, timpul de încărcare pentru paginile dvs. web încetinește. Acest lucru se datorează faptului că întreaga aplicație trebuie să fie încărcată de fiecare dată pentru fiecare utilizator.

„Încărcare lenenă” este un termen folosit pentru diverse implementări. Aici, îl asociem cu JavaScript și React, dar puteți implementa și încărcare leneșă pe imagini și videoclipuri.

În mod implicit, React grupează și implementează întreaga aplicație. Dar putem schimba acest comportament folosind încărcare lenenă, altfel cunoscută sub numele de divizare a codului.

Practic, puteți limita ce secțiune a aplicației dvs. este încărcată la un anumit punct. Acest lucru se realizează prin împărțirea pachetelor și încărcarea numai a celor relevante pentru cerințele utilizatorului. De exemplu, puteți încărca mai întâi numai logica necesară utilizatorului pentru a se conecta, apoi încărcați logica pentru tabloul de bord al utilizatorului numai după ce acesta s-a conectat cu succes.

9. Folosiți cârlige reutilizabile

Hooks în React vă permit să valorificați unele dintre funcționalitățile suplimentare ale React, cum ar fi interacțiunea cu starea componentei dvs. și rularea efectelor secundare în legătură cu anumite schimbări de stare ale componentei dvs. Putem face toate acestea fără a scrie componente ale clasei.

De asemenea, putem face Hooks reutilizabile, astfel încât să nu trebuie să reintroducem logica în fiecare fișier pe care îl folosesc. Facem acest lucru creând cârlige personalizate care pot fi importate oriunde în aplicație.

În exemplul de mai jos, vom crea un Hook pentru preluarea datelor de la API-uri externe:

 import { useState, useEffect } from "react"; function useFetchData(url) { const [data, setData] = useState(null); useEffect(() => { fetch(url) .then((res) => res.json()) .then((data) => setData(data)) .catch((err) => console.log(`Error: ${err}`)); }, [url]); return { data }; } export default useFetchData;

Am creat un Hook pentru preluarea datelor din API-urile de mai sus. Acum poate fi importat în orice componentă. Acest lucru ne scutește de stresul de a introduce toată această logică în fiecare componentă în care trebuie să obținem date externe.

Tipul de cârlige personalizate pe care le putem crea în React este nelimitat, așa că rămâne la latitudinea dvs. să decideți cum să le utilizați. Amintiți-vă doar că, dacă este o funcționalitate care trebuie repetată pe diferite componente, ar trebui să o faceți cu siguranță reutilizabilă.

10. Înregistrați și gestionați erorile

Există diferite moduri de a gestiona erorile în React, cum ar fi utilizarea limitelor de eroare, blocurile de încercare și capturare sau utilizarea bibliotecilor externe precum react-error-boundary .

Limitele de eroare încorporate care au fost introduse în React 16 au fost o funcționalitate pentru componentele clasei, așa că nu o vom discuta, deoarece este recomandabil să utilizați componente funcționale în loc de componente de clasă.

Pe de altă parte, utilizarea unui bloc try and catch funcționează numai pentru codul imperativ, dar nu și pentru codul declarativ. Aceasta înseamnă că nu este o opțiune bună atunci când lucrați cu JSX.

Cea mai bună recomandare a noastră ar fi să folosiți o bibliotecă precum react-error-boundary. Această bibliotecă oferă funcționalități care pot fi incluse în jurul componentelor dvs., care vă vor ajuta să detectați erorile în timp ce aplicația dvs. React este redată.

11. Monitorizați și testați codul dvs

Testarea codului în timpul dezvoltării vă ajută să scrieți cod care poate fi întreținut. Din păcate, acesta este un lucru pe care mulți dezvoltatori îl neglijează.

Deși mulți ar putea argumenta că testarea nu este o mare problemă atunci când vă construiți aplicația web, aceasta vine cu nenumărate avantaje. Iată doar câteva:

  • Testarea vă ajută să detectați erori și erori.
  • Detectarea erorilor duce la îmbunătățirea calității codului.
  • Testele unitare pot fi documentate pentru colectarea datelor și referințe viitoare.
  • Detectarea timpurie a erorilor vă scutește de costul plății dezvoltatorilor pentru a stinge incendiul pe care l-ar putea provoca eroarea dacă nu este verificată.
  • Aplicațiile și site-urile fără erori câștigă încredere și loialitate din partea publicului lor, ceea ce duce la o creștere mai mare.

Puteți folosi instrumente precum Jest sau React Testing Library pentru a vă testa codul. Există o mulțime de instrumente de testare din care puteți alege - totul se rezumă la cel care funcționează cel mai bine pentru dvs.

De asemenea, puteți testa aplicațiile React pe măsură ce le construiți, rulând aplicațiile în browser. De obicei, veți primi orice eroare detectată afișată pe ecran. Acest lucru este similar cu dezvoltarea site-urilor WordPress folosind DevKinsta - un instrument care vă permite să proiectați, să dezvoltați și să implementați site-uri WordPress pe mașina dvs. locală.

12. Utilizați componente funcționale

Utilizarea componentelor funcționale în React vine cu o mulțime de avantaje: scrieți mai puțin cod, este mai ușor de citit, iar versiunea beta a documentației oficiale React este rescrisă folosind componente funcționale (Hooks), așa că cu siguranță ar trebui să vă obișnuiți să le utilizați. .

Cu componente funcționale, nu trebuie să vă faceți griji cu privire la utilizarea this sau la utilizarea claselor. De asemenea, puteți gestiona cu ușurință starea componentei dvs. scriind mai puțin cod datorită Hooks.

Majoritatea resurselor actualizate pe care le-ați găsi pe React folosesc componente funcționale, ceea ce face ușor de înțeles și urmat ghiduri și resurse utile create de comunitate atunci când întâmpinați probleme.

13. Rămâneți la curent cu modificările versiunii React

Pe măsură ce trece timpul, vor fi introduse noi funcționalități, iar unele vechi vor fi modificate. Cel mai bun mod de a urmări acest lucru este să urmăriți documentația oficială.

De asemenea, vă puteți alătura comunităților React pe rețelele sociale pentru a obține informații despre schimbări atunci când acestea au loc.

Rămâneți la curent cu versiunea actuală de React vă va ajuta să determinați când să optimizați sau să faceți modificări în baza de cod pentru cea mai bună performanță.

Există, de asemenea, biblioteci externe construite în jurul React cu care ar trebui să fiți la curent, de asemenea, cum ar fi React Router, care este folosit pentru rutare în React. Cunoașterea modificărilor pe care le fac aceste biblioteci vă poate ajuta să faceți modificări importante relevante în aplicația dvs. și să ușurați lucrurile pentru toți cei care lucrează la proiect.

În plus, unele funcționalități pot deveni depreciate și anumite cuvinte cheie pot fi modificate atunci când sunt lansate versiuni noi. Pentru a fi în siguranță, ar trebui să citiți întotdeauna documentația și ghidurile atunci când se fac astfel de modificări.

14. Utilizați un furnizor de găzduire rapid și sigur

Dacă doriți să faceți aplicația dvs. web accesibilă tuturor după ce o construiți, va trebui să o găzduiți. Este important să utilizați un furnizor de găzduire rapid și sigur.

Găzduirea site-ului dvs. web vă oferă acces la diferite instrumente care facilitează scalarea și gestionarea site-ului dvs. Serverul pe care este găzduit site-ul dvs. web face posibil ca fișierele de pe computerul dvs. local să fie stocate în siguranță pe server. Beneficiul general al găzduirii site-ului dvs. este că alți oameni pot vedea lucrurile minunate pe care le-ați creat.

Există o varietate de platforme care oferă servicii de găzduire gratuite dezvoltatorilor precum Firebase, Vercel, Netlify, GitHub Pages sau servicii plătite precum Azure, AWS, GoDaddy, Bluehost și așa mai departe.

De asemenea, puteți utiliza platforma de găzduire a aplicațiilor Kinsta. Tot ce trebuie să faceți este să conectați un depozit GitHub, să alegeți dintre cele 25 de centre de date Kinsta poziționate la nivel global și să plecați. Veți primi acces la configurare rapidă, asistență 24/7, securitate de vârf, domenii personalizate, instrumente avansate de raportare și monitorizare și multe altele.

rezumat

A învăța cum să folosești React nu este tot ceea ce este necesar pentru a crea aplicații web remarcabile. Ca și în cazul oricărui alt cadru precum Angular, Vue și așa mai departe, există cele mai bune practici pe care ar trebui să le urmați pentru a vă ajuta să construiți produse eficiente.

Respectarea acestor convenții React nu numai că vă ajută aplicația, dar are și avantaje pentru dvs. ca dezvoltator frontend - învățați cum să scrieți cod eficient, scalabil și care poate fi întreținut și vă remarcați ca profesionist în domeniul dvs. Doriți să vă îmbunătățiți jocul de codare React? Tot ce trebuie să știi se află în acest ghid Click to Tweet

Prin urmare, atunci când creați următoarea aplicație web cu React, țineți cont de aceste bune practici pentru a face utilizarea și gestionarea produsului ușor atât pentru utilizatori, cât și pentru dezvoltatori.

Ce alte bune practici React cunoașteți și care nu au fost menționate în acest articol? Distribuiți-le în comentariile de mai jos. Codare fericită!