Parimad reageerimisnäited

React (tuntud ka kui React.js) on üks populaarsemaid JavaScripti esiotsa arendusteegi. Siin on Reactsi süntaksi ja kasutamise kogum, mida saate kasutada käepärase juhise või viitena.

Reageerige komponendi näide

Komponendid on React.js-is korduvkasutatavad. Rekvisiitidesse saate süstida väärtust allpool toodud viisil:

function Welcome(props) { return 

Hello, {props.name}

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

name="Faisal Arkan"annab väärtuse komponendiks, mille väärtus on andnud {props.name}, function Welcome(props)ja tagastab selle name="Faisal Arkan". Pärast seda muudab React element HTML-i.

Muud viisid komponentide deklareerimiseks

React.js kasutamisel on komponentide deklareerimiseks palju võimalusi. Komponente on kahte tüüpi: kodakondsuseta komponendid ja olekukomponendid .

Riiklik

Klassi tüübi komponendid

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

{this.props.name}

{this.props.color}

); } }

Kodakondsuseta komponendid

Funktsionaalsed komponendid (noole funktsioon ES6-st)

const Cat = props => { return ( 

{props.name}

{props.color}

; ); };

Kaudsed tagastuskomponendid

const Cat = props =>

{props.name}

{props.color}

;

Reageeri fragmendi näide

Fragmendid on viis mitmete elementide renderdamiseks ilma ümbriselementi kasutamata. Kui proovite JSX-is elemente renderdada ilma ümbritseva märgendita, näete tõrketeadet Adjacent JSX elements must be wrapped in an enclosing tag. Selle põhjuseks on asjaolu, et kui JSX levib, loob ta vastavate siltide nimedega elemente ja ei tea, millist sildi nime kasutada, kui leitakse mitu elementi.

Varem oli selle sagedane lahendus kasutada selle probleemi lahendamiseks ümbrise div-i. Reactoni versioon 16 tõi aga juurde Fragment, mis muudab selle enam vajalikuks.

Fragmenttoimib ümbrises, lisamata DOM-i tarbetuid div-sid. Saate seda kasutada otse Reacti impordist või dekonstrueerida:

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;

Reageerimisversioon 16.2 lihtsustas seda protsessi veelgi, võimaldades tühje JSX-silte tõlgendada fragmentidena:

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

Reageerige JSX-i näitega

JSX

JSX on JavaScripti XML-i lühend.

JSX on avaldis, mis kasutab JavaScriptis kehtivaid HTML-lauseid. Selle avaldise saate määrata muutujale ja kasutada seda mujal. Nendes HTML-lausetes saate kombineerida muid kehtivaid JavaScripti väljendeid ja JSX-i, asetades need sulgudesse ( {}). Lisaks kompileerib Babel JSX-i tüüpi objektiks React.createElement().

Üherealised ja mitmerealised väljendid

Üherealist väljendit on lihtne kasutada.

const one = 

Hello World!

;

Kui peate ühes JSX-avaldises kasutama mitut rida, kirjutage kood ühes sulgudes.

const two = ( 
    
  • Once
  • Twice
);

Kasutades ainult HTML-silte

const greet = 

Hello World!

;

JavaScripti avaldise kombineerimine HTML-i siltidega

Sulgudes saame kasutada JavaScripti muutujaid.

const who = "Quincy Larson"; const greet = 

Hello {who}!

;

Klambrites võime helistada ka teistele JavaScripti funktsioonidele.

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

Hello {who()}!

;

Lubatud on ainult ühe vanema silt

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

Kus:

  • enhance on kõrgema järgu komponent;
  • WrappedComponenton komponent, mida soovite täiustada; ja
  • EnhancedComponent on loodud uus komponent.

See võib olla enhanceHOCi keha :

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

Sel juhul enhancetagastab anonüümse klassi, mis laieneb React.Component. See uus komponent teeb kolme lihtsat asja:

  • Elemendi WrappedComponentsees renderdamine div;
  • Oma rekvisiitide edastamine WrappedComponent; ja
  • Süstides lisavarustust WrappedComponent.

HOC-d on vaid muster, mis kasutab Reacti kompositsioonilise olemuse jõudu. Nad lisavad komponendile funktsioone . Nendega saate teha palju rohkem asju!