見出し画像

初心者向けReact入門：プロジェクト作成からNetlifyでのデプロイまで

nao

Reactを使ってウェブアプリケーションを始めるためのガイドを、初心者向けにステップごとに具体的に解説します。

ここでは、Reactの基本的な特徴から始めて、プロジェクトのセットアップ、開発、そしてNetlifyを使ったデプロイまでをカバーします。

Reactとは？

Reactは、Facebookが開発したJavaScriptライブラリで、ユーザーインターフェース（UI）を構築するために使用されます。

コンポーネントベースのアーキテクチャを採用しており、再利用可能なUI部品を作成することができます。これにより、大規模なアプリケーションでも効率的に管理できるようになります。

ステップ1: 開発環境の準備

Node.jsとnpmのインストール

React開発にはNode.jsとnpm（Node Package Manager）が必要です。これらはJavaScriptの実行環境とパッケージ管理ツールです。

  1. Node.jsのインストール: Node.jsの公式サイトから最新のLTSバージョンをダウンロードしてインストールします。

  2. バージョン確認: インストールが完了したら、以下のコマンドでバージョンを確認します。

node --version
npm --version

create-react-appのインストール

create-react-appは、Reactアプリケーションを簡単にセットアップするためのツールです。

  1. グローバルインストール（初回のみ）:

npm install -g create-react-app

ステップ2: Reactプロジェクトの作成

  1. 新しいプロジェクトの作成: npxコマンドを使用して新しいReactプロジェクトを作成します。

npx create-react-app my-portfolio

  1. プロジェクトディレクトリに移動:

cd my-portfolio

  1. 必要なパッケージのインストール: 例えば、スタイルを管理するためにstyled-componentsを追加します。

npm install styled-components

ステップ3: React開発の基本

コンポーネント

  • コンポーネントとは？: ReactではUIがコンポーネントという独立した部品で構成されます。各コンポーネントはJavaScript関数またはクラスとして定義され、UIの一部をレンダリングします。

  • コンポーネントの作成: 例えば、src/components/Header.jsというファイルを作成し、以下のように書きます。

import React from 'react';
import styled from 'styled-components';

const HeaderWrapper = styled.div`
  background-color: #282c34;
  padding: 20px;
  color: white;
  text-align: center;
`;

const Header = () => (
  <HeaderWrapper>
    <h1>My Portfolio</h1>
  </HeaderWrapper>
);

export default Header;

JSX

  • JSXとは？: JSXはJavaScript内でHTMLライクな構文を使用するための拡張機能です。見た目はHTMLですが、JavaScriptであり、コンポーネント内でUIを記述する際に使われます。

ステップ4: Netlifyでデプロイ

Netlifyは静的サイトホスティングサービスで、Reactアプリケーションを簡単にデプロイできます。

Netlifyアカウントの作成

  1. サインアップ: Netlifyでアカウントを作成します。GitHubアカウントでサインアップすると便利です。

Netlify CLIのインストールと設定

  1. Netlify CLIのインストール:

npm install -g netlify-cli

  1. Netlify CLIにログイン:

netlify login

サイトの初期化とデプロイ

  1. サイトの初期化: プロジェクトディレクトリで以下を実行し、新しいサイトとして設定します。

netlify init

  1. デプロイパス指定: 通常はbuildフォルダがデプロイ対象なので、./buildと指定します。

  2. プレビューURL確認: デプロイが完了するとプレビューURLが表示されます。このURLで動作確認が可能です。

  3. 本番環境へのデプロイ:

netlify deploy --prod

  1. 本番URL確認: 本番環境へのデプロイが完了すると、本番用URLが表示されます。このURLから公開されたアプリケーションにアクセスできます。

結論

Reactは強力なUIライブラリであり、その学習曲線は急ですが、多くのリソースとコミュニティサポートがあります。

今回紹介した手順に従うことで、初心者でも簡単にReactアプリケーションを始めることができ、Netlifyを使ってすぐに公開することも可能です。

継続的な学習と実践によってスキルが向上し、自分だけのユニークなウェブアプリケーションを開発できるようになります。

いいなと思ったら応援しよう！