Lær grundlæggende om React.js - For begyndere

I dag vil jeg fremhæve det grundlæggende i React-verdenen. Hvis du lige er startet din rejse i ReactJS, vil jeg sige, at du er landet på det rigtige sted. I denne artikel har jeg forsøgt at dække det grundlæggende i React på en meget enkel måde. Jeg håber i slutningen af ​​artiklen, at du kender de grundlæggende begreber i React.

Lad os begynde.

ReactJS - Et kraftfuldt bibliotek

Som du måske allerede har læst mange steder, er React et bibliotek til oprettelse af web- og mobil-UI. Det blev udviklet af Facebook.

ReactJS er komponentdrevet. Alt er en komponent, der er ansvarlig for en vis funktionalitet. Du skriver små, små komponenter og kombinerer dem derefter for at danne store komponenter. Dette gør koden mere læselig og forståelig. Funktionerne, der gør React kraftfuld og smuk, er:

  1. Det bruger det virtuelle DOM-koncept i stedet for det rigtige DOM.
  2. Kodelæsbarhed på grund af JSX. Brug af JSX får dig til at føle, at du skriver webapps (ser JavaScript som HTML).
  3. Det bruger også SSR (SSR hjælper med SEO).

Dette er de ting, som du måske har læst om, men du vil forstå og føle, når du gennemgår denne vejledning. Så lad os dykke ned i konceptet med den virtuelle DOM (jeg vil sige, at dette er den vigtigste funktion, der gør React mere smuk).

ReactJS Virtual DOM

Den virtuelle DOM er en kopi af den rigtige DOM. I modsætning til den virkelige DOM udfører den virtuelle DOM den mindste mængde DOM-manipulation for at holde komponenter opdaterede. Det opdaterer kun den del, der er opdateret.

DOM-manipulation er meget let. Her er en visuel demonstration af, hvordan den virtuelle DOM fungerer:

  1. Den virtuelle DOM er en kopi af den rigtige DOM.

2. Når data ændres i en komponent, gengives hele brugergrænsefladen i den virtuelle DOM.

3. Derefter finder sammenligningen mellem den virkelige DOM og den virtuelle DOM sted.

4. Når beregningen er udført, opdateres den virkelige DOM med de ting, der ændres.

Vi har talt om en af ​​de fantastiske funktioner i React - det er den virtuelle DOM, men vent! Hvad var JSX i den anden funktion (ovenfor punkter på funktionen)? Du har måske spekuleret på, hvad det var, hvad var dets forhold til React, og hvordan det giver os fornemmelsen af ​​at skrive webapps ...

Lad os nu dykke ned i JSX-poolen denne gang.

JSX

Lad os se på nedenstående kode, inden vi går videre:

class FirstComponent extends React.Component { render() { return ( My First Component ); } }
class FirstComponent extends React.Component { render() { return ( React.createElement('span',{className: 'customSize'}, 'My First Component') ); } }

I det første eksempel ser gengivelsesfunktionen ud til at returnere HTML-kode, men dette er JSX. Det første eksempel er en JSX-version af den anden . JSX er en JavaScript-udvidelse, der giver din JS-kode et HTML-look.

Hvis du ser på det andet eksempel, bruges React.createElement til at oprette et reageringselement, der repræsenterer reaktionskomponenten. Det andet argument kan være null eller tomt, hvis ingen rekvisitter eller attributter er nødvendige for elementet. Det tredje argument definerer, hvad der skal være inde i det (som ethvert andet React-element, f.eks. Med attribut 'src').

Hvis du ser på de ovennævnte to blokke kode, finder du den første mere velkendt, da den giver en HTML-følelse. JSX øger også kodelæsbarheden. Lad os se på et andet eksempel uden JSX og med JSX for at få en fornemmelse for kodelæsbarheden.

ReactJS uden JSX:

React.createElement("div", null, React.createElement("img", {src: "image.jpg", alt: "Random photo"}), React.createElement("h3", null, "Hello React"));

ReactJS med JSX-version:

Hello React

Ved at se på ovenstående eksempel kan du forstå, hvad jeg sagde om kodelæsbarhed. Hvor let er det at læse kode med JSX, ikke? Jeg tror, ​​det er nok på JSX, og jeg håber, at du nu er i stand til bedre at forstå JSXs styrke i React-verdenen.

Bemærk - Browsere kan ikke læse JSX. Så vi er nødt til at transponere det til JavaScript ved hjælp af JSX-transformere (siger babel), så browseren kan forstå.

Nu ved vi, hvad JSX er. Men jeg vil gerne have, at du går til det forrige billede, hvor jeg skrev, at React handler om komponenter. Det er komponentdrevet. Da komponenter er byggestenene i React, lad os udforske dem.

ReactJS Heart - Komponenter

Nå, du er muligvis stødt på nedenstående kode for, hvordan du opretter komponenter under din forskning i React:

class MyStatefulComponent extends React.Component { state = { title: '' } componentDidMount() { console.log('Component mounted') } render() { return {this.props.name} ; } }

Hvis du skriver din komponent på ovenstående måde, kaldes den en klasse / stateful / container- komponent. Hvis du tror, ​​at dette er den eneste måde at skabe komponenter på, så tænk igen. Ja, der er en anden måde at oprette din komponent på, hvilket resulterer i funktionelle / statsløse / præsentationsdele. Lad os se, hvordan funktionelle komponenter skrives, før vi går videre:

const MyStatelessComponent = props => {props.name} ;

Nu spekulerer du måske på, hvad der er forskellen mellem de to, og hvordan du skal vælge, hvilken type du vil oprette. Så lad os dykke ned i poolen Stateful og Stateless.

Statsløse (eller præsentationsmæssige eller funktionelle) komponenter er de komponenter, der ikke har nogen tilstand (ved ikke om tilstand? Ingen bekymringer, jeg forklarer det i en senere del). De bruges til præsentation som hvordan du vil have din komponent til at se ud.

A component is a plain JavaScript function which takes a prop as an argument and returns a React element (see above example). Its name is self explanatory — it has no state. It has no lifecycle methods (like componentDidMount method etc. which you might have read during your research on React tutorials).

Stateful (or container or class) components are those components which have state — a source of data (you can call this.setState inside it), lifecycle methods (can use to make an API call). It is a JavaScript class that extends your React component which means React creates instances of it. React initialize the component class in order to use lifecycle methods, for initializing the state and more.

Wait… now you might wonder which one is better, and what to choose? You can answer this question if you have this question in your mind on how to separate the logical part from the presentational one. Yes, it is strange that one question answers another question, but you will soon get why I said this.

As you might have seen in other React tutorials, they use class for creating their components. They put the logical as well as presentational parts in the same component which makes that component more complicated and bulky.

So, if you want to separate your logical from presentational components, then the component class is best suited for logical stuff like fetching data from the API or data changes. On the other hand, if your component is focused on presentational/functional things, the component should look good.

In short, I would say use both. Use the component class when you need one of the things (lifecycle methods, state) and for presentation, use a functional component.

That’s all about components.

Now, we have a picture of how we can write components, but I have not told you how we can manage data in them. I think without data, components would be useless. So, we will have a look at how we can manage a component’s data (like fetching data from an API, React ‘state’ story, setting the state and so on).

Let’s start.

Props

‘Prop’ is shorthand for properties, and this is the one source of data in our component. It can be used to pass data to different components. Wait! I would like you to go back where I told you about presentational and class components. I told you to use presentational components to manage how your component should look, and container components for handling data and all that. Correct!

So the ‘prop’ is the one which we can use to make the connection between these two types of components. Yes, you can use props for passing data from a container component to a presentational component, where the presentational component will render the view with your dynamic data. Please have a look at the below code to better understand:

import {ButtonView} from './button.presentation'; class MyContainerComponent extends React.Component { state={ text : 'Submit' } render() { return (  ) } } 
export const ButtonView=({btnText})=>( {btnText} )

Like the above way (using props — ‘btnText’), you can separate the logical part from the presentational part. The other feature of props is that they are read only, i.e. they are immutable. They are not going to modify inside the component in which they are passed. The data flow is also unidirectional — which gives us one way data binding (unlike Angular).

But, there might be cases where we want to change the data (like in some event by the user and so on). Hence, for this case, ‘State’ comes into the React market. Let’s dive into it.

State

As I told you, props are immutable whereas state is for mutable data — that is data that will change in response to certain events. So, if you want to change your data value, then store it in the state. State are objects that store your component’s data. To give a better picture of how state is defined and how to use it, here is an example:

class LoginContainer extends React.Component { constructor(props) { super(props); this.state = { userName: "", }; } onFilluserName = event => { this.setState({ userName: event.target.value, }); } render() { return ( 

You can see from the above example that state represents objects where your component’s data are stored. They are initialized inside a constructor. You can access the state using ‘this.state’. This is the way of using state for rendering your data in your component.

But, I told you that the thing which makes state the heart of your components is its mutable behaviour. Yes, now the point comes as to how we can change the state’s property. The answer is using ‘this.setState’ (please have a look at the above example). Using this.setState, we have changed our data value when the user types.

In short, props and state are both sources of data, but their usage and behaviour is different. Whenever there is a case where your data may change, use ‘state’ for that — else ‘prop’ is good choice.

That’s all about the basics of the React world. I hope you have a better understanding of the basics.

There is a very important part of a class component that I haven’t discussed: lifecycle methods. Yes, lifecycle methods are another critical part of ReactJS, but what they are and why they’re important will be in my next article!

Thanks for reading.