React入門：Hello World を出力する！

Reactを環境構築してHello Worldする方法

事前準備

1. 任意のディレクトリに作業ディレクトリを作成。
2. VSCodeで作業フォルダを開く。

動作環境

• Node.js v20.13.1
• npx 10.5.2

Reactプロジェクトを作成

1. VSCodeのターミナルを表示。
2. 以下のコマンドを実行：

   npx create-react-app react-practice
   

3. 成功すると以下のように出力される：

   Success! Created react-practice at C:\...\React\react-practice
   Inside that directory, you can run several commands:
   
     npm start
       Starts the development server.
   
     npm run build
       Bundles the app into static files for production.
   
     npm test
       Starts the test runner.
   
     npm run eject
       Removes this tool and copies build dependencies, configuration files
       and scripts into the app directory. If you do this, you can’t go back!
   
   We suggest that you begin by typing:
   
     cd react-practice
     npm start
   
   Happy hacking!
   

Reactプロジェクトを実行

1. ターミナルで以下を実行：

   cd react-practice
   npm start
   

2. ブラウザで http://localhost:3000 にアクセス。

Hello Worldを表示

1. App.js を以下のように編集：

   import logo from './logo.svg';
   import './App.css';
   
   function App() {
     return (
       <div className="App">
         <header className="App-header">
           <img src={logo} className="App-logo" alt="logo" />
           <p>Hello World!</p>
           <a!
             className="App-link"
             href="https://reactjs.org"
             target="_blank"
             rel="noopener noreferrer"
           >
             Learn React
           </a>
         </header>
       </div>
     );
   }
   
   export default App;
   
   

結果

参考

【VSCode】Reactを環境構築してHello Worldする方法