ReactJS-handledning för nybörjare

By: James Hartman James Hartman
Hours Uppdaterad

Vad är ReactJS?

ReactJS är ett gränssnitt med öppen källkod JavaSkriptbibliotek för att bygga användargränssnitt. ReactJS underhålls av Facebook och en grupp av enskilda utvecklare och företag. Det används ofta som bas för att bygga ensidiga webbplatser och mobilapplikationer. Det är mycket lätt att använda, och det tillåter användare att skapa återanvändbara UI-komponenter.

Funktioner hos ReactJS

JSX: JSX är ett tillägg till javascript. Även om det inte är obligatoriskt att använda JSX i react, är det en av de bra funktionerna och lätt att använda.

Komponenter: Komponenter är som rena javascript-funktioner som hjälper till att göra koden enkel genom att dela upp logiken i återanvändbar oberoende kod. Vi kan använda komponenter som funktioner och komponenter som klasser. Komponenter har också ett tillstånd, rekvisita som gör livet enkelt. Inuti en klass bibehålls tillståndet för varje rekvisita.

Virtuell DOM: React skapar en virtuell dom, dvs. datastrukturcache i minnet. Endast de sista ändringarna av DOM har senare uppdaterats i webbläsarens DOM.

Javascript Uttryck: JS-uttryck kan användas i jsx-filerna med hjälp av parenteser, till exempel {}.

Fördelar med ReactJS

Här är viktiga fördelar/fördelar med att använda ReactJS:

  • ReactJS använder virtuell dom som använder sig av datastrukturcache i minnet, och endast de sista ändringarna uppdateras i webbläsarens dom. Detta gör appen snabbare.
  • Du kan skapa komponenter som du väljer genom att använda funktionen för reaktionskomponenter. Komponenterna kan återanvändas och även till hjälp vid kodunderhåll.
  • Reactjs är ett JavaScript-bibliotek med öppen källkod, så det är lätt att börja med.
  • ReactJS har blivit mycket populärt på kort tid och underhålls av Facebook och Instagram. Det används av många kända företag som Apple, NetflixEtc.
  • Facebook underhåller ReactJS, biblioteket, så det är väl underhållet och uppdaterat.
  • ReactJS kan användas för att utveckla ett rikt användargränssnitt för både stationära och mobila appar.
  • Lätt att felsöka och testa eftersom det mesta av kodningen görs i Javascript snarare än på HTML.

Nackdelar med ReactJS

Här är nackdelar/nackdelar med att använda ReactJS:

  • Det mesta av koden är skriven i JSX, dvs Html och css är en del av javascript, det kan vara ganska förvirrande eftersom de flesta andra ramverk föredrar att hålla Html åtskild från JavaScript-koden.
  • Filstorleken på ReactJS är stor.

Använder ReactJS från CDN

För att börja arbeta med react måste vi först installera reactjs. Du kan enkelt komma igång med att använda reactjs genom att använda CDN-javascript-filerna, som visas nedan.

Gå till den officiella webbplatsen för reactjs för att få CDN-länkarna, dvs. https://reactjs.org/docs/cdn-links.html och du kommer att få de nödvändiga filerna för att förklara följande bild.

Använder ReactJS från CDN

För 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>

För 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>

ersätta version med den senaste react-versionen för både react-development.js och react-dom.developement.js. Du kan vara värd för filerna i din ände för att börja arbeta med reactjs.

Om du planerar att använda CDN-filerna, se till att behålla cross-origin-attributet för att undvika problem över flera domäner. Reactjs-koden kan inte köras direkt i webbläsaren och måste överföras med hjälp av Babel till javascript innan den körs i webbläsaren.

Här är BabelJS-skriptet som kan användas:

<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>

Här är det fungerande ReactJS-exemplet med cdn-filer och 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/babel-standalone@6.15.0/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>

Produktion:

För prod Output

Vi kommer in på detaljerna i koden i nästa kapitel, låt oss se hur det fungerar här med CDN-filer. Det sägs att det inte är bra att använda babel-skript direkt, och nykomlingar kan bara använda det för att lära sig reactjs för tillfället. I produktionen måste du installera react med npm-paketet.

RELATERADE ARTIKLAR

Använder NPM-paket

Se till att du har nodejs installerade. Om den inte är installerad, gå igenom denna handledning för nodejs (https://www.guru99.com/node-js-tutorial.html) installation.

När du har installerat nodejs skapar du en mapp reactproj/.

För att börja med projektinställning, kör kommandot npm init.

Så här kommer mappstrukturen se ut:

reactproj\
package.json

Nu ska vi installera de paket som vi behöver.

Här är listan över paket för reactjs:

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

Öppna kommandotolken och kör ovanstående kommandon i mappen reactproj/.

Skapa en mapp src / där all js-kod kommer i den mappen. All kod för reactjs-projektet kommer att finnas tillgänglig i mappen src/. Skapa en fil index.js och lägg till import react och react-dom, som visas nedan.

index.js

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

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

Vi har returnerat grundkoden för reactjs. Vi kommer att förklara detaljerna i det i nästa kapitel. Vi vill visa upp Hej, från Guru99 Tutorials och detsamma ges till dom-elementet med id "root". Det är hämtat från filen index.html, som är startfilen, som visas nedan.

Skapa en mapp public/ och lägg till index.html i den som visas nedan

index.html

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

Paketets react-scripts kommer att ta hand om att kompilera koden och starta servern för att visa html-filen dvs index.html. Du måste lägga till kommandot i package.json som tar hand om att använda react-scripts för att kompilera koden och starta servern som visas nedan:

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

Efter att ha installerat alla paket och lagt till kommandot ovan är den sista package.json som följer:

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"
  }
}

För att börja testa reactjs kör kommandot

npm run start

C:\reactproj>npm run start		
> reactproj@1.0.0 start C:\reactproj		
> react-scripts start

Det kommer att öppna webbläsaren med url http://localhost:3000/ enligt nedanstående:

public/index.html

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

Använder NPM-paket

Vi kommer att använda samma process för att köra javascript-filerna i nästa kapitel. Lägg till alla dina js- och .jsx-filer i src/-mappen. Filstrukturen blir som följer:

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

Så här skapar du ditt första React-projekt

Här är en steg-för-steg-guide i denna ReactJS-handledning för att börja med den första react-applikationen.

Steg 1) Importera reaktionspaketen.
1. För att börja med ReactJS måste vi först importera react-paketen enligt följande.

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

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

Steg 2) Skriv enkel kod.
Vi kommer att skriva en enkel kod i denna handledning React JS, där vi kommer att visa meddelandet "Hej, från Guru99 Tutorials!"

ReactDOM.render(

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

ReactDOM.render kommer att lägga till tagga till elementet med id root. Här är html-filen vi har:

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

Steg 3) Sammanställ koden.

Nästa i denna React.js-handledning måste vi kompilera koden för att få utdata i webbläsaren.

Här är mappstrukturen:

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

Vi har lagt till kommandona för att kompilera den slutliga filen i package.json enligt följande:

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

För att kompilera den sista filen kör följande kommando:

npm run start

När du kör kommandot ovan kommer det att kompilera filerna och meddela dig om något fel, om allt ser bra ut, kommer det att öppna webbläsaren och köra filen index.html på http://localhost:3000/index.html

Kommando: npm körstart:

C:\reactproj>npm run start

> reactproj@1.0.0 start C:\reactproj
> react-scripts start

Steg 4) Kontrollera utdata.
URL: en http://localhost:3000 öppnas i webbläsaren när koden har kompilerats enligt nedan:

Resultat av First React Project

Vad är JSX?

JSX är ett tillägg till javascript. Det är ett mallskript där du kommer att ha kraften att använda HTML och Javascript tillsammans.

Här är ett enkelt exempel på en JSX-kod.

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

Varför behöver vi JSX i React?

För ett användargränssnitt behöver vi Html, och varje element i domen kommer att ha händelser som ska hanteras, tillståndsändringar, etc.

I händelse av React tillåter det oss att använda HTML och javascript i samma fil och ta hand om tillståndsförändringarna i domen på ett effektivt sätt.

Uttryck i JSX

Här är ett enkelt exempel på hur man använder uttryck i JSX.

I tidigare ReactJS-exempel hade vi skrivit något i stil med:

index.js

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

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

Vi kommer nu att ändra ovanstående kod för att lägga till uttryck. Uttryck används inom parenteser {}, och de utökas under körning. Uttryck i reagera är samma som javascript-uttryck.

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

Låt oss nu testa detsamma i webbläsaren.

Uttryck i JSX Output

Du kan se att uttrycket {display} inte ersätts. React vet inte vad man ska göra när ett uttryck används i .js-filen.

Låt oss nu lägga till ändringar och skapa en .jsx-fil, som visas nedan:

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 till den nödvändiga koden och kommer att använda filen text.jsx i index.js.We want the h1tagg variabel som ska användas inuti script.js, så densamma exporteras som visas ovan i test.jsx

Här är den modifierade koden i index.js

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

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


För att använda test.jsx i index.js måste vi först importera det som visas nedan:

import h1tag from './test.jsx';

Vi kan använda h1taggen nu i ReactDOM.render som visas nedan:

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

Här är resultatet när vi kontrollerar detsamma i webbläsaren:

Produktion

Vad är komponenter i ReactJS?

Komponenter är som rena javascript-funktioner som hjälper till att göra koden enkel genom att dela upp logiken i återanvändbar oberoende kod.

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 skapat en funktion som heter Hej som returnerade h1-taggen som visas ovan. Namnet på funktionen fungerar som ett element, som visas nedan:

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

Komponenten Hej används som en HTML-tagg, dvs. och tilldelas Hello_comp variabel och densamma exporteras med export.

Låt oss nu använda den här komponenten i filen index.js som visas nedan:

index.js

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

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

Här är resultatet i webbläsaren:

Utdata av komponenter i ReactJS

Klass som komponent

Här är ett ReactJS-exempel som använder en klass 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 använda Hello-komponenten i filen index.js enligt följande:

index.js

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

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

Komponenten Hello används som en HTML-tagg, dvs. .

Här är resultatet av densamma.

Klass som komponentutgång

Vad är en stat i ReactJS?

Ett tillstånd är ett javascript-objekt som liknar rekvisita som har data som ska användas med reactjs-renderingen. Tillståndsdata är ett privat objekt och används inom komponenter i en klass.

Exempel på stat

Här är ett fungerande exempel på hur man använder tillstånd i en klass.

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

Detta är vad vi får när vi testar det i webbläsaren:

Tillstånd i ReactJS-utgång

Vad är rekvisita i ReactJS?

Rekvisita är egenskaper som ska användas inuti en komponent. De fungerar som globala objekt eller variabler som kan användas inuti komponenten.

Rekvisita till funktionskomponent

Här är ett exempel på att skicka rekvisita till 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 visas ovan har vi lagt till msg tillskriva Komponent. Samma kan nås som rekvisita inuti Hello-funktionen, som är ett objekt som kommer att ha msg attributdetaljer, och detsamma används som ett uttryck.

Komponenten används i index.js enligt följande:

index.js

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

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

Här är resultatet i webbläsaren:

Rekvisita till funktionskomponentutgång

Rekvisita till klasskomponent

För att komma åt rekvisitan i en klass kan vi göra det på följande sätt:

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;

Ocuco-landskapet msg attribut skickas till komponenten i index.js enligt följande:

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

Detta är resultatet i webbläsaren:

Rekvisita till klasskomponentutgång

Kontrollera också: - AngularJS Handledning för nybörjare: Lär dig AngularJS steg för steg

Livscykel för en komponent

En komponentlivscykel är uppdelad i initiering, montering, uppdatering och avmontering.

Här är en detaljerad förklaring om varje komponent.

En komponent i reactjs har följande steg:

Initieringen: Detta är det första steget i komponentens livscykel.

Här kommer den att ha standardrekvisita och tillstånd på den initiala nivån.

Montering: I denna fas renderas komponenten inuti domen. Vi har exponering för följande metoder i monteringstillstånd.

  • componentDidMount(): Detta kallas också när komponenten precis läggs till domen.
  • render(): Du har den här metoden för alla skapade komponenter. Den returnerar HTML-noden.

Uppdatering: I detta tillstånd interageras domen av en användare och uppdateras. Till exempel anger du något i textrutan, så att tillståndsegenskaperna uppdateras.

Följande metoder är tillgängliga i uppdateringsläge:

  • shouldComponentUpdate() : anropas när komponenten uppdateras.
  • componentDidUpdate() : efter att komponenten har uppdaterats.

Avmontering: detta tillstånd kommer in i bilden när komponenten inte behövs eller tas bort.

Följande metoder är tillgängliga i avmonteringsläge:

Component willUnmount(): anropas när komponenten tas bort eller förstörs.

Arbetsexempel

Här är ett fungerande exempel som visar metoderna som används i varje stat.

Exempel: 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 kontrollerar utdata i webbläsaren

Produktion

I webbläsarkonsolen får du:

Utdata från webbläsarkonsolen

När användaren går in i textrutan:

Användarvärden Utdata

I konsolen visas följande meddelanden:

Konsolutgång

Arbeta med formulär

I reactjs HTML-ingångselement som , och <select /> har sitt eget tillstånd och måste uppdateras när användaren interagerar med metoden setState().

I det här kapitlet kommer vi att se hur man arbetar med formulär i reactjs.

Här är ett fungerande exempel:

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;

För inmatningsfälten måste vi upprätthålla tillståndet, så för att reagera tillhandahåller en speciell metod som kallas setState, som hjälper till att upprätthålla tillståndet närhelst det sker en förändring.

Vi har använt händelser på Ändra och på Klicka på textrutan och skicka-knappen. När användaren går in i textrutan anropas onChange-händelsen, och namnfältet inuti tillståndsobjektets tillstånd uppdateras enligt nedan:

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

Utdata i webbläsaren är som följer:

Arbeta med formulärutdata

Steg 1) Ange ditt namn i textrutan:

Arbeta med formulärutdata

  1. Klicka på knappen Skicka

Arbeta med formulärutdata

Arbeta med evenemang i ReactJS

Att arbeta med händelser i reactjs är samma som hur du skulle ha gjort i javascript. Du kan använda alla händelsehanterare som används i javascript. Metoden setState() används för att uppdatera tillståndet när användaren interagerar med något HTML-element.

Här är ett fungerande exempel på hur man använder 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;

För inmatningsfälten måste vi upprätthålla tillståndet, så för att reagera tillhandahåller en speciell metod som kallas setState, som hjälper till att upprätthålla tillståndet närhelst det sker en förändring.

Vi har använt evenemang på Ändra och onclick på textrutan och knappen. När användaren går in i textrutan på Ändra händelsen anropas och namnfältet i tillståndsobjektets tillstånd uppdateras enligt nedan:

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

Här är resultatet i webbläsaren:

Arbeta med Event Output

När en användare anger namnet:

Arbeta med Event Output

När användaren klickar på knappen Klicka här:

Arbeta med Event Output

Arbeta med Inline CSS i ReactJS

Ska ta en titt på ett fungerande exempel för att förstå hur inline css fungerar 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;

Jag har lagt till färg: 'röd' stil till 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')
);

Utdata i webbläsaren är som följer:

Arbeta med Inline CSS Output

Du kan skapa ett stilobjekt som du vill ha på elementet och använda ett uttryck för att lägga till stil, som visas i exemplet ovan.

Arbeta med extern CSS i ReactJS

Låt oss skapa en extern css, skapa en mapp css/ och lägga till style.css i den.

style.css

.h1tag {
color:red;
}

Lägg till style.css i 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>

Låt oss nu lägga till 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-attributet ges klassdetaljerna. Låt oss nu testa i webbläsaren.

Arbeta med extern CSS-utgång

Det här är vad du ser när du inspekterar h1-taggen i webbläsaren:

Arbeta med extern CSS-utgång

Du kan se att class=" h1tag" har lagts till framgångsrikt i h1-taggen.

Sammanfattning

  • ReactJS är ett gränssnitt med öppen källkod JavaSkriptbibliotek för att bygga användargränssnittet. Det underhålls av Facebook och används av många företag idag för UI-utveckling.
  • Kärnfunktionerna i ReactJS inkluderar JSX, komponenter (funktionella komponenter och klassbaserade komponenter), livscykeln för en komponent, rekvisita och statligt stöd för en komponent, som arbetar med javascript-uttryck.
  • Projektuppställning av ReactJS förklaras med CDN-filer och även med hjälp av npm-paket för att bygga projektet.
  • JSX är ett tillägg till javascript. Det är ett mallskript där du kommer att ha kraften att använda HTML och javascript tillsammans.
  • Komponenter är som rena javascript-funktioner som hjälper till att göra koden enkel genom att dela upp logiken i återanvändbar oberoende kod.
  • Ett tillstånd är ett javascript-objekt som liknar rekvisita som har data som ska användas med reactjs-renderingen. Tillståndsdata är ett privat objekt och används inom komponenter i en klass.
  • Rekvisita är egenskaper som ska användas inuti en komponent.
  • En komponentlivscykel är uppdelad i initiering, montering, uppdatering och avmontering.
  • I reactjs html ingångselement som , och <select /> har sitt eget tillstånd och måste uppdateras när användaren interagerar med metoden setState().
  • Att arbeta med händelser i reactjs är samma som hur du skulle ha gjort i javascript. Du kan använda alla händelsehanterare som används i javascript. Metoden setState() används för att uppdatera tillståndet när användaren interagerar med något HTML-element.
  • ReactJS låter dig arbeta med extern css såväl som inline css med hjälp av javascript-uttryck.

Kontrollera också: - Topp 70 React Intervju Frågor och Svar (Uppdaterad)