Skip to the content.
この記事には以下ネットワーク基礎知識が書かれています。
- Reactの製作ローカル環境立ち上げ方法
- 簡単な試作(ToDoリストを作ったよ!)

巷で話題のReactを触っていきたいと思います。まずは環境立ち上げから。


■参照すべきはどこ?

良く触っている同僚に聞いたら「公式ドキュメントが一番いいよ!」と教えてくれました。
QittaとかZennで調べた方がいいのでは?と思っていましたが
色々とリサーチして、公式ドキュメントが一番わかりやすいし・丁寧ですw
郷に従いましょう!!
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恐るべし


今日はここまで!!


Mainページに戻る