坂本 健一

坂本 健一

1638961200

Reactjsフックの作成方法

この記事では、npm newコマンドを使用して新しいReactJsプロジェクトを作成する方法を学習します。その後、useStateを使用して単純なフック関数を作成し、VisualStudioコードで例を減らします。

従う手順、

次に、新しいプロジェクトを作成することから始めます。 

ステップ1

以下のコマンドを使用してReactプロジェクトのセットアップを作成するか、Reactアプリを作成します。 

npxcreate-react-appプロジェクト名 

例、

npx create-react-appsample-hook 

Reactjsフックを作成する方法

ステップ2-はじめにフック

ReactフックはReact16.8に新しく追加されたもので、クラスコンポーネントを記述せずに状態やその他のReact機能を使用できます。 フック は、関数コンポーネントから状態とライフサイクル機能に「フック」できる関数です。 

ステップ3

次に、上記のコンポーネントをapp.jsファイルにインポートします。

import React, { useReducer, useState, useContext, createContext } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

Reactは、useStateのようないくつかの組み込みフックを提供します。独自のフックを作成して、異なるコンポーネント間でステートフル動作を再利用することもできます。まず、組み込みのフックを見ていきます。 

const [value, setState] = useState("Mani")

ステップ4

次に、App.jsファイルを作成してから、名前をinitialStateします。  

const initialState = { name: "Hooks" }

次に、フォームを作成し、名前の更新を使用してonchangesubmitメソッドを処理します

return (
 <Context.Provider value={"Satheesh"}>
   <form onSubmit={e => {
       e.preventDefault()
       dispatch(set(value))
      }}>
        <Hello {...state} />
        <Context.Consumer>
          {contextValue => <p>my name is {contextValue}</p>}
        </Context.Consumer>
        <input value={value} onChange={({ target: { value } }) => setState(value)} />
        <input type="submit" value="Update Name" />
     </form>
  </Context.Provider>
)

Src / App.js  

import React, { useReducer, useState, useContext, createContext } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
const Actions = {
  Update: "SET"
}
const set = name => ({ type: Actions.Update, payload: { name } })
const reducer = (state, { type, payload }) => {
  switch (type) {
    case Actions.Update:
      return payload
    default:
      return state
  }
}
const Context = createContext(null);
// Hooks can only be called inside the body of a function component.
// const value = useContext(Context)
const initialState = { name: "Hooks" }
const App = () => {
  const [value, setState] = useState("Mani")
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <Context.Provider value={"Satheesh"}>
      <form onSubmit={e => {
        e.preventDefault()
        dispatch(set(value))
      }}>
        <Hello {...state} />
        <Context.Consumer>
          {contextValue => <p>my name is {contextValue}</p>}
        </Context.Consumer>
        <input value={value} onChange={({ target: { value } }) => setState(value)} />
        <input type="submit" value="Update Name" />
      </form>
    </Context.Provider>
  )
}
export default App;

次に、Hello.jsファイルを作成してから、名前を実装します。 

Src / Hello.js

import React from 'react';
export default ({ name }) => <h1>HI {name}!</h1>;

ステップ5

次に、アプリケーションを実行します。 

npm run start 

上記のコマンドが正常に実行されると、ブラウザに次のように表示されます。 

Reactjsフックを作成する方法

概要 

この記事では、ReactJSアプリケーションにフックを実装する方法を学びました。まず、コマンドプロンプトで新しいプロジェクトを作成し、次にフォームを作成して入力名フィールドを作成し、次にフックを使用して名前を更新します。最後に更新された値を表示します。 

リンク: https://www.c-sharpcorner.com/article/how-to-create-reactjs-hooks/

#react 

What is GEEK

Buddha Community

Reactjsフックの作成方法
坂本 健一

坂本 健一

1638961200

Reactjsフックの作成方法

この記事では、npm newコマンドを使用して新しいReactJsプロジェクトを作成する方法を学習します。その後、useStateを使用して単純なフック関数を作成し、VisualStudioコードで例を減らします。

従う手順、

次に、新しいプロジェクトを作成することから始めます。 

ステップ1

以下のコマンドを使用してReactプロジェクトのセットアップを作成するか、Reactアプリを作成します。 

npxcreate-react-appプロジェクト名 

例、

npx create-react-appsample-hook 

Reactjsフックを作成する方法

ステップ2-はじめにフック

ReactフックはReact16.8に新しく追加されたもので、クラスコンポーネントを記述せずに状態やその他のReact機能を使用できます。 フック は、関数コンポーネントから状態とライフサイクル機能に「フック」できる関数です。 

ステップ3

次に、上記のコンポーネントをapp.jsファイルにインポートします。

import React, { useReducer, useState, useContext, createContext } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';

Reactは、useStateのようないくつかの組み込みフックを提供します。独自のフックを作成して、異なるコンポーネント間でステートフル動作を再利用することもできます。まず、組み込みのフックを見ていきます。 

const [value, setState] = useState("Mani")

ステップ4

次に、App.jsファイルを作成してから、名前をinitialStateします。  

const initialState = { name: "Hooks" }

次に、フォームを作成し、名前の更新を使用してonchangesubmitメソッドを処理します

return (
 <Context.Provider value={"Satheesh"}>
   <form onSubmit={e => {
       e.preventDefault()
       dispatch(set(value))
      }}>
        <Hello {...state} />
        <Context.Consumer>
          {contextValue => <p>my name is {contextValue}</p>}
        </Context.Consumer>
        <input value={value} onChange={({ target: { value } }) => setState(value)} />
        <input type="submit" value="Update Name" />
     </form>
  </Context.Provider>
)

Src / App.js  

import React, { useReducer, useState, useContext, createContext } from 'react';
import { render } from 'react-dom';
import Hello from './Hello';
const Actions = {
  Update: "SET"
}
const set = name => ({ type: Actions.Update, payload: { name } })
const reducer = (state, { type, payload }) => {
  switch (type) {
    case Actions.Update:
      return payload
    default:
      return state
  }
}
const Context = createContext(null);
// Hooks can only be called inside the body of a function component.
// const value = useContext(Context)
const initialState = { name: "Hooks" }
const App = () => {
  const [value, setState] = useState("Mani")
  const [state, dispatch] = useReducer(reducer, initialState)
  return (
    <Context.Provider value={"Satheesh"}>
      <form onSubmit={e => {
        e.preventDefault()
        dispatch(set(value))
      }}>
        <Hello {...state} />
        <Context.Consumer>
          {contextValue => <p>my name is {contextValue}</p>}
        </Context.Consumer>
        <input value={value} onChange={({ target: { value } }) => setState(value)} />
        <input type="submit" value="Update Name" />
      </form>
    </Context.Provider>
  )
}
export default App;

次に、Hello.jsファイルを作成してから、名前を実装します。 

Src / Hello.js

import React from 'react';
export default ({ name }) => <h1>HI {name}!</h1>;

ステップ5

次に、アプリケーションを実行します。 

npm run start 

上記のコマンドが正常に実行されると、ブラウザに次のように表示されます。 

Reactjsフックを作成する方法

概要 

この記事では、ReactJSアプリケーションにフックを実装する方法を学びました。まず、コマンドプロンプトで新しいプロジェクトを作成し、次にフォームを作成して入力名フィールドを作成し、次にフックを使用して名前を更新します。最後に更新された値を表示します。 

リンク: https://www.c-sharpcorner.com/article/how-to-create-reactjs-hooks/

#react