Vad är ReactJS och vad kan det användas till?

Om du vill skapa snabba, dynamiska användargränssnitt för dina webbapplikationer måste du lära dig hur du använder ReactJS.

React är ett JavaScript-bibliotek på klientsidan, vilket innebär att det körs på klienten/användarens dator i webbläsaren i motsats till att köras på en server.

Det skapades 2011 av teknikjätten Facebook. React-biblioteket används för att bygga dynamiska användargränssnitt och fungerar genom att separera aspekter av användargränssnittet i vad som kallas “komponenter”.

I den här självstudieartikeln får du lära dig allt du behöver veta om React och dess komponenter.

Vad är ReactJS?

React (även känt som ReactJS) är ett JavaScript-bibliotek med öppen källkod, som ofta felaktigt kallas ett ramverk. Detta beror på att React är en direkt konkurrent till de bästa JavaScript-ramverken som AngularJS och VueJS.

React är ett bibliotek eftersom det inte har en routingmekanism bland andra ramspecifika funktioner. Det finns dock verktyg som react-routern som kan installeras och användas med biblioteket för att uppnå ramverksfunktionalitet.

React är närmare besläktat med ramverk som Angular/Vue än det är till andra bibliotek på språket som jQuery.

Vilka är fördelarna med att använda ReactJS?

Många utvecklare använder React av en uppsjö av olika anledningar; vissa använder det på grund av dess hastighet och prestanda, och andra använder det helt enkelt på grund av dess popularitet. Det finns dock tre stora fördelar med att använda ramverket som alla utvecklare kan uppskatta.

Det låter dig bygga ditt gränssnitt med hjälp av vad som kallas “återanvändbara komponenter” som har tillstånd och data. Den använder en JavaScript-syntaxtillägg (JSX) som låter användaren skriva dynamisk HTML. Den använder en Virtual Document Object Model (VDOM), som gör att utvecklaren kan uppdatera specifika delar av en webbsida utan att behöva ladda om sidan.

Vad är ReactJS-komponenter?

React behandlar varje del av ett användargränssnitt som en komponent. Komponenter har tillstånd, metoder och funktionalitet.

De tillåter en utvecklare att dela upp ett användargränssnitt i specifika sektioner, som enkelt kan kombineras för att skapa komplexa användargränssnitt. Därför, om du vill skapa en kundansvarig, kan en komponent i användargränssnittet dedikeras till att lägga till en ny kund, medan en annan komponent i samma användargränssnitt kan dedikeras till att visa kundlistan.

I sin enklaste form är en komponent en JavaScript-klass eller funktion. De tar ingångsvärden som kallas “rekvisita” och returnerar specifika aspekter av ett användargränssnitt i form av React-element. För vissa utvecklare är det enklare att definiera en komponent som en funktion än att definiera den som en klass; Genom att använda båda metoderna uppnås dock samma resultat i React.

Skapa en komponent med ett funktionsexempel

function Customer() {
return (
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: [email protected]</li>
<li>Balance: $0.00</li>
</ul>
</div>
);
}
export default Customer;

Skapa en komponent med ett klassexempel

import React from 'react';
class Customer extends React.Component {
render() {
return (
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: [email protected]</li>
<li>Balance: $0.00</li>
</ul>
</div>
);
}
}
export default Customer;

Som du kan se från exemplen ovan händer det mycket mer när du skapar en komponent med en klass. Det första viktiga att notera är att du måste använda framställa() funktion när du skapar en klasskomponent.

Som du kanske vet kan du inte återvända direkt från en klass; Därför framställa() funktion hjälper till att åstadkomma detta.

Den främsta anledningen till att en utvecklare kan välja att använda en klass framför en funktion är att en klass har ett tillstånd, men tack vare införandet av krokar kan React-funktioner nu också ha ett tillstånd.

Vad är JavaScript Syntax Extension?

JavaScript-syntaxtillägget (JSX) är React-elementet som returneras av en komponent. Det är en beskrivning av hur en specifik sektion/komponent ska se ut i användargränssnittet. Dess utseende liknar HTML, men i verkligheten är det JavaScript.

JSX-exempel

<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: [email protected]</li>
<li>Balance: $0.00</li>
</ul>
</div>

JSX-exemplet ovan har hämtats från kundkomponenten. Koden verkar vara HTML, men det är JSX. Även om skillnaderna mellan de två inte är särskilt tydliga från exemplet ovan, finns det några tydliga skillnader. Till exempel, i HTML använder du klass egenskap för att gruppera liknande element, men i JSX använder du klassnamn fast egendom.

Vad är Virtual DOM?

Virtual Document Object Module (VDOM) är en kopia av den riktiga DOM. I allmänhet, när en uppdatering görs av den verkliga DOM, kommer användargränssnittet, som ändras, att behöva uppdateras för att visa ändringarna. Men med en virtuell DOM är ändringarna i ett användargränssnitt omedelbara. Tillståndet för den virtuella DOM används sedan för att uppdatera den verkliga DOM i en process som kallas “avstämning”.

Utforska React-projektfilerna

När ett nytt React-projekt skapas genereras automatiskt flera olika filer och mappar. En av dessa mappar är märkt offentlig. Den publika mappen innehåller den enda HTML-filen i React-plattan, som är berättigad index.html.

Filen index.html har en

function Customer() {
return (
<div>
<h3>Paul Wilson</h3>
<ul>
<li>Phone: 222-222-2222</li>
<li>Email: [email protected]</li>
<li>Balance: $0.00</li>
</ul>
</div>
);
}
export default Customer;

import Customer from './components/Customer';





	



	



	



	



function App() {
return (
<div>
<h1>Customer Manager</h1>
<Customer/>
</div>
);
}
export default App;

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);