Facebook によって開発および保守されている React.js は、ユーザー インターフェイス、特にシングルページ アプリケーション (SPA) を構築するための最も人気のある JavaScript ライブラリの 1 つとなっています。柔軟性、効率性、使いやすさで知られる React には、あらゆるレベルの開発者向けに大規模なコミュニティと豊富なリソースがあります。あなたが初心者でも、スキルセットに React を追加したいと考えている経験豊富な開発者でも、このチュートリアルでは React.js の基礎を説明します。

1. React.js とは何ですか?

React.js は、ユーザー インターフェイス、特に高速でインタラクティブなユーザー エクスペリエンスが必要な単一ページ アプリケーションの構築に使用されるオープンソースの JavaScript ライブラリです。 React を使用すると、開発者は、データの変更に応じて効率的に更新およびレンダリングできる大規模な Web アプリケーションを作成できます。これはコンポーネントベースです。つまり、UI はコンポーネントと呼ばれる小さな再利用可能な部分に分割されます。

2. React 環境のセットアップ

コーディングを開始する前に、開発環境をセットアップする必要があります。次の手順に従ってください:

ステップ 1: Node.js と npm をインストールする

• Node.js: React ではビルド ツールに Node.js が必要です。
• npm: ライブラリとパッケージのインストールにはノード パッケージ マネージャー (npm) が使用されます。

Node.js は公式 Web サイトからダウンロードしてインストールできます。 npm は Node.js にバンドルされています。

ステップ 2: Create React アプリをインストールする

Facebook は、新しい React プロジェクトを迅速かつ効率的にセットアップできるようにする Create React App というツールを作成しました。ターミナルで次のコマンドを実行します:

npx create-react-app my-app

このコマンドは、React プロジェクトを開始するために必要なすべてのファイルと依存関係を含む my-app という名前の新しいディレクトリを作成します。

ステップ 3: 開発サーバーを起動する

プロジェクト ディレクトリに移動し、開発サーバーを起動します:

cd my-app
npm start

新しい React アプリは http://localhost:3000 で実行されるはずです。

3. React コンポーネントを理解する

React はコンポーネントがすべてです。 React のコンポーネントは、何らかの出力 (通常は HTML) をレンダリングする自己完結型モジュールです。コンポーネントは、機能コンポーネントまたはクラスコンポーネントのいずれかとして定義できます。

機能コンポーネント

機能コンポーネントは、(JSX を使用して) HTML を返す単純な JavaScript 関数です。

例：

function Welcome(props) {
  return 
Hello, {props.name}
;
}

クラスコンポーネント

クラス コンポーネントはコンポーネントを定義するためのより強力な方法であり、ローカルの状態とライフサイクル メソッドを管理できるようになります。

例：

class Welcome extends React.Component {
  render() {
    return 
Hello, {this.props.name}
;
  }
}

4. JSX – JavaScript XML

JSX は、HTML に似た JavaScript の構文拡張機能です。これにより、JavaScript 内で HTML を直接記述することができ、React が実際の DOM 要素に変換します。

例：

const element = 
Hello, world!
;

JSX を使用すると、UI の構造を簡単に記述して視覚化できます。ただし、内部では、JSX は React.createElement() 呼び出しに変換されます。

5.状態とプロパティ

小道具

Props (「プロパティ」の略) は、あるコンポーネントから別のコンポーネントにデータを渡すために使用されます。これらは不変です。つまり、受信コンポーネントによって変更することはできません。

例：

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

州

State は props に似ていますが、コンポーネント内で管理され、時間の経過とともに変化する可能性があります。状態は、ユーザー入力など、コンポーネントが追跡する必要があるデータによく使用されます。

例：

class Counter extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  increment = () => {
    this.setState({ count: this.state.count   1 });
  }

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

6.イベントの処理

React でのイベントの処理は、DOM 要素でのイベントの処理に似ています。ただし、構文上の違いがいくつかあります:

• React イベントの名前には、小文字ではなくキャメルケースが使用されます。
• JSX では、文字列ではなく関数をイベント ハンドラーとして渡します。

例：

function Button() {
  function handleClick() {
    alert('Button clicked!');
  }

  return (
    
      Click me
    
  );
}

7.ライフサイクルメソッド

React のクラス コンポーネントには、コンポーネントの存続期間中の特定の時点でコードを実行できる特別なライフサイクル メソッドがあります。これらには次のものが含まれます:

• componentDidMount: コンポーネントがマウントされた後に呼び出されます。
• componentDidUpdate: コンポーネントの更新後に呼び出されます。
• componentWillUnmount: コンポーネントがアンマウントされる前に呼び出されます。

例：

class Timer extends React.Component {
  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  render() {
    return (
      

        
{this.state.date.toLocaleTimeString()}
      
    );
  }
}

8.条件付きレンダリング

React では、コンポーネントの状態に応じてさまざまなビューを作成できます。

例：

function Greeting(props) {
  const isLoggedIn = props.isLoggedIn;
  if (isLoggedIn) {
    return 
Welcome back!
;
  }
  return 
Please sign up.
;
}

9.リストとキー

データのリストを表示する必要がある場合、React は各項目をコンポーネントとしてレンダリングできます。どのアイテムが変更されたかを React が識別できるように、各アイテムに一意の「キー」プロパティを与えることが重要です。

例：

function NumberList(props) {
  const numbers = props.numbers;
  const listItems = numbers.map((number) =>
    

{listItems}

10.反応フック

React Hooks を使用すると、機能コンポーネントで状態やその他の React 機能を使用できるようになります。最も一般的に使用されるフックには次のものがあります:

• useState: 機能コンポーネントに状態を追加できます。
• useEffect: 関数コンポーネントで副作用を実行できます。
• useContext: すべてのレベルで手動で props を渡すことなく、コンポーネント ツリーを通じてデータを渡す方法を提供します。

使用例:

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

  return (
    

      
You clicked {count} times
       setCount(count   1)}>
        Click me
      
    
  );
}

11. React アプリケーションの構築とデプロイ

アプリケーションの準備ができたら、実稼働用にビルドできます。次のコマンドを使用します:

npm run build

これにより、React アプリの最適化された運用ビルドがビルド フォルダーに作成されます。その後、それを任意の Web サーバーにデプロイできます。

結論

React.js は、最新の Web アプリケーションを構築するための強力なツールです。コンポーネント、状態管理、イベント処理、フックを理解することで、動的で対話型のユーザー インターフェイスを作成できます。このチュートリアルでは基本を説明しますが、React のエコシステムは、Redux による高度な状態管理、React Router によるルーティング、Next.js によるサーバーサイド レンダリングなど、さらに多くの機能を提供します。

React を使い続けるときは、React の公式ドキュメント、コミュニティ フォーラム、チュートリアルなどの豊富なオンライン リソースを忘れずに活用してください。コーディングを楽しんでください!