Create React App, crea la teva primera aplicació amb React Ubuntu 20.04

En el següent article anem a fer una ullada a com podem crear la nostra primera aplicació amb ReactJS en Ubuntu 20.04 utilitzant Create React App. ReactJS és una biblioteca JavaScript de codi obert que s'utilitza per crear la interfície d'usuari, mantinguda per Facebook i la comunitat de desenvolupadors. ReactJS es pot utilitzar en el desenvolupament d'aplicacions web o aplicacions mòbils.

A React, també conegut com ReactJS, Les dades es processen en el DOM. Per executar l'aplicació React es requereixen biblioteques addicionals per a la gestió de l'estat i l'enrutament. Alguns exemples d'aquestes biblioteques són Redux y React Router.

Instal·lació de React en Ubuntu 20.04

Per instal·lar React en el nostre sistema, primer hem de saber què és NPM i comprendre per què els necessitem. NPM són les sigles de Node Package Manager, I és el registre de programari de codi obert més gran de món. Conté més de 800.000 paquets de codis. NPM és d'ús gratuït i qualsevol programari públic es pot descarregar i utilitzar sense necessitat de registrar ni d'iniciar sessió.

NPM és una eina d'administració de dependències per a aplicacions javascript, Que ajuda a instal·lar totes les biblioteques i altres eines per recolzar el desenvolupament de les aplicacions JS.

instal·lar NPM

Per a la instal·lar nodejs, que inclou NPM, No tindrem més que obrir una terminal (Ctrl + Alt + T) i executar la següent comanda:

sudo apt install nodejs

Després de finalitzar la instal·lació de NPM, podem verificar la seva versió i la de node. Això podrem fer-ho amb la comanda:

npm -v

La versió de NPM instal·lada depèn de la data d'instal·lació, ja que l'actualització es realitza amb freqüència. Cal que ens assegurem de tenir instal·lada una versió superior a la 5.

Per a la comprovar la versió instal·lada de node, La comanda a utilitzar serà:

node -v

Si no tens l'última versió de NPM instal·lada en el teu sistema, pots actualitzar Node Package Manager (NPM) a l'última versió executant aquesta comanda a la terminal:

sudo npm install -g npm@latest

Instal·lar create-react-app

Per instal·lar un entorn productiu de React, necessitarem configurar eines com babel, webpack, etc ... la qual cosa és complex de configurar per a principiants en el món React. Però podem trobar diverses eines que ens resultaran d'ajuda en la configuració. Entre elles trobarem create-react-app, que és l'eina més senzilla d'utilitzar i configurar.

Create React App és un ambient còmode per aprendre React, I és la millor manera de començar a construir una nova aplicació de pàgina única usant React.

Create React App configura el teu ambient de desenvolupament de manera que puguis fer servir les últimes característiques de Javascript, brindant una bona experiència de desenvolupament, i optimitzant la teva aplicació per a producció. Segons indiquen a la seva web, cal tenir Node> = 8.10 i NPM> = 5.6 instal·lats en la teva màquina.

podrem instal·lar create-react-app utilitzant NPM. Per a això, en un terminal (Ctrl + Alt + T) només necessitarem executar la següent comanda d'instal·lació:

sudo npm install -g create-react-app

Un cop finalitzada la instal·lació de l'aplicació create-react-app en el nostre sistema, podem verificar la versió instal·lada executant la següent comanda:

create-react-app --version

Creant la primera aplicació React

La nostra primera aplicació React es pot crear simplement usant create-react-app. Tan sols haurem d'utilitzar la següent comanda:

create-react-app mi-primera-app

La comanda anterior crearà una aplicació React anomenada la meva-primera-app. A el mateix temps es crearà una nova carpeta amb el mateix nom de l'aplicació que inclou tots els arxius, configuracions i biblioteques necessàries.

Executant l'aplicació React

Una vegada que es crea el projecte React, haurem de moure'ns a directori de el projecte i executar l'aplicació React usant el següent comandament a la terminal (Ctrl + Alt + T):

npm start

la comanda NPM start inicia el servidor de desenvolupament que realitzarà tot el procés de compilació.

La terminal ens va a indicar que hem obrir el navegador i carregar l'aplicació que s'executarà en la URL http: // localhost: 3000 per defecte. Quan s'obri el navegador, veurem en pantalla el logotip i textos de React.

Desinstal create-react-app i NPM

Els usuaris podrem desinstal·lar qualsevol biblioteca instal·lada des NPM utilitzant la comanda de desinstal de NPM. Executa la següent comanda a la terminal (Ctrl + Alt + T) per desinstal·lar crear-reaccionar-aplicació:

sudo npm uninstall -g create-react-app

De manera similar, podrem desinstal·lar NPM utilitzant aquest altre comando a la mateixa terminal:

sudo apt remove nodejs

Es pot obtenir més informació sobre aquesta biblioteca estigui habilitat per a crear interfícies d'usuari a la documentació de el projecte.