Opprett React App, lag din første applikasjon med React Ubuntu 20.04

I neste artikkel skal vi ta en titt på hvordan vi kan lage vår første applikasjon med ReactJS på Ubuntu 20.04 ved hjelp av Create React App. ReactJS er et JavaScript-bibliotek med åpen kildekode som brukes til å opprette brukergrensesnittet, vedlikeholdt av Facebook og utviklerfellesskapet. ReactJS kan brukes i utviklingen av webapplikasjoner eller mobilapplikasjoner.

I React, også kjent som ReactJS, blir dataene behandlet i DOM. Ytterligere biblioteker for ruting og statsadministrasjon kreves for å kjøre React-applikasjonen. Noen eksempler på disse bibliotekene er Redux y Reager ruter.

Installere React på Ubuntu 20.04

For å installere React på systemet vårt, må vi først vite hva npm er og forstå hvorfor vi trenger dem. Npm står for Node Package Manager, og det er verdens største programvareregister for åpen kildekode. Inneholder mer enn 800.000 XNUMX kodepakker. Npm er gratis å bruke, og all offentlig programvare kan lastes ned og brukes uten registrering eller pålogging.

Npm er et avhengighetsstyringsverktøy for javascript-applikasjoner, som hjelper til med å installere alle biblioteker og andre verktøy for å støtte utviklingen av JS-applikasjonene.

Installer npm

Til installer nodejs, som inkluderer npm, vi trenger bare å åpne en terminal (Ctrl + Alt + T) og utføre følgende kommando:

sudo apt install nodejs

Etter å ha fullført npm-installasjonen, kan vi sjekk din versjon og den til node. Vi kan gjøre dette med kommandoen:

npm -v

Versjonen av npm som er installert, avhenger av installasjonsdatoen, siden oppdateringen utføres ofte. Det er nødvendig at vi sørger for at vi har installert en versjon høyere enn 5.

Til sjekk installert versjon av node, vil kommandoen å bruke være:

node -v

Hvis du ikke har den nyeste versjonen av npm installert på systemet ditt, du kan oppdatere Node Package Manager (npm) til den nyeste versjonen kjører denne kommandoen i terminalen:

sudo npm install -g npm@latest

Installer create-react-app

For å installere et produktivt React-miljø, trenger vi å konfigurere verktøy som babel, webpack, etc ... som er komplisert å konfigurere for nybegynnere i React-verdenen. Men vi kan finne flere verktøy som vil hjelpe oss i konfigurasjonen. Blant dem vil vi finne create-react-app, som er det enkleste verktøyet å bruke og konfigurere.

Create React App er et behagelig miljø å lære React, og det er den beste måten å begynne å bygge en ny enkeltsidesapp med React.

Create React App konfigurer utviklingsmiljøet ditt slik at du kan bruke de nyeste Javascript-funksjonene, gi en god utviklingsopplevelse og optimalisere applikasjonen din for produksjon. Som angitt på nettstedet deres, er det nødvendig å ha Node> = 8.10 og npm> = 5.6 installert på maskinen din.

Det kan vi installer create-react-app ved hjelp av npm. For å gjøre dette, i en terminal (Ctrl + Alt + T) trenger vi bare å utføre følgende installasjonskommando:

sudo npm install -g create-react-app

Når installasjonen av create-react-app-applikasjonen er ferdig i systemet vårt, kan vi sjekk den installerte versjonen utføre følgende kommando:

create-react-app --version

Opprette det første React-programmet

Vår første React-app kan opprettes ganske enkelt ved hjelp av create-react-app. Vi trenger bare å bruke følgende kommando:

create-react-app mi-primera-app

Ovennevnte kommando skal lage et React-program som heter min første app. Samtidig en ny mappe med samme navn på applikasjonen vil bli opprettet som inkluderer alle nødvendige filer, konfigurasjoner og biblioteker.

Kjører React-appen

Når React-prosjektet er opprettet, Vi må flytte til prosjektkatalogen og kjøre React-applikasjonen ved hjelp av følgende kommando i terminal (Ctrl + Alt + T):

npm start

Kommandoen npm start start utviklingsserveren som skal utføre hele byggeprosessen.

Terminalen vil fortelle oss at vi må åpne nettleseren og last inn applikasjonen som kjører på URL http: // localhost: 3000 som standard. Når nettleseren åpnes, ser vi React-logoen og tekstene på skjermen.

Avinstaller create-react-app og npm

Brukere vi kan avinstallere ethvert bibliotek installert fra npm ved hjelp av kommandoen npm avinstallere. Kjør følgende kommando i terminalen (Ctrl + Alt + T) for å avinstallere skape reagere-app:

sudo npm uninstall -g create-react-app

På samme måte kan vi avinstallere npm bruker denne andre kommandoen i samme terminal:

sudo apt remove nodejs

Mer informasjon om dette JavaScript-biblioteket for å lage brukergrensesnitt finner du i prosjektdokumentasjon.