React と Next.js: 最新の Web 開発エコシステムのもつれを解く-jsチュートリアル-php.cn

React と Next.js: 最新の Web 開発エコシステムのもつれを解く

DDD

リリース： 2024-12-07 08:21:17

オリジナル

925 人が閲覧しました

React y Next.js: Desenredando el Ecosistema de Desarrollo Web Moderno

最新の Web 開発、特に JavaScript を始めようとしている場合は、おそらく React や Next.js などの用語に遭遇し、その関係がどのようなものなのか疑問に思っているでしょう。それらの間で、どこから始めるべきか。この記事では、これらの概念を明確にし、明確な学習パスを確立します。

リアクトとは何ですか?

React は、Facebook (現在は Meta) によって開発された JavaScript ライブラリで、インタラクティブなユーザーインターフェイス (UI) を構築するために使用されます。これは、多くの最新の Web アプリケーションが構築される基盤です。

反応の基本

コンポーネント
- これらは再利用可能なビルディングブロックです
- ボタンほど小さくても、ページ全体ほど大きくても構いません
- コンポーネントの基本的な例:

function Welcome({ name }) {
  return <h1>Hola, {name}</h1>;
}

ログイン後にコピー

ステータスと小道具
- 状態 (state) は、変更される可能性のあるデータを処理します
- プロップは親コンポーネントから子コンポーネントに渡されるデータです
- ステータスの使用例:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

ログイン後にコピー

仮想 DOM
- React は DOM の仮想表現を使用して更新を最適化します
- 変更を比較し、実際の DOM で必要な部分のみを更新します

React を使用する理由

再利用性: コンポーネントはアプリケーションのさまざまな部分で再利用できます
保守性: コードの保守とデバッグが容易になります
大規模なエコシステム: 利用可能な膨大な量のライブラリとツール
活発なコミュニティ: 一般的な問題に対する解決策を簡単に見つけることができます

Next.jsとは何ですか?

Next.js は、完全な Web アプリケーションを作成するための追加機能を追加する React 上に構築されたフレームワークです。 Next.js は、エンジンに対する完成車のようなものを React するものであると言えます。React は (基本的な) エンジンであり、Next.js はすべての追加機能を備えた完全な車両です。

Next.js の主な機能

ハイブリッドレンダリング
- サーバーサイドレンダリング (SSR)
- 静的生成 (SSG)
- クライアントサイドレンダリング (CSR)
- SSR を含むページの例:

// pages/users.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/users');
  const users = await res.json();

  return {
    props: { users }
  };
}

export default function Users({ users }) {
  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

ログイン後にコピー

ファイルベースのルーティングシステム
- パスはファイル構造に基づいて自動的に作成されます
- ルーターを手動で設定する必要はありません
画像の最適化
- 画像の自動最適化
- 遅延読み込み
- 例:

function Welcome({ name }) {
  return <h1>Hola, {name}</h1>;
}

ログイン後にコピー

ゼロ構成
- Babel 自動構成
- TypeScript の組み込みサポート
- ホットリロードが含まれています

どこから始めればよいでしょうか?

推奨される学習パス

JavaScript の基礎
- 変数、関数、オブジェクト
- Promise と async/await
- ES6 の機能 (アロー関数、分割など)
React の基本
- コンポーネントと JSX
- ステータスと小道具
- 基本的なフック (useState、useEffect)
- 基本的なアプリケーションの例:

import { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>Has hecho clic {count} veces</p>
      <button onClick={() => setCount(count + 1)}>
        Incrementar
      </button>
    </div>
  );
}

ログイン後にコピー