プログラミング

create-react-appを使ってreactのフロントエンドアプリケーションを作る方法

今回はreactというライブラリを使って、Webサイトを作る方法について紹介したいと思います。

Webサイトとは

Webサイトと一口に言っても、人によってイメージするものは異なるでしょう。一般的にWebサイトは、なんらかのアプリケーションをインターネットを通じてWeb上で提供するもののことを言います。例えば、美容院の予約が出来るWebサイトでは、美容院の予約というアプリケーションをWeb上で提供していると言えます。

フロントエンド

Webサイトの開発は大きくサーバサイドとフロントエンドの2つに分けられます。サーバサイドとは、アプリケーションを提供する側のコンピュータで動くシステムのことを言います。フロントエンドは、アプリケーションを提供される側のコンピュータ、つまり、私たちのパソコンやスマホで動くシステムのことを言います。

簡単に言えば、サーバサイドは画面に見えない部分のプログラムのことで、フロントエンドは画面に見える部分のプログラムの事です。Webサイトは、アプリケーションを使いたい人が特定のアドレスにアクセスして、フロントエンドのプログラムを自分のパソコンに送信してもらい、そのプログラムを使用してサーバサイドのプログラムと通信を行うことで動作しています。

Reactとは

フロントエンドのプログラムは、大体html, css, JavaScriptというプログラミング言語で書かれています。実際にWebサイトを見ているときにパソコンの画面を表示する部分です。

javascriptはページを更新しないまま画面を変化させたり、結構面白いことができるのですが、そのままプログラムを書くとなると複雑で分かりにくいという欠点があります。今回ご紹介するreactというのは、このJavaScriptを簡単に分かりやすく使えるようにするツールです。

使い方

それでは実際にreactを使ってWebサイトを使っていきたいと思います。今回は、creact-react-appというreactアプリケーションを簡単に構築することのできるフレームワークを使って説明していきます。

インストール

まずはcreate-react-appをグローバルにインストールします。

npm install -g create-react-app

 

プロジェクト作成

続いてプロジェクトディレクトリを作成していきます。

create-react-app <your-app-name>

 

起動

yarn startコマンドを使用してアプリを起動させます。

cd <your-app-name>
yarn start

 

追記

公式Github

create-react-app公式リポジトリ

react-nativeを使ったスマホアプリ開発の記事はこちら

[kanren postid=”827″]

ABOUT ME
gitackt
お金をかけないサバイバル術の記事を書きます。温泉と餃子が好きです。プログラミングが得意です。趣味はメルカリです。