日曜エンジニアのIT道場
ITを学び、DXに備える
    HTML&CSS

    【React入門】テンプレートファイルの作り方

    React初心者さん集まれ!

    「Reactのテンプレートファイルを作って、軽く編集できるまで」を解説します!

    「環境構築」ができている人向けです!

     

    Reactのテンプレートファイルの作り方

    やることは簡単です!

    ターミナルでコマンドを打って、実行するだけ!

     

    すると、必要なファイルを自動で作ってくれます。

     

    詳しく解説します。

    ターミナルを開く

    まずはターミナルを開きましょう。

    そしたら、

    ファイルを保存したいディレクトリに移動します!

    cd ○○

    ○○の部分は適宜変えてください!!

     

    移動できたら、

    ファイルを作成します!

    以下のコマンドを実行すれば、Reactのテンプレートファイルが生成できます。

    npx create-react-app ○○

    ○○には、好きなフォルダ名をつけます。

    アプリの名前にすればいいです!

     

    これだけです!!

    Reactのファイルが作成できました!

     

    不安なあなた!

    わかりますよ。ちゃんとアプリができているか確認してみましょう!

     

    ローカルサーバーを立ち上げて、Reactアプリを確認する!

    ファイルが作成できたら、うまくできているか、確認してみましょう!

     

    エディタを開き、先ほど作ったフォルダを開きます。

    エディタのターミナルを開いて。

    コマンド

    npm start

    →ブラウザが立ち上がります。

    ブラウザにReactの初期画面が出ればうまくできています!

     

    あとは好きなように編集していきます!

     

     

    アプリを止める方法

    npm startでスタートしたアプリを止めるに。

    コマンド

    control + c

    でOKです。

     

    アプリを本番環境にうつす

    作ったアプリを本番環境に移すには、ファイルの書き換えが必要です。

    とはいっても簡単です。

    ターミナルのコマンド

    npm run build

    とすると。

     

    →buildフォルダが生成されます。

    生成された「build」フォルダをサーバーにアップロードすればアプリの完成です!

     

     

    Reactの各種ファイルについて

    Reactの各種ファイルについて説明します。

    フォルダ名とその中身。

    srcフォルダ

    開発用のソースが格納されます。

     

    publicフォルダ

    静的ファイル(htmlファイルや画像など)が格納されます。

     

    buildフォルダ

    本番用のファイルが格納されます。

    npm run buildで生成します。

     

    おつかれさまでした。

    Reactデビューおめでとうございます!!

     

    記事を読んでくださりありがとうございました。

    この記事が参考になった、おもしろかったという方、広告をクリックしていただけると励みになります。

    これからもよろしくお願い致します。