最高のReactの例

React(React.jsとも呼ばれます)は、最も人気のあるJavaScriptフロントエンド開発ライブラリの1つです。これは、便利なガイドまたはリファレンスとして使用できるReactの構文と使用法のコレクションです。

Reactコンポーネントの例

コンポーネントはReact.jsで再利用できます。以下に示すように、小道具に値を注入できます。

function Welcome(props) { return 

Hello, {props.name}

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

name="Faisal Arkan"{props.name}fromに値をfunction Welcome(props)与え、によって値を与えたコンポーネントを返しますname="Faisal Arkan"。その後、Reactは要素をhtmlにレンダリングします。

コンポーネントを宣言する他の方法

React.jsを使用するときにコンポーネントを宣言する方法はたくさんあります。コンポーネントには、ステートレスコンポーネントとステートフルコンポーネントの2種類があります。

ステートフル

クラスタイプコンポーネント

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}

;

Reactフラグメントの例

フラグメントは、ラッパー要素を使用せずに複数の要素をレンダリングする方法です。JSXで囲みタグなしで要素をレンダリングしようとすると、エラーメッセージが表示されますAdjacent JSX elements must be wrapped in an enclosing tag。これは、JSXが発生すると、対応するタグ名で要素が作成され、複数の要素が見つかった場合に使用するタグ名がわからないためです。

以前は、これに対する頻繁な解決策は、ラッパーdivを使用してこの問題を解決することでした。ただし、Reactのバージョン16では、が追加されたためFragment、これは不要になりました。

Fragment不要なdivを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タグをフラグメントとして解釈できるようにしました。

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

ReactJSXの例

JSX

JSXはJavaScriptXMLの略です。

JSXは、JavaScript内で有効なHTMLステートメントを使用する式です。この式を変数に割り当てて、他の場所で使用できます。他の有効なJavaScript式とJSXを中括弧({})で囲むことにより、これらのHTMLステートメント内で組み合わせることができます。BabelはさらにJSXをタイプのオブジェクトにコンパイルしますReact.createElement()

単一行および複数行の式

1行の式は簡単に使用できます。

const one = 

Hello World!

;

1つのJSX式で複数の行を使用する必要がある場合は、1つの括弧内にコードを記述します。

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

Where:

  • enhance is the Higher-Order Component;
  • WrappedComponent is the component you want to enhance; and
  • EnhancedComponent is the new component created.

This could be the body of the enhance HOC:

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

In this case, enhance returns an anonymous class that extends React.Component. This new component is doing three simple things:

  • Rendering the WrappedComponent within a div element;
  • Passing its own props to the WrappedComponent; and
  • Injecting an extra prop to the WrappedComponent.

HOCs are just a pattern that uses the power of React’s compositional nature. They add features to a component. There are a lot more things you can do with them!