Τα καλύτερα παραδείγματα αντιδράσεων

Το React (επίσης γνωστό ως React.js) είναι μια από τις πιο δημοφιλείς βιβλιοθήκες ανάπτυξης διεπαφών JavaScript. Εδώ είναι μια συλλογή σύνταξης και χρήσης React που μπορείτε να χρησιμοποιήσετε ως εύχρηστος οδηγός ή αναφορά.

Παράδειγμα αντιδραστηρίου

Τα στοιχεία μπορούν να επαναχρησιμοποιηθούν στο React.js. Μπορείτε να εισάγετε τιμή σε στηρίγματα όπως δίνονται παρακάτω:

function Welcome(props) { return 

Hello, {props.name}

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

name="Faisal Arkan"θα δώσει αξία {props.name}από function Welcome(props)και επιστρέφει ένα στοιχείο που έχει δώσει τιμή από name="Faisal Arkan". Μετά από αυτό το React θα καταστήσει το στοιχείο σε html.

Άλλοι τρόποι δήλωσης στοιχείων

Υπάρχουν πολλοί τρόποι για να δηλώσετε στοιχεία κατά τη χρήση του React.js. Υπάρχουν δύο είδη συστατικών, ανιθαγενείς στοιχεία και stateful συστατικά.

Κρατική

Εξαρτήματα τύπου κλάσης

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

{this.props.name}

{this.props.color}

); } }

Στοιχεία ανιθαγενών

Λειτουργικά συστατικά (Λειτουργία βέλους από ES6)

const Cat = props => { return ( 

{props.name}

{props.color}

; ); };

Σιωπηρά στοιχεία επιστροφής

const Cat = props =>

{props.name}

{props.color}

;

Παράδειγμα αντιδράσεων θραυσμάτων

Τα θραύσματα είναι τρόπος δημιουργίας πολλαπλών στοιχείων χωρίς τη χρήση στοιχείου περιτυλίγματος. Όταν προσπαθείτε να αποδώσετε στοιχεία χωρίς ετικέτα στο JSX, θα δείτε το μήνυμα σφάλματος Adjacent JSX elements must be wrapped in an enclosing tag. Αυτό συμβαίνει επειδή όταν το JSX μεταδίδει, δημιουργεί στοιχεία με τα αντίστοιχα ονόματα ετικετών τους και δεν ξέρει τι όνομα ετικέτας θα χρησιμοποιήσει εάν βρεθούν πολλά στοιχεία.

Στο παρελθόν, μια συχνή λύση σε αυτό ήταν να χρησιμοποιήσετε ένα wrapper div για να λύσετε αυτό το πρόβλημα. Ωστόσο, η έκδοση 16 του React έφερε την προσθήκη του Fragment, κάτι που το καθιστά πλέον απαραίτητο.

Fragmentενεργεί ένα περιτύλιγμα χωρίς να προσθέτει περιττά τμήματα στο DOM. Μπορείτε να το χρησιμοποιήσετε απευθείας από την εισαγωγή του React ή να το αποικοδομήσετε:

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 16.2 απλοποίησε αυτήν τη διαδικασία περαιτέρω, επιτρέποντας την άδεια ερμηνείας ετικετών JSX ως Fragments:

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

Παράδειγμα αντιδράσεων JSX

JSX

Το JSX είναι σύντομο για το JavaScript XML.

Το JSX είναι μια έκφραση που χρησιμοποιεί έγκυρες δηλώσεις HTML εντός JavaScript. Μπορείτε να αντιστοιχίσετε αυτήν την έκφραση σε μια μεταβλητή και να την χρησιμοποιήσετε αλλού. Μπορείτε να συνδυάσετε άλλες έγκυρες εκφράσεις JavaScript και JSX σε αυτές τις δηλώσεις HTML τοποθετώντας τις σε αγκύλες ( {}). Ο Babel μετατρέπει περαιτέρω το JSX σε ένα αντικείμενο τύπου React.createElement().

Εκφράσεις μίας γραμμής και πολλαπλών γραμμών

Η έκφραση μιας γραμμής είναι απλή στη χρήση.

const one = 

Hello World!

;

Όταν πρέπει να χρησιμοποιήσετε πολλές γραμμές σε μία παράσταση JSX, γράψτε τον κώδικα σε μία παρένθεση.

const two = ( 
    
  • Once
  • Twice
);

Χρήση μόνο ετικετών HTML

const greet = 

Hello World!

;

Συνδυασμός έκφρασης JavaScript με ετικέτες HTML

Μπορούμε να χρησιμοποιήσουμε μεταβλητές JavaScript μέσα σε αγκύλες.

const who = "Quincy Larson"; const greet = 

Hello {who}!

;

Μπορούμε επίσης να καλέσουμε άλλες λειτουργίες JavaScript εντός αγκύλων

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

Hello {who()}!

;

Επιτρέπεται μόνο μία γονική ετικέτα

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

Οπου:

  • enhance είναι το στοιχείο υψηλότερης τάξης ·
  • WrappedComponentείναι το στοιχείο που θέλετε να βελτιώσετε? και
  • EnhancedComponent είναι το νέο συστατικό που δημιουργήθηκε.

Αυτό θα μπορούσε να είναι το σώμα του enhanceHOC:

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

Σε αυτήν την περίπτωση, enhanceεπιστρέφει μια ανώνυμη κλάση που επεκτείνεται React.Component. Αυτό το νέο συστατικό κάνει τρία απλά πράγματα:

  • Απόδοση WrappedComponentενός divστοιχείου.
  • Περνώντας τα δικά του στηρίγματα WrappedComponent; και
  • Ένεση ενός επιπλέον στηρίγματος στο WrappedComponent.

Τα HOC είναι απλώς ένα μοτίβο που χρησιμοποιεί τη δύναμη της συνθετικής φύσης του React. Προσθέτουν χαρακτηριστικά σε ένα στοιχείο . Υπάρχουν πολλά περισσότερα πράγματα που μπορείτε να κάνετε μαζί τους!