ポータルサイトを作成しましたーReact.js
プロドウガです。今回は、Reactを使ってWEBサイトを作成したので、その作成手順とサンプルサイトについて紹介いたします。
今回作成したサンプルサイトは、自社のサービスを紹介するためのWebサイトです。トップページにはサービスの概要と特徴が掲載され、その下には具体的なサービス内容と料金プランが記載されています。
Reactを使ったWEBサイトの作成手順
プロジェクトの作成
まずは、Reactアプリケーションを作成します。create-react-appを使うと、簡単にReactアプリケーションを作成することができます。
npx create-react-app my-app
cd my-app
npm start
ページの作成
次に、WEBサイトの各ページを作成します。今回は、トップページとサービス内容ページを作成しました。それぞれ、コンポーネントを作成し、ページに表示するコンテンツを設定します。
スタイリングの設定
WEBサイトのデザインを決定し、スタイリングを設定します。今回は、Bootstrapを使用して、サイト全体のデザインとレスポンシブ対応を実装しました。
ルーティングの設定
各ページを表示するためには、ルーティングを設定する必要があります。React Routerを使うことで、簡単にルーティングを設定することができます。
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import HomePage from "./pages/HomePage";
import ServicePage from "./pages/ServicePage";
import Header from "./components/Header";
import Footer from "./components/Footer";
function App() {
return (
<Router>
<Header />
<Switch>
<Route exact path="/">
<HomePage />
</Route>
<Route path="/service">
<ServicePage />
</Route>
</Switch>
<Footer />
</Router>
);
}
export default App;
フォームの設定
サービスのお申し込みフォームを実装します。今回は、React Hook Formを使用して、フォームのバリデーションや送信機能を実装しました。
デプロイの設定
最後に、作成したWEBサイトを公開するために、デプロイの設定を行います。今回は、Netlifyを使用して、簡単にWEBサイトを公開することができました。
サンプルサイト
以下のリンクから、今回作成したサンプルサイトをご覧いただけます。
https://docusaurus-2-zeta-two.vercel.app/
まとめ
Reactを使ってWEBサイトを作成することができました。create-react-appやReact Router、React Hook Formを使うことで、簡単にWEBサイトを作成することができます。また、Bootstrapを使うことで、サイトのデザインとレスポンシブ対応を実装することができます。
ReactやWEBサイトの制作に興味のある方は、是非株式会社プロドウガにお問い合わせください。当社では、Reactを始めとしたWeb技術に精通したエンジニアが多数在籍しており、お客様のニーズに合わせたWebサイトやWebアプリケーションの開発を行っております。
