Această postare este împărțită în 2 părți

  1. Prima parte demonstrează cum să creați o aplicație simplă React folosind CLI „create-react-app” și explică structura proiectului.
  2. A doua parte explică un cod existent pe care l-am postat în Github. Acest cod demonstrează utilizarea componentelor, comunicarea între componente, efectuarea apelurilor HTTP și React Bootstrap (bootstrap care este scris pentru React).

Partea 1

Instalați NodeJS dacă nu este deja prezent

NodeJS este necesar, deoarece bibliotecile necesare pentru React sunt descărcate folosind managerul de pachete nod (npm). A se referi la https://nodejs.org/en/ pentru a instala NodeJS.

Instalați pachetul Node create-react-app

creați-reacționați-aplicație pachetul nod ajută la configurarea unui proiect React. Instalați pachetul de nod create-react-app la nivel global utilizând următoarea comandă.

npm install -g create-react-app

Creați proiectul

Proiectul poate fi creat folosind creați-reacționați-aplicație. Utilizați următoarea comandă pentru a crea proiectul.

npx create-react-app first-react-app

aplicația pentru prima reacție este numele aplicației. Comanda de mai sus creează un folder numit aplicația pentru prima reacție care este folderul proiectului. Pentru a testa dacă totul a fost configurat corect, intrați în folderul proiectului și porniți aplicația folosind următoarea comandă.

cd first-react-app
npm start

Accesați browserul și accesați următoarea adresă URL localhost: 3000
Ar trebui să puteți vedea că aplicația dvs. rulează. Aplicația va arăta astfel în browserul dvs.:

Un ghid rapid pentru a va ajuta sa intelegeti si

Structura de bază a folderului explicată

Când ați creat proiectul, ați fi observat că a creat o grămadă de fișiere. Aici voi lista câteva dintre fișierele și folderele importante pe care ar trebui să le cunoașteți.

  1. package.json: Acest fișier are lista dependențelor nodului necesare.
  2. public / index.html: Când aplicația pornește, aceasta este prima pagină încărcată. Acesta va fi singurul fișier html din întreaga aplicație, deoarece React este în general scris folosind JSX pe care o voi acoperi mai târziu. De asemenea, acest fișier are o linie de cod

    . Această linie este foarte semnificativă, deoarece toate componentele aplicației sunt încărcatedila acest div.

  3. src / index.js: Acesta este fișierul javascript corespunzător index.html. Acest fișier are următoarea linie de cod, care este foarte semnificativă. ReactDOM.render (, document.getElementById (‘root’));
  4. Linia de cod de mai sus spune asta Aplicație Componenta (va acoperi Componenta aplicației în curând) trebuie încărcată într-un element html cu id rădăcină. Acesta nu este altceva decât div element prezent în index.html.
  5. src / index.css: Fișierul CSS corespunzător index.js.
  6. src / App.js : Acesta este fișierul pentru Aplicație Componenta. Aplicație Componenta este componenta principală din React care acționează ca un container pentru toate celelalte componente.
  7. src / App.css : Acesta este fișierul CSS corespunzător Aplicație Componenta
  8. construi: Acesta este folderul în care sunt stocate fișierele construite. Aplicațiile React pot fi dezvoltate folosind fie JSX, fie JavaScript normal, însă utilizarea JSX face cu siguranță lucrurile mai ușor de codat pentru dezvoltator :). Dar browserele nu înțeleg JSX. Deci, JSX trebuie să fie convertit în javascript înainte de implementare. Aceste fișiere convertite sunt stocate în folderul de compilare după grupare și minimizare. Pentru a vedea folderul de construire Rulați următoarea comandă
npm run build 

Crearea componentelor

O componentă din React are o funcționalitate specifică. O aplicație nu este altceva decât o colecție de componente. Fiecare componentă poate avea mai multe componente secundare și componentele pot comunica între ele.

Să creăm o componentă React acum.

Interior src folder creați un fișier numit ca FirstComponent.js și copiați următorul cod în FirstComponent.js.

import React, {Component} from 'react';

export default class FirstComponent extends Component {

constructor(props) {
    super(props)
    }

render() {
    const element = (<div>Text from Element</div>)
    return (<div className="comptext">
    <h3>First Component</h3>
        {this.props.displaytext}
        {element}
    </div>)
    }
}
  1. Numele componentei este FirstComponent care este notat prin numele fișierului, precum și în declarație export default class FirstComponent extends Component
  2. recuzită atributul din constructor va conține toți parametrii care sunt trecuți ca intrare pentru această componentă.
  3. face(): Valoarea returnată a acestei funcții este redată (afișată) pe ecran. Ori de câte ori funcția render () este numită, ecranul este redat. În general, acest lucru se face automat de către aplicație. Codul care arată foarte asemănător cu html în această funcție nu este altceva decât JSX.

JSX

JSX arată foarte asemănător cu HTML, dar are toată puterea javascriptului. Aici voi explica codul JSX și ce încearcă să facă.

render() {
    const element = (<div>Text from Element</div>)
    return (<div className="comptext">
    <h3>First Component</h3>
        {this.props.displaytext}
        {element}
    </div>)
    }

Prima linie const element = (<div>Text from Element</div>) Creează un element div și îl atribuie unei constante numită element. Această sintaxă particulară pe care o vedeți este nudar JSX.

În declarația Return, vedeți următoarea sintaxă a codului.

<div className="comptext">
    <h3>First Component</h3>
        {this.props.displaytext}
        {element}
</div>

Aici numele clasei este folosit pentru a indica o clasă CSS. <h3>First Component</h3> este doar o sintaxă html normală. {this.props.displaytext} este folosit pentru a accesa un atribut numit ca text afișat din recuzită (deci textul afișat este transmis ca intrare ori de câte ori este chemată această componentă). Aici text afișat este doar un nume personalizat pe care l-am dat. {element} este constanta care a fost creată, care la rândul său conține elementul div.

Utilizarea componentei

FirstComponent a fost creat, dar nu este folosit încă nicăieri. Să adăugăm FirstComponent la Aplicație Componenta. Iată codul modificat pentru App.js

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
import FirstComponent from './FirstComponent'
class App extends Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        <FirstComponent displaytext="First Component Data"/>
      </div>
);
  }
}
export default App;

FirstComponent trebuie să fie importat în App Component First care se face în linie import FirstComponent from ‘./FirstComponent’

Apoi FirstComponent se adaugă la Aplicație Componenta folosind linia <FirstComponent displaytext=”First Component Data”/>

Aici text afișat este transmis ca atribut către FirstComponent.

Acum puteți rula aplicația folosind comanda npm start

Ar trebui să vedeți următorul rezultat în browser.

1611939550 351 Un ghid rapid pentru a va ajuta sa intelegeti si

Felicitări?

Acum știți cum să creați o aplicație React și cum să creați și să utilizați componente React. Știi puțin și despre JSX 🙂

Următoarea parte va explica un cod React existent de la Github. Codul din partea 2 este diferit de codul pe care l-am scris în partea 1.

Partea 2

Cod

Codul următor este explicat aici, deci clonați repo în computer. Repo are instrucțiuni despre cum să clonați și să configurați codul în computer.

https://github.com/aditya-sridhar/simple-reactjs-app

Adresa URL a aplicației

Pentru a vedea cum arată aplicația finală, puteți face clic pe următoarea adresă URL. Acest lucru vă va oferi o idee bună despre ceea ce încearcă să facă aplicația

https://aditya-sridhar.github.io/simple-reactjs-app

Aplicația ar arăta astfel într-un ecran mobil

1611939550 165 Un ghid rapid pentru a va ajuta sa intelegeti si

Ce face această aplicație

Această aplicație afișează o listă de clienți. Când este selectat un client, acesta afișează detaliile clientului selectat. Aceasta este o aplicație cu o singură pagină (SPA). React este cel mai potrivit pentru aplicațiile cu o singură pagină. Aplicațiile cu o singură pagină afișează totul într-o singură pagină.

Structura aplicației explicată

Clienți Componenta

Această componentă afișează lista clienților. Aceasta corespunde fișierului src / Customers.js . Această componentă are următorul constructor.

constructor(props) {
    super(props)
    this.state = {
        selectedCustomer: 1
    }
}

recuzită au fost deja explicate. Dar aici vezi și tu acesta.stat. Ori de câte ori starea se modifică, componenta este redată. Aici stat are un parametru numit selectat Client care este de a urmări ce client este selectat. Dacă selectat Client se schimbă apoi componentă și componentele sale copil sunt redate. Constructorul este folosit doar pentru setare recuzită și stat. De asemenea, recuzită ar trebui să să nu fie editat niciodată în interiorul unei componente.

Următorul lucru pe care îl observați este următorul cod.

componentDidMount() {
    this.getCustomerData();
}

componentDidMount () este o funcție care se numește imediat ce componenta este redată. Deci, acest lucru poate fi folosit pentru a seta unele valori inițiale, precum și pentru a încărca date. Aici se numește o funcție numită as getCustomerData ()

Următoarea bucată de cod pe care o vedeți este

getCustomerData() {
    axios.get('assets/samplejson/customerlist.json').then(response => {
        this.setState({customerList: response})
    })
};

Această funcție getCustomerData () efectuează un apel HTTP pentru a citi exemplul json care conține lista de clienți de la assets / samplejson / customerlist.json. La obținerea unui răspuns cu succes, starea sistemului este modificată, prin atribuirea fișierului raspuns la Listă de clienți. S-ar putea să vă întrebați de ce nu am adăugat niciodată lista de clienți în constructor. Motivul este că puteți adăuga parametri dinamic în stat în orice punct al codului. Singura cerință este ca în constructor să fie definit cel puțin o stare goală.

Aici axios biblioteca este utilizată pentru a efectua apelul HTTP. Am furnizat documentația pentru axios în secțiunea Referințe.

Următoarea funcție este face() funcție care returnează ce elemente trebuie redate pe ecran. Principalele puncte de focalizare în funcția de redare sunt

<Button bsStyle="info" onClick={() => this.setState({selectedCustomer: customer.id})}>

Click to View Details

</Button>

Fiecare client din listă are un buton numit ca Faceți clic pentru a vizualiza detalii. Fragmentul de cod de mai sus spune că ori de câte ori se face clic pe buton, atunci modificați starea de selectat Client la ID-ul clienților selectați. Deoarece starea se schimbă aici, componenta și componenta sa secundară vor fi redate.

Celălalt fragment de cod important este

<CustomerDetails val={this.state.selectedCustomer}/>

Acest fragment spune asta Detalii Client este o componentă copil a Clienți componentă și, de asemenea, trece selectedCustomer id ca intrare pentru Detalii Client componentă

Componenta CustomerDetails

Această componentă afișează detaliile Clientului selectat. Unele fragmente de cod importante din această componentă vor fi explicate aici:

componentDidUpdate(prevProps) {

//get Customer Details only if props has changed
//(props is the input) 
    if (this.props.val !== prevProps.val) {
        this.getCustomerDetails(this.props.val)
    }
}

componentDidUpdate () funcția este apelată ori de câte ori componenta este redată. Aici sunăm getCustomerDetails () Funcționează dacă intrarea pentru această componentă s-a modificat când componenta a fost redată. Intrarea a fost transmisă către getCustomerDetails () funcția este this.props.val. this.props.val la rândul său, își ia valoarea de la Clienți Componentă (Clientul selectat a fost transmis ca intrare la acest lucru). Pentru a ști dacă s-a modificat intrarea, fragmentul de cod utilizat este this.props.val !== prevProps.val

getCustomerDetails(id) {
    axios.get('assets/samplejson/customer' + id + '.json').then(response => {
        this.setState({customerDetails: response})
    })
};

getCustomerDetails () funcția efectuează un apel HTTP pentru a obține exemplul json care conține detaliile clientului. id parametrul este utilizat pentru a ști care sunt detaliile clienților. id nu este altceva decât this.props.val. Când răspunsul este primit cu succes, starea acestei componente este modificată prin atribuire raspuns la Detalii Client.

face() funcția pentru această componentă este destul de simplă și simplă, așa că nu va acoperi asta aici

Referințe

creați-reacționați-aplicație: A se referi la https://github.com/facebook/create-react-app pentru a afla ce se poate face cu ajutorul create-react-app

ReactJS: A se referi la https://reactjs.org/ pentru a înțelege conceptele ReactJS. Documentația este foarte bună.

React Bootstrap: A se referi la https://react-bootstrap.github.io/getting-started/introduction/ pentru a înțelege cum să utilizați React Bootstrap

axios: A se referi la https://www.npmjs.com/package/axios pentru a afla mai multe despre cum să utilizați biblioteca axios pentru a face cereri HTTP

Felicitări din nou?

Acum știți cum să utilizați componente, cum să comunicați de la un părinte la un component copil și, de asemenea, puțin despre redare

Conceptele de bază au fost tratate în această postare și sper că acest lucru vă va fi de ajutor

Despre autor

Ador tehnologia și urmăresc progresele în tehnologie. De asemenea, îmi place să îi ajut pe ceilalți cu orice cunoștințe pe care le am în spațiul tehnologic.

Nu ezitați să vă conectați cu mine pe contul meu LinkdIn https://www.linkedin.com/in/aditya1811/

Poți să mă urmărești și pe twitter https://twitter.com/adityasridhar18

Site-ul meu: https://adityasridhar.com/

Alte postări relevante făcute de mine

Un ghid rapid pentru a vă ajuta să înțelegeți și să creați aplicații Angular 6

O introducere rapidă la Vue.js