挫折しないプログラミング習得方法
あつまれ 独学エンジニア
Web制作のノウハウ

【はじめての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デビューおめでとうございます!!

 

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

当サイトは「好きなんだから、日曜エンジニアでもいいじゃない」をテーマにしたエンジニアの交流サイトです。

非IT企業の私ですが、Webが好きで「ITエンジニアと繋がりたい」という思いからブログをはじめました。

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

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