Uuden React-projektin aloittaminen on erittäin monimutkaista, koska siinä on niin monia rakennustyökaluja. Se käyttää monia riippuvuuksia, määritystiedostoja ja muita vaatimuksia, kuten Babel, Webpack, ESLint, ennen kuin kirjoittaa yhden rivin React-koodia. Create React App CLI -työkalu poistaa kaikki monimutkaiset asiat ja tekee React-sovelluksesta yksinkertaisen. Tätä varten sinun on asennettava paketti NPM:n avulla ja suoritettava sitten muutama yksinkertainen komento saadaksesi uusi React-projekti.

The luo-reagoi-sovellus on erinomainen työkalu aloittelijoille, jonka avulla voit luoda ja suorittaa React-projektin erittäin nopeasti. Se ei tee mitään konfigurointia manuaalisesti. Tämä työkalu käärii kaikki tarvittavat riippuvuudet, kuten Verkkopaketti , Babel itse React-projektille ja sitten sinun on keskityttävä vain React-koodin kirjoittamiseen. Tämä työkalu määrittää kehitysympäristön, tarjoaa erinomaisen kehittäjäkokemuksen ja optimoi sovelluksen tuotantoa varten.

Vaatimukset

Create React -sovellusta ylläpitää Facebook ja voi toimia millä tahansa alusta , esimerkiksi macOS, Windows, Linux jne. Jos haluat luoda React-projektin käyttämällä create-react-app -sovellusta, sinun on asennettava seuraavat asiat järjestelmääsi.

1. Solmun versio >= 8.10
2. NPM-versio >= 5.6

Katsotaanpa nykyisen version Solmu ja NPM järjestelmässä.

Suorita seuraava komento tarkistaaksesi Node-version komentokehotteessa.

 $ node -v 

Suorita seuraava komento tarkistaaksesi NPM-version komentokehotteessa.

 $ npm -v 

Asennus

Täällä opimme kuinka voimme asentaa Reactin käyttämällä CRA työkalu. Tätä varten meidän on noudatettava alla annettuja vaiheita.

Asenna React

Voimme asentaa Reactin npm-paketinhallinnan avulla käyttämällä seuraavaa komentoa. React-asennuksen monimutkaisuudesta ei tarvitse huolehtia. Create-react-app npm-paketinhallinta hallitsee kaikkea React-projektiin tarvittavaa.

 C:Usersjavatpoint> npm install -g create-react-app 

Luo uusi React-projekti

Kun React-asennus on onnistunut, voimme luoda uuden React-projektin komennolla create-react-app. Tässä valitsen projektilleni 'reactprojektin' nimen.

 C:Usersjavatpoint> create-react-app reactproject 

HUOMAUTUS:Voimme yhdistää yllä olevat kaksi vaihetta yhdessä komennossa käyttämällänpx. Npx on pakettityökalu, jonka mukana tulee npm 5.2 ja uudempi versio.

 C:Usersjavatpoint> npx create-react-app reactproject 

Yllä oleva komento kestää jonkin aikaa ennen kuin React asennetaan ja luodaan uusi projekti nimeltä 'reactproject'. Nyt voimme nähdä terminaalin kuten alla.

Yllä oleva näyttö kertoo, että React-projekti on luotu onnistuneesti järjestelmässämme. Nyt meidän on käynnistettävä palvelin, jotta voimme käyttää sovellusta selaimessa. Kirjoita seuraava komento pääteikkunaan.

 $ cd Desktop $ npm start 

NPM on paketinhallintaohjelma, joka käynnistää palvelimen ja käyttää sovellusta oletuspalvelimessa http://localhost:3000. Nyt saamme seuraavan näytön.

Avaa seuraavaksi projekti koodieditorissa. Tässä käytän Visual Studio Codea. Projektimme oletusrakenne näyttää alla olevan kuvan mukaiselta.

React-sovelluksessa juurihakemistossa on useita tiedostoja ja kansioita. Jotkut niistä ovat seuraavat:

node_modules:Se sisältää React-kirjaston ja muut tarvittavat kolmannen osapuolen kirjastot.julkinen:Se pitää hallussaan sovelluksen julkista omaisuutta. Se sisältää index.html-tiedoston, jossa React asentaa sovelluksen oletusarvoisesti elementtiin.src:Se sisältää App.css-, App.js-, App.test.js-, index.css-, index.js- ja serviceWorker.js-tiedostot. Tässä App.js-tiedosto on aina vastuussa tulosnäytön näyttämisestä Reactissa.package-lock.json:Se luodaan automaattisesti kaikille toiminnoille, joissa npm-paketti muuttaa joko puuta node_modules tai package.json-tiedostoa. Sitä ei voi julkaista. Se jätetään huomioimatta, jos se löytää jonkin muun paikan huipputason paketin sijaan.package.json:Se sisältää erilaisia ​​projektiin tarvittavia metatietoja. Se antaa tietoa npm:lle, jonka avulla projektin tunnistaminen ja sen riippuvuuksien käsittely on mahdollista.README.md:Se tarjoaa dokumentaatiota React-aiheista lukemiseen.

React Environment Setup

Avaa nyt src >> App.js tiedosto ja tee muutokset, jotka haluat näyttää näytöllä. Kun olet tehnyt haluamasi muutokset, Tallentaa tiedosto. Heti kun tallennamme tiedoston, Webpack kääntää koodin uudelleen, ja sivu päivittyy automaattisesti ja muutokset näkyvät selaimen näytössä. Nyt voimme luoda niin monta komponenttia kuin haluamme, tuoda juuri luodun komponentin sisään App.js tiedosto ja tämä tiedosto sisällytetään pääkansioomme index.html tiedosto Webpackin kääntämisen jälkeen.

Seuraavaksi, jos haluamme tehdä projektin tuotantotilaa varten, kirjoita seuraava komento. Tämä komento luo tuotantokoonnoksen, joka on parhaiten optimoitu.

 $ npm build