この記事には以下ネットワーク基礎知識が書かれています。
- Reactの製作ローカル環境立ち上げ方法
- 簡単な試作（ToDoリストを作ったよ！）
巷で話題のReactを触っていきたいと思います。まずは環境立ち上げから。
■参照すべきはどこ？
良く触っている同僚に聞いたら「公式ドキュメントが一番いいよ！」と教えてくれました。
QittaとかZennで調べた方がいいのでは？と思っていましたが
色々とリサーチして、公式ドキュメントが一番わかりやすいし・丁寧ですｗ
郷に従いましょう！！
React公式
■ローカル環境の設定
公式ドキュメントによると、一番手軽に始めるのはブラウザ環境で。となっています。
簡単にやるならそれでいいですが、手元で何個もプロジェクトを立ち上げることがするので
今後のことを考えてローカルに環境立ち上げます。
Reactのバージョン19が最新ですが、色々とエラーが発生します・・・
バージョン18に指定して以下にてプロジェクトフォルダを立ち上げ。
ToDoリストアプリを試作したくて、フォルダ名はToDoアプリっぽくしました。
mkdir my-todo-app
cd my-todo-app
npm init -y
npm install react@18 react-dom@18 react-scripts
次に、フォルダ構造を作成します。
my-todo-app フォルダの中に以下のフォルダとファイルを作成します。
my-todo-app/
├── public/
│ └── index.html
└── src/
├── App.js
└── index.js
で、手動でやるのがめんどくさいので、GPTさんにコマンドでおねがいして、以下叩けば自動でできます。
mkdir public src
echo ^<!DOCTYPE html^> > public\index.html
echo ^<html lang="en"^>^<head^>^<meta charset="UTF-8" ^/^>^<title^>React App^</title^>^</head^>^<body^>^<div id="root"^>^</div^>^</body^>^</html^> >> public\index.html
echo import React from 'react'; > src\App.js
echo function App() { return (^<div^>^<h1^>Hello, React!^</h1^>^</div^>); } export default App; >> src\App.js
echo import React from 'react'; > src\index.js
echo import ReactDOM from 'react-dom/client'; import App from './App'; const root = ReactDOM.createRoot(document.getElementById('root')); root.render(^<React.StrictMode^>^<App ^/^>^</React.StrictMode^>); >> src\index.js
フォルダができたら「npm start」を実行したけれど、色々パッケージが足りない模様。
「npm init -y」実行すると、フォルダ下にpackage.jsonができるので、
以下を記述した後「npm install react react-dom react-scripts」を実行してインストール。
{
"name": "my-todo-app",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"dependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0",
"react-scripts": "latest"
},
"author": "",
"license": "ISC"
}
npm init -y
<!-- ここでjsonファイルを修正 -->
npm install react react-dom react-scripts
npm start
上手くいけばローカルでアプリが動いて以下画面になります。
■お試しToDoアプリ
全部AIに指示して書いてもらったので、数分でできてしまった。作業メモ。
まずApp.jsを以下に
// 外部コンポーネントのインポートを削除
import React, { useState } from 'react';
export default function TodoListApp() {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState('');
const addTask = () => {
if (newTask.trim() !== '') {
setTasks([...tasks, { text: newTask, completed: false }]);
setNewTask('');
}
};
const toggleTaskCompletion = (index) => {
const updatedTasks = tasks.map((task, i) =>
i === index ? { ...task, completed: !task.completed } : task
);
setTasks(updatedTasks);
};
const deleteTask = (index) => {
setTasks(tasks.filter((_, i) => i !== index));
};
return (
<div style=>
<h1 style=>ToDo List</h1>
<div style=>
<input
value={newTask}
onChange={(e) => setNewTask(e.target.value)}
placeholder="Add a new task..."
style=
/>
<button onClick={addTask} style=>Add</button>
</div>
<div style=>
{tasks.length === 0 ? (
<p style=>No tasks yet. Add a task to get started!</p>
) : (
<ul style=>
{tasks.map((task, index) => (
<li key={index} style=>
<span
style=
onClick={() => toggleTaskCompletion(index)}
>
{task.text}
</span>
<button onClick={() => deleteTask(index)}>Delete</button>
</li>
))}
</ul>
)}
</div>
</div>
);
}
次に、index.jsを以下に。
import React from 'react';
import ReactDOM from 'react-dom/client';
import TodoListApp from './App';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<TodoListApp />
</React.StrictMode>
);
最後に、index.htmlを以下に。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
「npm start」をすると、上手くいくとこうなる↓5分くらいでできてしまった・・・AI恐るべし
今日はここまで！！