【React】超初心者向けスタートガイド

1. Reactとは？

• ReactはFacebookが開発したJavaScriptライブラリで、ユーザーインターフェースを構築するためのものです。
• 仮想DOMを使用し、効率的なUIの更新を可能にします。

2. 環境のセットアップ

• 公式サイト > https://ja.legacy.reactjs.org/docs/create-a-new-react-app.html
• Node.jsとnpm（またはyarn）をインストールする
• Create React Appで新規プロジェクトを作成する

3. Create React App

プロジェクトを作成

npx create-react-app my-react-app

プロジェクトディレクトリに移動し、開発サーバーを起動します。

cd my-react-app
npm start

http://localhost:3000/が自動で立ち上がるかなと思います

4. 基本的なReactコンポーネントの作成

フォルダ構成

my-react-app/
|-- node_modules/
|-- public/
|   |-- index.html
|   |-- favicon.ico
|-- src/
|   |-- index.js
|   |-- App.js
|   |-- App.css
|   |-- components/ ←作成してください
|-- package.json
|-- README.md
|-- ...

適当なEditorで作成したmy-react-appを開き、関数コンポーネントを作成します。

components/MyComponents.jsx

import React from "react";

const MyComponents = () => {
  return <div>Hello, React!</div>;
};

export default MyComponents;

5. コンポーネントのレンダリング

作成したMyComponentsをApp.jsからレンダリングしてみます

App.js

import "./App.css";
import MyComponents from "./components/MyComponents";

function App() {
  return (
    <div className="App">
      <MyComponents />
    </div>
  );
}

export default App;

MyComponentsで記述したHello, React!が表示できました

6. 注意点

• JSXではキャメルケースを使用することが多いです（例：className、onClick）
• コンポーネントを小さく、再利用可能に設計する
• npmかyarnかは必ず絞って開発する
  • 今後ライブラリとかインストールするときにnpmとyarnはどちらでもインストール可能な時が多いですが、同じプロジェクト内で混じってしまうとバッティングしてしまうことがあります

7. まとめ

• Reactの基本的な使用法と注意点を理解しました。
• これをベースにして、より複雑で実用的なアプリケーションを構築するための学習を進めていきましょう。

この記事では、初心者大学生がReact Nextを理解するためのアウトプット資料です。
間違いや意見などコメントお待ちしております！