LoginSignup
1
0

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 cant 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;
    
    

結果

Hello World出力

参考

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

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0