ReactJS Tutorial for begyndere: Lær med et trin for trin eksempel

Hvad er ReactJS?

ReactJS er en open source-frontend JavaScriptbibliotek til opbygning af brugergrænseflader. ReactJS vedligeholdes af Facebook og et fællesskab af individuelle udviklere og virksomheder. Det bruges i vid udstrækning som en base til at bygge enkeltsidede websteder og mobilapplikationer. Det er meget nemt at bruge, og det giver brugerne mulighed for at oprette genbrugelige UI-komponenter.

Funktioner af ReactJS

JSX: JSX er en udvidelse til javascript. Selvom det ikke er obligatorisk at bruge JSX i react, er det en af de gode funktioner og nem at bruge.

komponenter: Komponenter er som rene javascript-funktioner, der hjælper med at gøre koden let ved at opdele logikken i genanvendelig uafhængig kode. Vi kan bruge komponenter som funktioner og komponenter som klasser. Komponenter har også en tilstand, rekvisitter, som gør livet nemt. Inde i en klasse opretholdes tilstanden for hver af rekvisitterne.

Virtuelt DOM: React opretter en virtuel dom, dvs. datastruktur-cache i hukommelsen. Kun de sidste ændringer af DOM er senere blevet opdateret i browserens DOM.

Javascript Udtryk: JS-udtryk kan bruges i jsx-filerne ved hjælp af krøllede parenteser, for eksempel {}.

Fordele ved ReactJS

Her er vigtige fordele/fordele ved at bruge ReactJS:

ReactJS bruger virtuelt dom, der gør brug af in-memory data-struktur cache, og kun de sidste ændringer opdateres i browserens dom. Dette gør appen hurtigere.
Du kan oprette komponenter efter eget valg ved at bruge reaktionskomponentfunktionen. Komponenterne kan genbruges og også nyttige i kodevedligeholdelse.
Reactjs er et open source javascript-bibliotek, så det er nemt at starte med.
ReactJS er blevet meget populær på kort tid og vedligeholdes af Facebook og Instagram. Det bruges af mange berømte virksomheder som Apple, NetflixOsv
Facebook vedligeholder ReactJS, biblioteket, så det er velholdt og opdateret.
ReactJS kan bruges til at udvikle rig UI til både desktop- og mobilapps.
Let at fejlfinde og teste, da det meste af kodningen er udført i Javascript i stedet for på HTML.

Ulemper ved ReactJS

Her er ulemper/ulemper ved at bruge ReactJS:

Det meste af koden er skrevet i JSX, dvs. Html og css er en del af javascript, det kan være ret forvirrende, da de fleste andre frameworks foretrækker at holde HTML adskilt fra javascript-koden.
Filstørrelsen på ReactJS er stor.

Brug af ReactJS fra CDN

For at begynde at arbejde med react skal vi først installere reactjs. Du kan nemt komme i gang med at bruge reactjs ved at bruge CDN-javascript-filerne, som vist nedenfor.

Gå til det officielle websted for reactjs for at få CDN-links, dvs. https://reactjs.org/docs/cdn-links.html og du får de nødvendige filer til at forklare det følgende billede.

Til 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>

Til 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>

udskifte udgave med den seneste react-version til både react-development.js og react-dom.developement.js. Du kan hoste filerne i din ende for at begynde at arbejde med reactjs.

Hvis du planlægger at bruge CDN-filerne, skal du sørge for at beholde cross-origin-attributten for at undgå problemer på tværs af domæner. Reactjs-koden kan ikke udføres direkte i browseren og skal transpireres ved hjælp af Babel til javascript før den udføres i browseren.

Her er BabelJS-scriptet, der kan bruges:

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

Her er det fungerende ReactJS-eksempel ved hjælp af cdn-filer og babeljs-script.

<!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>

Output:

Vi vil komme ind på detaljerne i koden i det næste kapitel, lad os se, hvordan vi arbejder her med CDN-filer. Det siges, at det ikke er en god praksis at bruge babel-script direkte, og nybegyndere kan bare bruge det til at lære reactjs indtil videre. I produktionen skal du installere react ved hjælp af npm-pakken.

Brug af NPM-pakker

Sørg for at du har nodejs installeret. Hvis det ikke er installeret, skal du gennemgå denne tutorial for nodejs (https://www.guru99.com/node-js-tutorial.html) installation.

Når du har installeret nodejs, skal du oprette en mappe reactproj/.

For at starte med projektopsætning skal du køre kommandoen npm init.

Sådan vil mappestrukturen se ud:

reactproj\
package.json

Nu vil vi installere de pakker, vi har brug for.

Her er listen over pakker til reactjs:

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

Åbn kommandoprompten og kør ovenstående kommandoer inde i mappen reactproj/.

Opret en mappe src / hvor al js-koden kommer i den mappe. Al koden til reactjs-projektet vil være tilgængelig i src/-mappen. Opret en fil index.js og tilføj 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 returneret den grundlæggende kode for reactjs. Vi vil forklare detaljerne om det i næste kapitel. Vi vil gerne vise Hej fra Guru99 Tutorials og det samme gives til dom-elementet med id "root". Det er taget fra filen index.html, som er startfilen, som vist nedenfor.

Opret en mappe public/ og tilføj 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 at kompilere koden og starte serveren for at vise html-filen, dvs. index.html. Du skal tilføje kommandoen i package.json, der tager sig af at bruge react-scripts til at kompilere koden og starte serveren som vist nedenfor:

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

Efter at have installeret alle pakkerne og tilføjet ovenstående kommando, 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 at begynde at teste reactjs skal du køre kommandoen

npm run start

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

Det vil åbne browser 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 vil også bruge den samme proces til at udføre javascript-filerne i de næste kapitler. Tilføj alle dine js- og .jsx-filer i src/-mappen. Filstrukturen vil være som følger:

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

Sådan opretter du dit første React-projektopsætning

Her er en trin-for-trin guide i denne ReactJS-tutorial for at starte med den første react-applikation.

Trin 1) Importer reaktionspakkerne.
1. For at starte med ReactJS skal vi først importere react-pakkerne som følger.

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

2. Gem filen som index.js i mappen src/

Trin 2) Skriv simpel kode.
Vi vil skrive en simpel kode i denne tutorial React JS, hvor vi viser beskeden "Hej, fra Guru99 Tutorials!"

ReactDOM.render(

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

ReactDOM.render vil tilføje tag til elementet med id root. 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>

Trin 3) Kompiler koden.

Næste i denne React.js Tutorial skal vi kompilere koden for at få output i browseren.

Her er mappestrukturen:

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

Vi har tilføjet kommandoerne til at kompilere den endelige fil i package.json som følger:

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

For at kompilere den endelige fil skal du køre følgende kommando:

npm run start

Når du kører ovenstående kommando, vil den kompilere filerne og give dig besked, hvis der er nogen fejl, hvis alt ser godt ud, vil det åbne browseren og køre filen index.html på http://localhost:3000/index.html

Kommando: npm run start:

C:\reactproj>npm run start

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

Trin 4) Tjek output.
URL-adressen http://localhost:3000 åbnes i browseren, når koden er kompileret som vist nedenfor:

Hvad er JSX?

JSX er en udvidelse til javascript. Det er et skabelonscript, hvor du vil have kraften til at bruge HTML og Javascript sammen.

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

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

Hvorfor har vi brug for JSX i React?

Til en brugergrænseflade har vi brug for HTML, og hvert element i dom'en vil have hændelser, der skal håndteres, tilstandsændringer osv.

I tilfælde af React giver det os mulighed for at gøre brug af Html og javascript i samme fil og tage os af tilstandsændringerne i domen på en effektiv måde.

Udtryk i JSX

Her er et simpelt eksempel på, hvordan man bruger udtryk i JSX.

I tidligere ReactJS-eksempler havde vi skrevet noget 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 nu ændre ovenstående kode for at tilføje udtryk. Udtryk bruges inden for krøllede parenteser {}, og de udvides under kørselstiden. Udtryk i reaktion er det samme som javascript-udtryk.

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')
);

Lad os nu teste det samme i browseren.

Du kan se, at udtrykket {display} ikke er erstattet. React ved ikke, hvad man skal gøre, når et udtryk bruges inde i .js-filen.

Lad os nu tilføje ændringer og oprette 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 tilføjet den nødvendige kode og vil bruge filen text.jsx i index.js. Vi vil have den h1tag variabel, der skal bruges inde i script.js, så den samme eksporteres som vist ovenfor i test.jsx

Her er den ændrede kode i index.js

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

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

For at bruge test.jsx i index.js skal vi først importere det som vist nedenfor:

import h1tag from './test.jsx';

Vi kan bruge h1tag'et nu i ReactDOM.render som vist nedenfor:

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

Her er outputtet, når vi tjekker det samme i browseren:

Hvad er komponenter i ReactJS?

Komponenter er som rene javascript-funktioner, der hjælper med at gøre koden let ved at opdele logikken i genanvendelig uafhængig kode.

Komponenter som funktioner

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 lavet en funktion kaldet Hej der returnerede h1-tag som vist ovenfor. Navnet på funktionen fungerer som et element, som vist nedenfor:

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

Komponenten Hej bruges som et HTML-tag, dvs. og tildelt til Hej_komp variabel og samme eksporteres ved hjælp af eksport.

Lad os nu bruge denne komponent i filen index.js 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 output i browseren:

Klasse som komponent

Her er et ReactJS-eksempel, der bruger 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 bruge 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')
);

Komponenten Hello bruges som et HTML-tag, dvs. .

Her er output af det samme.

Hvad er en stat i ReactJS?

En tilstand er et javascript-objekt, der ligner rekvisitter, der har data, der skal bruges med reactjs-gengivelsen. Tilstandsdataene er et privat objekt og bruges i komponenter inde i en klasse.

Eksempel på stat

Her er et fungerende eksempel på, hvordan man bruger 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, hvad vi får, når vi tester det i browseren:

Hvad er Props i ReactJS?

Rekvisitter er egenskaber, der skal bruges inde i en komponent. De fungerer som globale objekter eller variabler, der kan bruges inde i komponenten.

Rekvisitter til funktionskomponent

Her er et eksempel på at overføre rekvisitter til en funktionskomponent.

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 tilføjet msg tilskrive Komponent. Det samme kan tilgås som rekvisitter inde i Hello-funktionen, som er et objekt, der vil have msg attribut detaljer, og det samme bruges som udtryk.

Komponenten bruges 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 output i browseren:

Rekvisitter til klassekomponent

For at få adgang til rekvisitterne i en klasse kan vi gø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;

msg attribut overføres 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 output i browseren:

Tjek også:- AngularJS Tutorial for begyndere: Lær AngularJS trin for trin

En komponents livscyklus

En komponentlivscyklus er opdelt i initialiserings-, monterings-, opdaterings- og afmonteringsstadier.

Her er en detaljeret forklaring om hver komponent.

En komponent i reactjs har følgende trin:

Initialisering: Dette er den første fase af komponentens livscyklus.

Her vil den have standard rekvisitter og tilstand på det indledende niveau.

Montering: I denne fase gengives komponenten inde i dom. Vi udsættes for følgende metoder i monteringstilstand.

componentDidMount(): Dette kaldes også, når komponenten lige er tilføjet til dom.

render(): Du har denne metode til alle de oprettede komponenter. Det returnerer HTML-noden.

Opdatering: I denne tilstand interageres dom'et af en bruger og opdateres. For eksempel indtaster du noget i tekstboksen, så tilstandsegenskaberne opdateres.

Følgende er de tilgængelige metoder i opdateringstilstand:

shouldComponentUpdate(): kaldes, når komponenten er opdateret.

componentDidUpdate() : efter at komponenten er opdateret.

Afmontering: denne tilstand kommer ind i billedet, når komponenten ikke er påkrævet eller fjernet.

Følgende er de tilgængelige metoder i afmonteringstilstand:

Component willUnmount(): kaldes når komponenten fjernes eller destrueres.

Arbejdseksempel

Her er et fungerende eksempel, som viser de metoder, der bruges 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 tjekker outputtet i browseren

I browserkonsollen får du:

Når brugeren indtaster i tekstboksen:

I konsollen vises følgende meddelelser:

Arbejde med formularer

I reactjs HTML-input elementer som , og <select /> har deres egen tilstand og skal opdateres, når brugeren interagerer ved hjælp af setState() metoden.

I dette kapitel vil vi se, hvordan man arbejder med formularer 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 inputfelterne skal vi vedligeholde tilstanden, så for at reagere giver en speciel metode kaldet setState, som er med til at opretholde staten, når der sker en ændring.

Vi har brugt begivenheder på Skift og på Klik på tekstboksen og send knappen. Når brugeren kommer ind i tekstboksen kaldes onChange-hændelsen, og navnefeltet inde i tilstandsobjektets tilstand opdateres 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')
);

Outputtet i browseren er som følger:

Trin 1) Indtast dit navn i tekstboksen:

Klik på knappen Send

Arbejde med begivenheder i ReactJS

At arbejde med begivenheder i reactjs er det samme, som du ville have gjort i javascript. Du kan bruge alle de hændelseshandlere, der bruges i javascript. Metoden setState() bruges til at opdatere tilstanden, når brugeren interagerer med et hvilket som helst HTML-element.

Her er et fungerende eksempel på, hvordan man bruger hændelser 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 inputfelterne skal vi vedligeholde tilstanden, så for at reagere giver en speciel metode kaldet setState, som er med til at opretholde staten, når der sker en ændring.

Vi har brugt arrangementer vi ændrer os og onclick på tekstboksen og knappen. Når brugeren kommer ind i tekstboksen vi ændrer os hændelsen kaldes, og navnefeltet i tilstandsobjektets tilstand opdateres 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 output i browseren:

Når en bruger indtaster navnet:

Når brugeren klikker på knappen Klik her:

Arbejde med Inline CSS i ReactJS

Vil tage et kig på et fungerende eksempel for at 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 tilføjet farve: 'rød' stil til h1-tagget.

index.js

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

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

Outputtet i browseren er som følger:

Du kan oprette et stilobjekt, som du ønsker på elementet, og bruge et udtryk til at tilføje stil, som vist i eksemplet ovenfor.

Arbejde med ekstern CSS i ReactJS

Lad os oprette en ekstern css , for at oprette en mappe css/ og tilføje style.css i den.

style.css

.h1tag {
color:red;
}

Tilføj style.css til din index.html fil

<!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>

Lad os nu tilføje klassen til h1-tagget 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')
);

Klassenavn-attributten får klassedetaljerne. Lad os nu teste i browseren.

Dette er, hvad du ser, når du inspicerer h1-tagget i browseren:

Du kan se, at class=" h1tag" er tilføjet med succes til h1-tagget.

Resumé

ReactJS er en open source-frontend JavaScriptbibliotek til at bygge brugergrænsefladen. Det vedligeholdes af Facebook og bruges af mange virksomheder i dag til UI-udvikling.
Kernefunktionerne i ReactJS inkluderer JSX, komponenter (funktionelle komponenter og klassebaserede komponenter), en komponents livscyklus, rekvisitter og statsstøtte til en komponent, der arbejder med javascript-udtryk.
Projektopsætning af ReactJS er forklaret ved hjælp af CDN-filer og også ved hjælp af npm-pakker til at bygge projektet.
JSX er en udvidelse til javascript. Det er et skabelonscript, hvor du kan bruge HTML og javascript sammen.
Komponenter er som rene javascript-funktioner, der hjælper med at gøre koden let ved at opdele logikken i genanvendelig uafhængig kode.
En tilstand er et javascript-objekt, der ligner rekvisitter, der har data, der skal bruges med reactjs-gengivelsen. Tilstandsdataene er et privat objekt og bruges i komponenter inde i en klasse.
Rekvisitter er egenskaber, der skal bruges inde i en komponent.
En komponentlivscyklus er opdelt i initialiserings-, monterings-, opdaterings- og afmonteringsstadier.
I reactjs html input elementer som , og <select /> har deres egen tilstand og skal opdateres, når brugeren interagerer ved hjælp af setState()-metoden.
At arbejde med begivenheder i reactjs er det samme, som du ville have gjort i javascript. Du kan bruge alle de hændelseshandlere, der bruges i javascript. Metoden setState() bruges til at opdatere tilstanden, når brugeren interagerer med et hvilket som helst HTML-element.
ReactJS giver dig mulighed for at arbejde med ekstern css såvel som inline css ved hjælp af javascript-udtryk.

Tjek også:- Top 70 React Interview Spørgsmål og Svar (Opdateret)

Du kan lide:

5 Bedste React-kurser med…

Hvad er ReactJS?

Funktioner af ReactJS

Fordele ved ReactJS

Ulemper ved ReactJS

Brug af ReactJS fra CDN

Til dev

Til prod

RELATEREDE ARTIKLER

Brug af NPM-pakker

Sådan opretter du dit første React-projektopsætning

Hvad er JSX?

Hvorfor har vi brug for JSX i React?

Udtryk i JSX

Hvad er komponenter i ReactJS?

Komponenter som funktioner

Klasse som komponent

Hvad er en stat i ReactJS?

Eksempel på stat

Hvad er Props i ReactJS?

Rekvisitter til funktionskomponent

Rekvisitter til klassekomponent

En komponents livscyklus

Arbejdseksempel

Arbejde med formularer

Arbejde med begivenheder i ReactJS

Arbejde med Inline CSS i ReactJS

Arbejde med ekstern CSS i ReactJS

Resumé