ins での React を理解する

React の基本を簡単に理解する方法をお探しですか?長いチュートリアルに圧倒されていませんか?わずか 5 分で、ほとんどの React コードを読んで理解するのに十分な学習ができます。

目次

• React とは何ですか?
• コアコンセプト
• 一般的なパターン
• すべてをまとめる
• 以上です!

リアクトとは何ですか?

React は、ボタンやフォームなどの UI を構築するための JavaScript ライブラリです。

レゴブロックを使って建物を作ることを考えてみましょう。 1 つの大きな城を作成するのではなく、再利用可能な小さな部品を組み合わせて構築します。 React では、「コンポーネント」と呼ばれる再利用可能な部分を使用して Web インターフェイスを構築できます。

React コードは次のようになります:

// A simple React component
function Greeting() {
  return <h1 id="Hello">Hello!</h1>;
}

この特別な構文は JSX と呼ばれ、JavaScript で HTML に似たコードを記述できます。

React は次のことに役立ちます。

• 複雑な UI を管理しやすい部分に分割する
• 仮想 DOM システムを使用して UI とデータを効率的に処理します
• データが変更されるたびに Web ページを自動的に更新します

中心となる概念

1. コンポーネント ?

コンポーネントは React のレゴブロックのようなものです。これらは再利用可能な UI ピースであり、組み合わせることができます。

// A simple component
function Welcome({ name }) {
  return <h1 id="Hello-name">Hello, {name}!</h1>;
}

// Using it
<welcome name="Alice"></welcome>

2. 小道具 ?

プロップは、関数パラメーターのような、コンポーネントに渡されるデータです。

// 'name' and 'age' are passed to UserCard() as props
function UserCard({ name, age }) {
  return (
    <div>
      <h2 id="name">{name}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

<usercard name="Alice" age="{25}"></usercard>

注: 小道具は読み取り専用です。

3. 状態?

状態は変更される可能性のあるデータです。変更されると、React は UI を自動的に更新します。

function LikeButton() {
  // 'likes' is state
  // 'setLikes' is function to update the state
  const [likes, setLikes] = useState(0);

  return (
    <button onclick="{()"> setLikes(likes + 1)}>
      Likes: {likes}
    </button>
  );
}

注: useState(0) は初期値 0 で状態を設定します (フックについては以下で詳しく説明します)。

4. フック ?

フックは、コンポーネントが React 機能を使用できるようにする関数です。常に「use」で始まります。

• useState: 変化するデータ (状態) の管理用
  

  const [count, setCount] = useState(0); // Initialize count with 0
  

• useEffect: 特定の時間にコードを実行するため (API 呼び出しなど)
  

  useEffect(() => {
      fetchData(); // Get data
  }, []);          // Run once when page loads
  

よくあるパターン

条件付きレンダリング

条件に基づいて異なるコンテンツを表示します:

function Greeting({ isLoggedIn }) {
  return isLoggedIn
   ? <h1 id="Welcome">Welcome!</h1>
   : <h1 id="Please-log-in">Please log in</h1>;
}

isLoggedIn が true の場合は「ようこそ!」が表示され、それ以外の場合は「ログインしてください」が表示されます。

使用法:

<greeting isloggedin="{true}"></greeting>   // "Welcome!"
<greeting isloggedin="{false}"></greeting>  // "Please log in"

イベント処理

クリックなどのユーザーインタラクションを処理します:

function ToggleButton() {
 // Track button state (ON/OFF)
  const [isOn, setIsOn] = useState(false);

  return (
    <button onclick="{()"> setIsOn(!isOn)}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

クリックすると、ボタンのテキストが「ON」と「OFF」の間で切り替わります。

使用法:

<togglebutton></togglebutton>  // Shows: "OFF" by default

すべてをまとめるには？

これが私たちが学んだことを使用した実際の例です:

function LikeButton({ initialLikes = 0 }) {
  const [likes, setLikes] = useState(initialLikes);

  return (
    <button onclick="{()"> setLikes(likes + 1)}>
      {likes === 0 ? '♡' : '?'} {likes > 0 && likes}
    </button>
  );
}

この LikeButton コンポーネント:

• 小道具として初期いいね数を取得します
• カウントが 0 の場合、空のハート (♡) を表示
• いいねされるとピンクのハート(?)と数字が表示される> 0
• クリックするとハートとカウントを更新します

使用例:

// A simple React component
function Greeting() {
  return <h1 id="Hello">Hello!</h1>;
}

それでおしまい！ ?

これで React の基本が理解できました。学ぶべきことはまだたくさんありますが、見たほとんどの React コードを理解することができます。

始める準備はできていますか?

React プロジェクトを作成するにはいくつかの方法があります:

• Next.js: ほとんどの新しいプロジェクトに推奨されるフルスタック React フレームワーク
• Gatsby: 高速 CMS 支援 Web サイト用の React フレームワーク
• Vite: React の学習とシングルページ アプリケーションの構築に最適な、最新の高速ビルド ツール

詳細はこちら

楽しくコーディングしてください✨

以上がins での React を理解するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。