Maak een React-app, maak uw eerste applicatie met React Ubuntu 20.04

In het volgende artikel gaan we het bekijken hoe we onze eerste applicatie kunnen maken met ReactJS op Ubuntu 20.04 met behulp van Create React App​ ReactJS is een open source JavaScript-bibliotheek die wordt gebruikt om de gebruikersinterface te maken, onderhouden door Facebook en de ontwikkelaarsgemeenschap. ReactJS kan worden gebruikt bij de ontwikkeling van webapplicaties of mobiele applicaties.

In React, ook bekend als ReactJSworden de gegevens verwerkt in de DOM​ Extra bibliotheken voor routering en statusbeheer zijn vereist om de React-applicatie uit te voeren. Enkele voorbeelden van deze bibliotheken zijn Redux y Reageer router.

React installeren op Ubuntu 20.04

Om React op ons systeem te installeren, moeten we eerst weten wat npm is en begrijpen waarom we ze nodig hebben. Npm staat voor Node Package Manager, en het is 's werelds grootste open source software-register. Bevat meer dan 800.000 codepakketten. Npm is gratis te gebruiken en alle openbare software kan worden gedownload en gebruikt zonder registratie of inloggen.

Npm is een hulpprogramma voor afhankelijkheidsbeheer voor javascript-applicaties, wat helpt bij het installeren van alle bibliotheken en andere tools om de ontwikkeling van de JS-applicaties te ondersteunen.

Installeer npm

naar installeer nodejs, inclusief npm, we hoeven alleen een terminal te openen (Ctrl + Alt + T) en het volgende commando uit te voeren:

sudo apt install nodejs

Nadat de npm-installatie is voltooid, kunnen we controleer uw versie en die van node​ We kunnen dit doen met het commando:

npm -v

De geïnstalleerde versie van npm is afhankelijk van de installatiedatum, aangezien de update regelmatig wordt uitgevoerd. Het is noodzakelijk dat we ervoor zorgen dat we een versie hoger dan 5 hebben geïnstalleerd.

naar controleer de geïnstalleerde versie van het knooppunt, zal het te gebruiken commando zijn:

node -v

Als u niet de nieuwste versie van npm op uw systeem heeft geïnstalleerd, u kunt Node Package Manager (npm) bijwerken naar de nieuwste versie deze opdracht uitvoeren in terminal:

sudo npm install -g npm@latest

Installeer create-react-app

Om een ​​productieve React-omgeving te installeren, moeten we tools configureren zoals babel, webpack, enz ... wat moeilijk te configureren is voor beginners in de React-wereld. Maar we kunnen verschillende tools vinden die ons zullen helpen bij de configuratie. Onder hen zullen we vinden create-react-app, de gemakkelijkste tool om te gebruiken en te configureren.

Create React App is een comfortabele omgeving om React te leren, en het is de beste manier om te beginnen met het bouwen van een nieuwe app met één pagina met React.

Create React App configureer uw ontwikkelomgeving zodat u de nieuwste Javascript-functies kunt gebruiken, een goede ontwikkelervaring kunt bieden en uw applicatie voor productie kunt optimaliseren. Zoals aangegeven op hun website, is het noodzakelijk om Node> = 8.10 en npm> = 5.6 op uw computer te hebben geïnstalleerd.

We kunnen installeer create-react-app met npm​ Om dit te doen, hoeven we in een terminal (Ctrl + Alt + T) alleen de volgende installatieopdracht uit te voeren:

sudo npm install -g create-react-app

Zodra de installatie van de create-react-app-applicatie in ons systeem is voltooid, kunnen we controleer de geïnstalleerde versie het volgende commando uitvoeren:

create-react-app --version

De eerste React-applicatie maken

Onze eerste React-app kan eenvoudig worden gemaakt met de create-react-app​ We hoeven alleen het volgende commando te gebruiken:

create-react-app mi-primera-app

De bovenstaande opdracht gaat een React-applicatie maken met de naam mijn-eerste-app​ Tegelijkertijd er wordt een nieuwe map gemaakt met dezelfde naam als de applicatie die alle benodigde bestanden, configuraties en bibliotheken bevat.

De React-app uitvoeren

Zodra het React-project is gemaakt, we zullen naar de projectdirectory moeten gaan en de React-applicatie moeten uitvoeren met behulp van de volgende opdracht in terminal (Ctrl + Alt + T):

npm start

Het commando npm begin start de ontwikkelserver die het hele bouwproces zal uitvoeren.

De terminal zal ons vertellen dat we moeten open de browser en laad de applicatie die standaard wordt uitgevoerd op de URL http: // localhost: 3000​ Wanneer de browser wordt geopend, zien we het React-logo en de teksten op het scherm.

Verwijder create-react-app en npm

Gebruikers we kunnen elke bibliotheek die is geïnstalleerd vanaf npm verwijderen met de opdracht npm verwijderen​ Voer de volgende opdracht uit in terminal (Ctrl + Alt + T) om de installatie ongedaan te maken maak-reageer-app:

sudo npm uninstall -g create-react-app

Evenzo kunnen we verwijder npm met behulp van deze andere opdracht in dezelfde terminal:

sudo apt remove nodejs

Meer informatie over deze JavaScript-bibliotheek voor het maken van gebruikersinterfaces is te vinden in het project documentatie.