Reactを始める方法


  1. Node.jsとnpmのインストール: Reactプロジェクトを作成するには、まずNode.jsとnpmをインストールする必要があります。公式のNode.jsウェブサイトからダウンロードしてインストールしてください。

  2. Create React Appを使用してプロジェクトを作成する: Create React Appは、Reactプロジェクトを簡単にセットアップするためのツールです。ターミナルまたはコマンドプロンプトで、以下のコマンドを実行します。

npx create-react-app my-app

これにより、"my-app"という名前の新しいReactプロジェクトが作成されます。

  1. Reactコンポーネントの作成: Reactでは、UIを再利用可能なコンポーネントとして作成します。srcディレクトリ内に新しいファイルを作成し、次のようなシンプルなコンポーネントを作成してみましょう。
import React from 'react';
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
    </div>
  );
}
export default App;
  1. コンポーネントのレンダリング: 作成したコンポーネントをsrc/index.jsファイルでレンダリングします。
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  1. プロジェクトの実行: ターミナルまたはコマンドプロンプトで、以下のコマンドを実行してReactプロジェクトを起動します。
cd my-app
npm start

これにより、Reactアプリケーションがローカルサーバーで実行されます。

これらのステップを実行することで、Reactの基本的な開発環境をセットアップし、最初のReactアプリケーションを作成することができます。さらに学びたい場合は、Reactの公式ドキュメントやチュートリアルを参照することをおすすめします。