-
Node.jsとnpmのインストール: Reactプロジェクトを作成するには、まずNode.jsとnpmをインストールする必要があります。公式のNode.jsウェブサイトからダウンロードしてインストールしてください。
-
Create React Appを使用してプロジェクトを作成する: Create React Appは、Reactプロジェクトを簡単にセットアップするためのツールです。ターミナルまたはコマンドプロンプトで、以下のコマンドを実行します。
npx create-react-app my-app
これにより、"my-app"という名前の新しいReactプロジェクトが作成されます。
- Reactコンポーネントの作成: Reactでは、UIを再利用可能なコンポーネントとして作成します。
src
ディレクトリ内に新しいファイルを作成し、次のようなシンプルなコンポーネントを作成してみましょう。
import React from 'react';
function App() {
return (
<div>
<h1>Hello, React!</h1>
</div>
);
}
export default App;
- コンポーネントのレンダリング: 作成したコンポーネントを
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')
);
- プロジェクトの実行: ターミナルまたはコマンドプロンプトで、以下のコマンドを実行してReactプロジェクトを起動します。
cd my-app
npm start
これにより、Reactアプリケーションがローカルサーバーで実行されます。
これらのステップを実行することで、Reactの基本的な開発環境をセットアップし、最初のReactアプリケーションを作成することができます。さらに学びたい場合は、Reactの公式ドキュメントやチュートリアルを参照することをおすすめします。