React は、フロントエンド コードを数分で開発できる JavaScript ライブラリです。特定のタスクを実行するためのメソッドと関数が事前に構築されています。ライブラリとしての React には、調整、状態、プロパティなどの複雑な用語が含まれています。これらは実際には何を意味するのでしょうか?
この記事では、この誇張された概念についてより簡単に学びます。
コンポーネントは、Web ページ上にレンダリングされる React 要素を返す再利用可能な小さなコードです。これは、ボタン、ナビゲーションバー、カードなどの Web ページの 1 つの部分を構成するコードのグループです。これは JavaScript 関数に似ていますが、レンダリングされた要素を返します。"Props"というパラメータを受け入れます。コンポーネントの名前は大文字で付けられます。
機能部品の例
注:
JSX は JavaScript XML であり、これを使用すると React で HTML を作成できます。 React 要素を作成するための XML のようなタグと属性が導入されています。 .jsx ファイルに HTML のようなコードを記述できるため、React コンポーネントの作成が簡単になります。複雑な JavaScript を使用する代わりに、JSX を使用すると、コードが読みやすく、きれいになります。 React DOM は、htmlFor、onClick などの属性の命名にキャメルケースを使用します。
JSXの例
React のフラグメントを使用すると、コンポーネントから複数の要素を返すことができます。追加の DOM ノードを作成せずに、要素のリストをグループ化します。 DOM から余分な div をすべて削除します。これにより、UI が迅速にレンダリングされます。
フラグメントの例
注:
「Props」は、プロパティを表す React の特別なキーワードです。コンポーネント間でデータを転送するために使用されます。データ転送は一方向、つまり親コンポーネントから子コンポーネントへ行われます。
小道具の例
注: Props は読み取り専用なので、子コンポーネントが親コンポーネントからの値を操作しないことが保証されます。
コンポーネントは、ユーザーが操作するときに特定の値を追跡する必要があります。ユーザーがボタンをクリックすると、ライト/ダーク モード テーマの切り替えボタンの値が変更されるとします (ライトからダーク、またはその逆)。コンポーネントはテーマの現在の値を記憶する必要があります。 React では、この種のコンポーネント固有のメモリを状態と呼びます。
状態は useState() フックを使用して定義されます。詳しくは後ほど
状態の定義例
注: 他の子コンポーネントと簡単に共有し、信頼できる唯一の情報源を確保するには、トップレベルのコンポーネントで状態を定義することを常に推奨します。
ライフサイクル メソッドは、コンポーネントの存在のさまざまな段階でアクションを実行するために React クラス内で使用できる特別な関数です。これらの段階は次のとおりです:
関数型プログラミングにおける純粋性とは、与えられた同じ入力が同じ出力を返すことです。入力が出力を決定する唯一の要素である場合、その関数は純粋であると言われます。
React では、同じ入力 (つまりプロパティ) に対して同じ出力を返すコンポーネントは純粋であると言われます
Strict モードは、コードの品質を向上させるための追加の安全機能を有効にする React の開発機能です。コード内の潜在的なエラーやバグに関する警告が表示されます。ブラウザのコンソールに警告を記録します。
ストリクトモードの例
React のフックを使用すると、クラス コンポーネントを作成せずに状態やその他の React 機能を使用できるようになります。フックは、React の状態管理、副作用、その他の機能へのアクセスを提供する関数です。
一般的に使用されるフック: useState、useMemo、useRef など
フックの例
注:
The Context API is used to share data like state, functions across the component tree without passing props down manually at every level. It avoidsprop drillingby simplifying state management and sharing data across the component. With Context API the data is shared directly with the child component who will consume it.
The useContext() method is used to create a context. This function returns a context object with two components – a Provider and a Consumer.
The Provider is used to wrap the part of your component tree where you want the context to be available. It accepts a compulsory value prop that holds the data you want to share across other components.
The useContext hook is used to access the data.
Example of Context API
Create a context using createContext() method. Wrap child components in the Context Provider and supply the state value.
import { useState, createContext} from "react"; const UserContext = createContext(); function ParentCounter() { const [count, setCount] = useState(10); return ( {`Current Count: ${count}!`}
); }
Use useContext hook to access the value of age.
import { useContext } from "react"; function GrandChildConsumer() { const age = useContext(UserContext); return ( <> This is GrandChildConsumer
{`Current Count: ${count}`}
); }
A Key is a special kind of attribute for list items in React. It acts as a unique identifier for each items when it is updated, deleted, or added.
Assigning index of the item as the Key is discouraged because if the items are rearranged it will affect the expected behavior.
Imagine in shopping cart you have 10 items added and each item have a unique index as a Key. Now, you decide to remove the first and fifth item from the cart. When the items are removed the indexing will change; the second item will become first and sixth item will become fifth item.
Example of Lists and Keys
const fruits = ["apple", "banana", "orange"]; function FruitList() { return ( React forms allows to collect and manage user input better than traditional HTML form. These forms are built using components and store the user inputs into state. There are two types of components:
In Controlled components, the form's state is managed by the component himself. This is the recommended approach for managing form data in React. When the user interacts with the form (e.g., typing in an input field), the component's state is updated to reflect the changes.
Example of Controlled Component
function ControlledInput() { const [name, setName] = useState(''); const handleChange = (e) => { setName(e.target.value); } return ( Your name is: {name}
); }
Uncontrolled components rely on the DOM to manage the form data. The component doesn't directly control the form's state, but it can access the values using DOM methods like ref.
Example of Uncontrolled Component
function UncontrolledInput() { const nameRef = useRef(null); const handleClick = () => { console.log(nameRef.current.value); } return ( ); }
Note:
React Router is a standard library for routing in React. It enables navigation among various components in the React app. It allows changing the browser URL and syncing the UI with the URL. React Router is important for creating single-page applications (SPA) with navigation features.
First, you need to install React Router from your terminal.
Installing React Router
# If you are using npm npm install react-router-dom # If you are using yarn yarn add react-router-dom
Example of React Router
import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./pages/Home"; import About from "./pages/About"; import Contact from "./pages/Contact"; import NoPage from "./pages/NoPage"; export default function App() { return ( ); }
First wrap your content into the
Note:
プログラミング言語を学ぶ最善の方法は、より多くのプロジェクトを練習することです。小さなプロジェクトを構築し、コンセプトを試してみましょう。
この投稿が役に立ったと思われる場合は、私に愛を示し続けることを忘れないでください。次回まで、いいね、共有、学習してください。
ここや X、GitHub、LinkedIn で私をフォローして、私とつながりを保つこともできます。
以上がすべての React コンセプトを短時間で説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
