create-react-app で作った Reactプロジェクト から Hello World (不要ファイル削除)

Reactの開発環境を作るときに公式とかで使われる create-react-app で何かやるときに不要ファイル削除すること多いのでざっくりそのやり方のメモ
作ったところから不要ファイルを削除して Hellow World の表示までやってみる
やることは大雑把にこんなかんじ．．．

• React プロジェクト作成 Win11
• React プロジェクトから不要ファイル削除（./src直下削除）
• Hellow World 表示のjSを作成
  • index.js のみで表示
  • index.js から App.js 読み込んで表示

React プロジェクト作成 Win11

こちらのページ参考、Node.jsインストールからやってます

React プロジェクトから不要ファイル削除（./src直下削除）

1. 不要ファイル削除（./src直下削除）
   コマンドプロンプト or PowerShell で以下を入力して削除
   ＃ src フォルダは削除しない
   PowerShell

   cd {Reactプロジェクトのフォルダ}
   Remove-Item src\* -Recurse
   

   コマンドプロンプト

   cd {Reactプロジェクトのフォルダ}
   del /q src\*
   

Hellow World 表示のjSを作成

index.js のみで表示

1. ./src 直下に index.js を作成して以下のコードを入力

   index.js

   import ReactDOM from 'react-dom/client';
   import { StrictMode } from 'react';
   
   const App = () => {
     return (
       <>
         <h1>Hello World</h1>
         <p>index.js</p>
       </>
     );
   };
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <StrictMode>
       <App />
     </StrictMode>
   );
   

2. プロジェクトを実行してブラウザに Hello World 表示されればOK

   npm start
   

   

index.js から App.js 読み込んで表示

1. ./src 直下に App.js を作成して以下のコードを入力

   App.js

   const App = () => {
     return (
       <>
         <h1>Hello World</h1>
         <p>App.jsx</p>
       </>
     );
   };
   
   export default App;
   

2. ./src 直下の index.js を以下のようにコードを修正

   index.js

   import ReactDOM from 'react-dom/client';
   import { StrictMode } from 'react';
   import App from './App';
   
   const root = ReactDOM.createRoot(document.getElementById('root'));
   root.render(
     <StrictMode>
       <App />
     </StrictMode>
   );
   

3. プロジェクトを実行してブラウザに Hello World 表示されればOK

   npm start
   

   

Appendix

React とは

Wiki より引用 https://ja.wikipedia.org/wiki/React

React (リアクト) は、Meta（旧Facebook）とコミュニティによって開発されているユーザインタフェース構築のためのJavaScriptライブラリである[3]。React.jsまたはReactJSの名称でも知られている。

Reactはシングルページアプリケーションやモバイルアプリケーションの開発におけるベースとして使用することができる。

JavaScript フレームワークのはやり

Google Trends より引用、React が安定的にはやってる
https://trends.google.co.jp/trends/explore?geo=JP&q=React,Vue,Angular,jQuery&hl=ja

React のきほんとか雑多なめも