プロジェクトの初期設定

React.jsプロジェクトを作成するためには、Node.jsとnpmが必要です。まず、これらをインストールしてプロジェクトをセットアップします。

  
  // Node.jsとnpmのインストール（Macの場合）
  brew install node

  // プロジェクトの作成
  npx create-react-app my-app
  cd my-app
  npm start
  

コンポーネントの作成と利用

次に、アプリのUIを構築するためのコンポーネントを作成します。コンポーネントは、再利用可能なUIの部品として機能します。

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

  function App() {
    return (
      

        
      
    );
  }

  export default App;
  

完成したアプリを動かしてみよう

React.jsの開発サーバーを起動して、作成したアプリをブラウザで確認しましょう。

  
  // アプリの起動
  npm start
  

React.jsでシンプルなアプリを作成する方法のまとめ

この記事では、React.jsを使ってシンプルなアプリを作成する方法を学びました。Node.jsとnpmのセットアップから、コンポーネントの作成、そして実際にアプリを動かすまでの一連の手順を解説しました。React.jsを使って、さらに複雑なアプリケーションに挑戦してみましょう。