Reactでハローワールド

①プロジェクトの作成(デスクトップに新規プロジェクトを作る)

ターミナル

cd desktop

npx create-react-app アプリ名

cd アプリ名

②作成したフォルダをVSCodeで開く

VSCodeのターミナルでサーバーを起動する

npm start

サーバーを止める場合

ctl + c

ファイルを整理する

消しても大丈夫なファイル

①srcフォルダ内

• App.test.js
• index.css
• logo.svg
• reportWebVitals.js
• setupTest.js

②App.cssの全コード

App.jsのコードはすべて消してしまってOK。

App.jsはこれに変える

// App.js

import './App.css';

function App() {
  return (
    <div className="App">
      <p>Hello World!!</p>
    </div>
  );
}

export default App;

index.jsはこれに変える

// index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

もう一度サーバーを起動して確認する

ターミナルを開き

npm start