ReactJS-veiledning for nybegynnere: Lær med trinn for trinn-eksempel

Hva er ReactJS?

ReactJS er en åpen kildekode-frontend JavaSkriptbibliotek for å bygge brukergrensesnitt. ReactJS vedlikeholdes av Facebook og et fellesskap av individuelle utviklere og selskaper. Det er mye brukt som en base for å bygge enkeltside nettsteder og mobilapplikasjoner. Det er veldig enkelt å bruke, og det lar brukere lage gjenbrukbare UI-komponenter.

Funksjoner til ReactJS

JSX: JSX er en utvidelse til javascript. Selv om det ikke er obligatorisk å bruke JSX i react, er det en av de gode funksjonene og enkel å bruke.

komponenter: Komponenter er som rene javascript-funksjoner som bidrar til å gjøre koden enkel ved å dele opp logikken i gjenbrukbar uavhengig kode. Vi kan bruke komponenter som funksjoner og komponenter som klasser. Komponenter har også en tilstand, rekvisitter som gjør livet enkelt. Inne i en klasse opprettholdes tilstanden til hver av rekvisittene.

Virtuelt DOM: React oppretter en virtuell dom, dvs. datastruktur-cache i minnet. Bare de siste endringene av DOM har senere oppdatert i nettleserens DOM.

Javascript Uttrykkene: JS-uttrykk kan brukes i jsx-filene ved å bruke krøllede parenteser, for eksempel {}.

Fordeler med ReactJS

Her er viktige fordeler/fordeler med å bruke ReactJS:

ReactJS bruker virtuell dom som benytter seg av datastruktur-cache i minnet, og kun de siste endringene oppdateres i nettleserens dom. Dette gjør appen raskere.
Du kan lage komponenter etter eget valg ved å bruke react-komponentfunksjonen. Komponentene kan gjenbrukes og også nyttige i kodevedlikehold.
Reactjs er et åpen kildekode-javascript-bibliotek, så det er enkelt å begynne med.
ReactJS har blitt veldig populært på kort tid og vedlikeholdt av Facebook og Instagram. Den brukes av mange kjente selskaper som Apple, NetflixOsv
Facebook vedlikeholder ReactJS, biblioteket, så det er godt vedlikeholdt og holdes oppdatert.
ReactJS kan brukes til å utvikle et rikt brukergrensesnitt for både desktop- og mobilapper.
Enkel å feilsøke og teste ettersom det meste av kodingen er gjort i Javascript heller enn på HTML.

Ulemper med ReactJS

Her er ulemper/ulemper ved å bruke ReactJS:

Det meste av koden er skrevet i JSX, dvs. Html og css er en del av javascript, det kan være ganske forvirrende da de fleste andre rammeverk foretrekker å holde HTML adskilt fra javascript-koden.
Filstørrelsen til ReactJS er stor.

Bruker ReactJS fra CDN

For å begynne å jobbe med react, må vi først installere reactjs. Du kan enkelt komme i gang med å bruke reactjs ved å bruke CDN-javascript-filene, som vist nedenfor.

Gå til den offisielle siden til reactjs for å få CDN-koblingene, dvs. https://reactjs.org/docs/cdn-links.html og du vil få de nødvendige filene for å forklare følgende bilde.

For dev

<script crossorigin src="https://unpkg.com/react@version/umd/react.development.js"></script> 
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.development.js"></script>

For prod

<script crossorigin src="https://unpkg.com/react@version/umd/react.production.min.js"></script>		
<script crossorigin src="https://unpkg.com/react-dom@version/umd/react-dom.production.min.js"></script>

Erstatt versjon med den nyeste react-versjonen for både react-development.js og react-dom.developement.js. Du kan være vert for filene på slutten for å begynne å jobbe med reactjs.

Hvis du planlegger å bruke CDN-filene, sørg for å beholde cross-origin-attributtet for å unngå problemer på tvers av domener. Reactjs-kode kan ikke kjøres direkte i nettleseren og må transpireres ved hjelp av Babel til javascript før den kjøres i nettleseren.

Her er BabelJS-skriptet som kan brukes:

<script src="https://unpkg.com/[email protected]/babel.min.js"></script>

Her er det fungerende ReactJS-eksemplet som bruker cdn-filer og babeljs-skript.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World</title>
    <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>   
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  </head>
  <body> 
    <div id="app"></div>
    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, from Guru99 Tutorials!</h1>,
        document.getElementById('app')
      );
   </script>   
  </body>
</html>

Utgang:

Vi vil komme inn på detaljene i koden i neste kapittel, la oss se hvordan det fungerer her med CDN-filer. Det sies at å bruke babel-skript direkte ikke er en god praksis, og nykommere kan bare bruke det til å lære reactjs for nå. I produksjonen må du installere reagere ved å bruke npm-pakken.

Bruker NPM-pakker

Sørg for at du har nodejs installert. Hvis ikke installert, gå gjennom denne opplæringen for nodejs (https://www.guru99.com/node-js-tutorial.html) installasjon.

Når du har installert nodejs, oppretter du en mappe reactproj/.

For å starte med prosjektoppsett, kjør kommandoen npm init.

Slik vil mappestrukturen se ut:

reactproj\
package.json

Nå skal vi installere pakkene vi trenger.

Her er listen over pakker for reactjs:

npm install react --save-dev
npm install react-dom --save-dev
npm install react-scripts --save-dev

Åpne ledeteksten og kjør kommandoene over i mappen reactproj/.

Lag en mappe src / hvor all js-koden kommer i den mappen. All koden for reactjs-prosjektet vil være tilgjengelig i src/-mappen. Lag en fil index.js og legg til import react og react-dom, som vist nedenfor.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Vi har returnert den grunnleggende koden for reactjs. Vi vil forklare detaljene i det i neste kapittel. Vi ønsker å vise Hei, fra Guru99 Tutorials og det samme er gitt til dom-elementet med id "root". Det er hentet fra index.html-filen, som er startfilen, som vist nedenfor.

Opprett en mappe public/ og legg til index.html i den som vist nedenfor

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
   </body>
</html>

Pakkens react-scripts vil sørge for å kompilere koden og starte serveren for å vise html-filen, dvs. index.html. Du må legge til kommandoen i package.json som tar seg av å bruke react-scripts for å kompilere koden og starte serveren som vist nedenfor:

 "scripts": {
    "start": "react-scripts start" 
  }

Etter å ha installert alle pakkene og lagt til kommandoen ovenfor, er den endelige package.json som følger:

Package.json

{
  "name": "reactproj",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "react-scripts start"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "react": "^16.9.0",
    "react-dom": "^16.9.0",
    "react-scripts": "^3.1.1"
  }
}

For å begynne å teste reactjs kjør kommandoen

npm run start

C:\reactproj>npm run start		
> [email protected] start C:\reactproj		
> react-scripts start

Det vil åpne nettleseren med url http://localhost:3000/ som vist nedenfor:

public/index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Vi kommer til å bruke den samme prosessen for å kjøre javascript-filene i de neste kapitlene. Legg til alle js- og .jsx-filene dine i src/-mappen. Filstrukturen vil være som følger:

reatproj/
	 src/
	    index.js
	 node_modules/
	 public/
                index.html
	 package.json

Hvordan lage ditt første React-prosjektoppsett

Her er en trinnvis veiledning i denne ReactJS-veiledningen for å starte med den første react-applikasjonen.

Trinn 1) Importer reaksjonspakkene.
1. For å starte med ReactJS, må vi først importere react-pakkene som følger.

import React from 'react';	
import ReactDOM from 'react-dom';

2. Lagre filen som index.js i src/-mappen

Trinn 2) Skriv enkel kode.
Vi vil skrive en enkel kode i denne opplæringen React JS, der vi vil vise meldingen "Hei, fra Guru99 Tutorials!"

ReactDOM.render(

<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

ReactDOM.render vil legge til tag til elementet med id-rot. Her er html-filen vi har:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
  </head>
  <body>
    <div id = "root"></div>
  </body>
</html>

Trinn 3) Kompiler koden.

Neste i denne React.js-veiledningen må vi kompilere koden for å få utdata i nettleseren.

Her er mappestrukturen:

reactproj/
     node_modules/
     src/
       index.js
     package.json
     public/
          index.html

Vi har lagt til kommandoene for å kompilere den endelige filen i package.json som følger:

"scripts": {
    "start": "react-scripts start"
  },

For å kompilere den endelige filen, kjør følgende kommando:

npm run start

Når du kjører kommandoen ovenfor, vil den kompilere filene og varsle deg hvis det oppstår feil, hvis alt ser bra ut, vil det åpne nettleseren og kjøre index.html-filen på http://localhost:3000/index.html

Kommando: npm kjørestart:

C:\reactproj>npm run start

> [email protected] start C:\reactproj
> react-scripts start

Trinn 4) Sjekk utgang.
URL-en http://localhost:3000 åpnes i nettleseren når koden er kompilert som vist nedenfor:

Hva er JSX?

JSX er en utvidelse til javascript. Det er et malskript hvor du vil ha kraften til å bruke HTML og Javascript sammen.

Her er et enkelt eksempel på en JSX-kode.

const h1tag = "<h1>Hello, from Guru99 Tutorials!</h1>";

Hvorfor trenger vi JSX i React?

For et brukergrensesnitt trenger vi Html, og hvert element i domen vil ha hendelser som skal håndteres, tilstandsendringer osv.

I tilfelle React lar det oss bruke HTML og javascript i samme fil og ta oss av tilstandsendringene i domen på en effektiv måte.

Uttrykk i JSX

Her er et enkelt eksempel på hvordan du bruker uttrykk i JSX.

I tidligere ReactJS-eksempler hadde vi skrevet noe sånt som:

index.js

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
<h1>Hello, from Guru99 Tutorials!</h1>,
    document.getElementById('root')
);

Vi vil nå endre koden ovenfor for å legge til uttrykk. Uttrykk brukes innenfor krøllede parenteser {}, og de utvides i løpet av kjøretiden. Uttrykk i reager er det samme som javascript-uttrykk.

index.js

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, from Guru99 Tutorials!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

La oss nå teste det samme i nettleseren.

Du kan se at uttrykket {display} ikke er erstattet. React vet ikke hva de skal gjøre når et uttrykk brukes inne i .js-filen.

La oss nå legge til endringer og lage en .jsx-fil, som vist nedenfor:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const display = "Hello, to Guru99 Tutorials";
const h1tag =<h1>{display}</h1>;
export default h1tag;

Vi har lagt til den nødvendige koden og vil bruke text.jsx-filen i index.js.We want the h1tag variabel som skal brukes inne i script.js, så den samme eksporteres som vist ovenfor i test.jsx

Her er den modifiserte koden i index.js

import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

For å bruke test.jsx i index.js må vi først importere den som vist nedenfor:

import h1tag from './test.jsx';

Vi kan bruke h1tag nå i ReactDOM.render som vist nedenfor:

ReactDOM.render(
    h1tag,
    document.getElementById('root')
);

Her er utgangen når vi sjekker det samme i nettleseren:

Hva er komponenter i ReactJS?

Komponenter er som rene javascript-funksjoner som bidrar til å gjøre koden enkel ved å dele opp logikken i gjenbrukbar uavhengig kode.

Komponenter som funksjoner

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';
function Hello() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
} 
const Hello_comp = <Hello />;
export default Hello_comp;

Vi har laget en funksjon som heter Hallo som returnerte h1-tag som vist ovenfor. Navnet på funksjonen fungerer som et element, som vist nedenfor:

const Hello_comp = <Hello />;
export default Hello_comp;

Komponenten Hallo brukes som en HTML-kode, dvs. og tildelt til Hei_komp variabel og den samme eksporteres ved hjelp av eksport.

La oss nå bruke denne komponenten i index.js-filen som vist nedenfor:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Her er utdataene i nettleseren:

Klasse som komponent

Her er et ReactJS-eksempel som bruker en klasse som en komponent.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React. Component {
  render() {
    return <h1>Hello, from Guru99 Tutorials!</h1>;
  }
}
export default Hello;

Vi kan bruke Hello-komponenten i index.js-filen som følger:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Component Hello brukes som en HTML-tag, dvs. .

Her er utgangen av det samme.

Hva er en stat i ReactJS?

En tilstand er et javascript-objekt som ligner på rekvisitter som har data som skal brukes med reactjs-gjengivelsen. Tilstandsdataene er et privat objekt og brukes innenfor komponenter i en klasse.

Eksempel på stat

Her er et fungerende eksempel på hvordan du bruker tilstand i en klasse.

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
       msg: "Hello, from Guru99 Tutorials!"
    }
  }
  render() {
    return <h1>{this.state.msg}</h1>;
  }
}
export default Hello;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello />,
    document.getElementById('root')
);

Dette er hva vi får når vi tester det i nettleseren:

Hva er rekvisitter i ReactJS?

Rekvisitter er egenskaper som skal brukes inne i en komponent. De fungerer som globale objekter eller variabler som kan brukes inne i komponenten.

Rekvisitter til funksjonskomponent

Her er et eksempel på å sende rekvisitter til en funksjonskomponent.

import React from 'react';
import ReactDOM from 'react-dom';
function Hello(props) {
    return <h1>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Som vist ovenfor har vi lagt til msg tilskrive Komponent. Det samme kan nås som props inne i Hello-funksjonen, som er et objekt som vil ha msg attributtdetaljer, og det samme brukes som uttrykk.

Komponenten brukes i index.js som følger:

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './test.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Her er utdataene i nettleseren:

Rekvisitter til klassekomponent

For å få tilgang til rekvisittene i en klasse kan vi gjøre det som følger:

test.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Hello extends React.Component {
  render() {
    return <h1>{this.props.msg}</h1>;
  }
}
export default Hello;

De msg attributtet sendes til komponenten i index.js som følger:

import React from 'react';
import ReactDOM from 'react-dom';
import Hello from './test.jsx';

ReactDOM.render(
    <Hello msg="Hello, from Guru99 Tutorials!" />,
    document.getElementById('root')
);

Dette er utgangen i nettleseren:

Sjekk også: - AngularJS-veiledning for nybegynnere: Lær AngularJS trinn for trinn

Livssyklusen til en komponent

En komponents livssyklus er delt inn i initialiserings-, monterings-, oppdaterings- og avmonteringsstadier.

Her er en detaljert forklaring om hver komponent.

En komponent i reactjs har følgende stadier:

Initialisering: Dette er den første fasen av komponentens livssyklus.

Her vil den ha standard rekvisitter og tilstanden på det opprinnelige nivået.

Montering: I denne fasen blir komponenten gjengitt inne i domen. Vi har eksponering for følgende metoder i monteringstilstand.

componentDidMount(): Dette kalles også når komponenten nettopp er lagt til domen.

render(): Du har denne metoden for alle komponentene som er opprettet. Den returnerer HTML-noden.

Oppdater: I denne tilstanden samhandles domen av en bruker og oppdateres. For eksempel skriver du inn noe i tekstboksen, slik at tilstandsegenskapene oppdateres.

Følgende er tilgjengelige metoder i oppdateringstilstand:

shouldComponentUpdate() : kalles når komponenten er oppdatert.

componentDidUpdate() : etter at komponenten er oppdatert.

Avmontering: denne tilstanden kommer inn i bildet når komponenten ikke er nødvendig eller fjernet.

Følgende er tilgjengelige metoder i avmontert tilstand:

Component willUnmount(): kalles når komponenten er fjernet eller ødelagt.

Arbeidseksempel

Her er et fungerende eksempel som viser metodene som brukes i hver stat.

Eksempel: complife.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class COMP_LIFE extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }
  
  componentDidMount() {  
    console.log('Mounting State : calling method componentDidMount');
  }   
 
  shouldComponentUpdate() {  
    console.log('Update  State : calling method shouldComponentUpdate');
    return true;
  }  

  componentDidUpdate() {  
    console.log('Update  State : calling method componentDidUpdate')  
  }  
  componentWillUnmount() {  
    console.log('UnMounting State : calling method componentWillUnmount');
  }  

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default COMP_LIFE;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import COMP_LIFE from './complife.jsx';

ReactDOM.render(
    <COMP_LIFE />,
    document.getElementById('root')
);

Når du sjekker utgangen i nettleseren

I nettleserkonsollen får du:

Når brukeren kommer inn i tekstboksen:

I konsollen vises følgende meldinger:

Arbeid med skjemaer

I reactjs HTML-inndataelementer som , og <select /> har sin egen tilstand og må oppdateres når brukeren samhandler ved hjelp av setState()-metoden.

I dette kapittelet skal vi se hvordan du jobber med skjemaer i reactjs.

Her er et fungerende eksempel:

form.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class Form extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.formSubmit = this.formSubmit.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  formSubmit(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <form>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="submit" value="Submit" onClick={this.formSubmit} />
      </form>
    );
  }
}

export default Form;

For inndatafeltene må vi opprettholde tilstanden, så for det reagerer gir en spesiell metode kalt setState, som bidrar til å opprettholde staten når det skjer en endring.

Vi har brukt hendelser på Endre og på Klikk på tekstboksen og send inn-knappen. Når brukeren går inn i tekstboksen kalles onChange-hendelsen, og navnefeltet i tilstandsobjektets tilstand oppdateres som vist nedenfor:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Form from './form.jsx';

ReactDOM.render(
    <Form />,
    document.getElementById('root')
);

Utgangen i nettleseren er som følger:

Trinn 1) Skriv inn navnet ditt i tekstboksen:

Klikk på send-knappen

Jobber med hendelser i ReactJS

Å jobbe med hendelser i reactjs er det samme som du ville ha gjort i javascript. Du kan bruke alle hendelsesbehandlerne som brukes i javascript. Metoden setState() brukes til å oppdatere tilstanden når brukeren samhandler med et hvilket som helst HTML-element.

Her er et fungerende eksempel på hvordan du bruker hendelser i reactjs.

events.jsx

import React from 'react';
import ReactDOM from 'react-dom';
class EventTest extends React.Component {
  constructor(props) {
    super(props);
    this.state = {name: ''};

    this.UpdateName = this.UpdateName.bind(this);
    this.testclick = this.testclick.bind(this);
  }

  UpdateName(event) {
    this.setState({name: event.target.value});
  }
  
  testclick(event) {
    alert("The name entered is: "+ this.state.name);
  }

  render() {
    return (
      <div>        
         Enter Your Name:<input type="text" value={this.state.name} onChange={this.UpdateName} /><br/>        
        <h2>{this.state.name}</h2>
        <input type="button" value="Click Here" onClick={this.testclick} />
      </div>
    );
  }
}

export default EventTest;

For inndatafeltene må vi opprettholde tilstanden, så for det reagerer gir en spesiell metode kalt setState, som bidrar til å opprettholde staten når det skjer en endring.

Vi har brukt arrangementer på Endre og ved trykk på tekstboksen og knappen. Når brukeren går inn i tekstboksen på Endre hendelsen kalles, og navnefeltet i tilstandsobjektets tilstand oppdateres som vist nedenfor:

UpdateName(event) {
    this.setState({name: event.target.value});
  }

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import EventTest from './events.jsx';

ReactDOM.render(
    <EventTest />,
    document.getElementById('root')
);

Her er utdataene i nettleseren:

Når en bruker skriver inn navnet:

Når brukeren klikker på Klikk her-knappen:

Arbeide med Inline CSS i ReactJS

Vil ta en titt på et fungerende eksempel for å forstå hvordan inline css fungerer i reactjs.

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

const h1Style = {
    color: 'red'
};
  
function Hello(props) {
    return <h1 style={h1Style}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

Jeg har lagt til farge: 'rød' stil til h1-taggen.

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

Utgangen i nettleseren er som følger:

Du kan lage et stilobjekt du vil ha på elementet og bruke et uttrykk for å legge til stil, som vist i eksempelet ovenfor.

Arbeide med ekstern CSS i ReactJS

La oss lage en ekstern css, for det lage en mappe css/ og legge til style.css i den.

style.css

.h1tag {
color:red;
}

Legg til style.css i index.html-filen

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>ReactJS Demo</title> 
    <link href="css/style.css" rel="stylesheet" type="text/css" />
  </head> 
  <body>
    <div id = "root"></div>
    <script src = "out/script.min.js"></script>
  </body>
</html>

La oss nå legge til klassen i h1-taggen i .jsx-filen

addstyle.jsx

import React from 'react';
import ReactDOM from 'react-dom';

let classforh1 = 'h1tag';
  
function Hello(props) {
    return <h1 className={classforh1}>{props.msg}</h1>;
}  
const Hello_comp = <Hello msg="Hello, from Guru99 Tutorials!" />;
export default Hello_comp;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Hello_comp from './addstyle.jsx';

ReactDOM.render(
    Hello_comp,
    document.getElementById('root')
);

className-attributtet er gitt klassedetaljene. La oss nå teste i nettleseren.

Dette er hva du ser når du inspiserer h1-taggen i nettleseren:

Du kan se at class=" h1tag" er lagt til h1-taggen.

Oppsummering

ReactJS er en åpen kildekode-frontend JavaSkriptbibliotek for å bygge brukergrensesnittet. Det vedlikeholdes av Facebook og brukes av mange selskaper i dag for utvikling av brukergrensesnitt.
Kjernefunksjonene til ReactJS inkluderer JSX, komponenter (funksjonelle komponenter og klassebaserte komponenter), livssyklusen til en komponent, rekvisitter og statlig støtte for en komponent, som arbeider med javascript-uttrykk.
Prosjektoppsett av ReactJS er forklart ved hjelp av CDN-filer og også bruk av npm-pakker for å bygge prosjektet.
JSX er en utvidelse til javascript. Det er et malskript hvor du kan bruke HTML og javascript sammen.
Komponenter er som rene javascript-funksjoner som bidrar til å gjøre koden enkel ved å dele opp logikken i gjenbrukbar uavhengig kode.
En tilstand er et javascript-objekt som ligner på rekvisitter som har data som skal brukes med reactjs-gjengivelsen. Tilstandsdataene er et privat objekt og brukes innenfor komponenter i en klasse.
Rekvisitter er egenskaper som skal brukes inne i en komponent.
En komponents livssyklus er delt inn i initialiserings-, monterings-, oppdaterings- og avmonteringsstadier.
I reactjs html-inndataelementer som , og <select /> har sin egen tilstand og må oppdateres når brukeren interagerer ved hjelp av setState()-metoden.
Å jobbe med hendelser i reactjs er det samme som du ville ha gjort i javascript. Du kan bruke alle hendelsesbehandlerne som brukes i javascript. Metoden setState() brukes til å oppdatere tilstanden når brukeren samhandler med et hvilket som helst HTML-element.
ReactJS lar deg jobbe med ekstern css så vel som inline css ved å bruke javascript-uttrykk.

Sjekk også: - Topp 70 React-intervjuspørsmål og -svar (oppdatert)

Du vil kanskje like:

5 BESTE React-kurs med...

Hva er ReactJS?

Funksjoner til ReactJS

Fordeler med ReactJS

Ulemper med ReactJS

Bruker ReactJS fra CDN

For dev

For prod

RELATERTE ARTIKLER

Bruker NPM-pakker

Hvordan lage ditt første React-prosjektoppsett

Hva er JSX?

Hvorfor trenger vi JSX i React?

Uttrykk i JSX

Hva er komponenter i ReactJS?

Komponenter som funksjoner

Klasse som komponent

Hva er en stat i ReactJS?

Eksempel på stat

Hva er rekvisitter i ReactJS?

Rekvisitter til funksjonskomponent

Rekvisitter til klassekomponent

Livssyklusen til en komponent

Arbeidseksempel

Arbeid med skjemaer

Jobber med hendelser i ReactJS

Arbeide med Inline CSS i ReactJS

Arbeide med ekstern CSS i ReactJS

Oppsummering