Parhaat reagointiesimerkit

React (tunnetaan myös nimellä React.js) on yksi suosituimmista JavaScript-käyttöliittymän kirjastoista. Tässä on kokoelma React-syntaksia ja käyttöä, jota voit käyttää kätevänä oppaana tai viitteenä.

Reagoi komponenttiesimerkki

Komponentit ovat uudelleenkäytettäviä React.js: ssä. Voit pistää arvoa rekvisiittaan alla esitetyllä tavalla:

function Welcome(props) { return 

Hello, {props.name}

; } const element = ; ReactDOM.render( element, document.getElementById('root') );

name="Faisal Arkan"antaa arvon {props.name}välillä function Welcome(props)ja palauttamalla komponentti, joka on antanut arvoa name="Faisal Arkan". Sen jälkeen React renderöi elementin HTML-muotoon.

Muita tapoja ilmoittaa komponentit

React.js: n avulla komponentteja voidaan ilmoittaa monella tapaa. Komponentteja on kahdenlaisia, valtiottomia komponentteja ja tilakomponentteja .

Tilallinen

Luokan tyypin komponentit

class Cat extends React.Component { constructor(props) { super(props); this.state = { humor: 'happy' } } render() { return( 

{this.props.name}

{this.props.color}

); } }

Tilattomat komponentit

Toiminnalliset komponentit (nuolitoiminto ES6: sta)

const Cat = props => { return ( 

{props.name}

{props.color}

; ); };

Implisiittiset palautuskomponentit

const Cat = props =>

{props.name}

{props.color}

;

Reagoi fragmentti

Fragmentit ovat tapa tehdä useita elementtejä ilman käärintäelementtiä. Kun yrität tehdä elementtejä renderöimättömäksi JSX: ssä, näet virheilmoituksen Adjacent JSX elements must be wrapped in an enclosing tag. Tämä johtuu siitä, että JSX leviää, se luo elementtejä vastaavilla tagien nimillä eikä tiedä mitä tagin nimeä käytetään, jos useita elementtejä löytyy.

Aikaisemmin tiheä ratkaisu tähän oli kääreosaston käyttö ongelman ratkaisemiseksi. React-versio 16 toi kuitenkin lisäyksen Fragment, mikä ei enää ole tarpeen.

Fragmenttoimii kääre lisäämättä tarpeettomia diveja DOM: iin. Voit käyttää sitä suoraan React-tuonnista tai purkaa sen:

import React from 'react'; class MyComponent extends React.Component { render(){ return ( I am an element! I am another element  ); } } export default MyComponent;
// Deconstructed import React, { Component, Fragment } from 'react'; class MyComponent extends Component { render(){ return ( I am an element! I am another element  ); } } export default MyComponent;

React-versio 16.2 yksinkertaisti tätä prosessia edelleen, jolloin tyhjät JSX-tunnisteet voidaan tulkita fragmenteiksi:

return ( I am an element! I am another element  );

Reagoi JSX-esimerkkiin

JSX

JSX on lyhenne sanoista JavaScript XML.

JSX on lauseke, joka käyttää kelvollisia HTML-lauseita JavaScriptissä. Voit määrittää tämän lausekkeen muuttujalle ja käyttää sitä muualla. Voit yhdistää muita kelvollisia JavaScript-lausekkeita ja JSX: n näihin HTML-lauseisiin sijoittamalla ne aaltosulkeisiin ( {}). Babel kokoaa edelleen JSX: n tyypin kohteeksi React.createElement().

Yksiriviset ja moniriviset lausekkeet

Yksirivinen lauseke on helppokäyttöinen.

const one = 

Hello World!

;

Kun joudut käyttämään useita rivejä yhdessä JSX-lausekkeessa, kirjoita koodi yhteen sulkeeseen.

const two = ( 
    
  • Once
  • Twice
);

Käytä vain HTML-tunnisteita

const greet = 

Hello World!

;

Yhdistetään JavaScript-lauseke HTML-tunnisteisiin

Voimme käyttää JavaScript-muuttujia aaltosulkeissa.

const who = "Quincy Larson"; const greet = 

Hello {who}!

;

Voimme kutsua myös muita JavaScript-toimintoja aaltosulkeissa.

function who() { return "World"; } const greet = 

Hello {who()}!

;

Vain yksi vanhempi -tunniste on sallittu

A JSX expression must have only one parent tag. We can add multiple tags nested within the parent element only.

// This is valid. const tags = ( 
    
  • Once
  • Twice
); // This is not valid. const tags = (

Hello World!

This is my special list:

  • Once
  • Twice
);

React State Example

State is the place where the data comes from.

We should always try to make our state as simple as possible and minimize the number of stateful components. If we have, for example, ten components that need data from the state, we should create one container component that will keep the state for all of them.

State is basically like a global object that is available everywhere in a component.

Example of a Stateful Class Component:

import React from 'react'; class App extends React.Component { constructor(props) { super(props); // We declare the state as shown below this.state = { x: "This is x from state", y: "This is y from state" } } render() { return ( 

{this.state.x}

{this.state.y}

); } } export default App;

Another Example:

import React from 'react'; class App extends React.Component { constructor(props) { super(props); // We declare the state as shown below this.state = { x: "This is x from state", y: "This is y from state" } } render() { let x1 = this.state.x; let y1 = this.state.y; return ( 

{x1}

{y1}

); } } export default App;

Updating State

You can change the data stored in the state of your application using the setState method on your component.

this.setState({ value: 1 });

Keep in mind that setState is asynchronous so you should be careful when using the current state to set a new state. A good example of this would be if you want to increment a value in your state.

The Wrong Way

this.setState({ value: this.state.value + 1 });

This can lead to unexpected behavior in your app if the code above is called multiple times in the same update cycle. To avoid this you can pass an updater callback function to setState instead of an object.

The Right Way

this.setState(prevState => ({ value: prevState.value + 1 }));

Updating State

You can change the data stored in the state of your application using the setState method on your component.

this.setState({value: 1});

Keep in mind that setState may be asynchronous so you should be careful when using the current state to set a new state. A good example of this would be if you want to increment a value in your state.

The Wrong Way
this.setState({value: this.state.value + 1});

This can lead to unexpected behavior in your app if the code above is called multiple times in the same update cycle. To avoid this you can pass an updater callback function to setState instead of an object.

The Right Way
this.setState(prevState => ({value: prevState.value + 1}));
The Cleaner Way
this.setState(({ value }) => ({ value: value + 1 }));

When only a limited number of fields in the state object is required, object destructing can be used for cleaner code.

React State VS Props Example

When we start working with React components, we frequently hear two terms. They are state and props. So, in this article we will explore what are those and how they differ.

State:

  • State is something that a component owns. It belongs to that particular component where it is defined. For example, a person’s age is a state of that person.
  • State is mutable. But it can be changed only by that component that owns it. As I only can change my age, not anyone else.
  • You can change a state by using this.setState()

See the below example to get an idea of state:

Person.js

 import React from 'react'; class Person extends React.Component{ constructor(props) { super(props); this.state = { age:0 this.incrementAge = this.incrementAge.bind(this) } incrementAge(){ this.setState({ age:this.state.age + 1; }); } render(){ return( My age is: {this.state.age} Grow me older !! ); } } export default Person;

In the above example, age is the state of Person component.

Props:

  • Props are similar to method arguments. They are passed to a component where that component is used.
  • Props is immutable. They are read-only.

See the below example to get an idea of Props:

Person.js

 import React from 'react'; class Person extends React.Component{ render(){ return( I am a {this.props.character} person. ); } } export default Person; const person = 

In the above example, const person = we are passing character = "good" prop to Person component.

It gives output as “I am a good person”, in fact I am.

There is lot more to learn on State and Props. Many things can be learnt by actually diving into coding. So get your hands dirty by coding.

React Higher-Order Component Example

In React, a Higher-Order Component (HOC) is a function that takes a component and returns a new component. Programmers use HOCs to achieve component logic reuse.

If you’ve used Redux’s connect, you’ve already worked with Higher-Order Components.

The core idea is:

const EnhancedComponent = enhance(WrappedComponent);

Missä:

  • enhance on korkeamman asteen komponentti;
  • WrappedComponenton komponentti, jota haluat parantaa; ja
  • EnhancedComponent on luotu uusi komponentti.

Tämä voi olla enhanceHOC: n runko :

function enhance(WrappedComponent) { return class extends React.Component { render() { const extraProp = 'This is an injected prop!'; return ( ); } } } 

Tässä tapauksessa enhancepalauttaa nimettömän luokan, joka jatkuu React.Component. Tämä uusi komponentti tekee kolme yksinkertaista asiaa:

  • Tekee WrappedComponentsisällä divelementti;
  • Oman rekvisiittaansa siirtäminen WrappedComponent; ja
  • Ruiskuttamalla ylimääräinen potkuri WrappedComponent.

HOC: t ovat vain malli, joka käyttää Reactin sävellysluonteen voimaa. Ne lisäävät ominaisuuksia komponenttiin . Niillä voi tehdä paljon enemmän asioita!