djangoプロジェクト内でReactを動かしてみる
はじめに
djangoプロジェクトでReactを動かすチュートリアルです。
Reactプロジェクトのセットアップからブラウザに表示するまでを解説します。
既にdjangoプロジェクトを作成済みの方向けです。
Reactプロジェクトのセットアップ
まずは、Reactプロジェクトを作ります。
djangoのルートディレクトリ上で、以下のコマンド実行します。
create-react-app
ここで必要なパッケージをインストールしておいてください。
例）react-router-dom
プロジェクト構造の確認
ここで、先ほどのコマンドを実行して作られるプロジェクト構造を確認します。
以下のようになっていると思います。
バージョンによって差があるかもしれないですが、ほぼ同じだと思います。
my-react-app/
├── node_modules/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── components/
│ │ ├── HomePage.js
│ │ ├── AboutPage.js
│ │ └── ...
│ ├── App.js
│ ├── index.js
│ └── ...
├── package.json
└── ...
ここで以下の3点を確認してください。
１．index.htmlが存在する
まず、public/index.html がプロジェクトのルートにあることを確認します。これがアプリケーションのHTMLのベースです。
２．index.jsが存在する
src/index.js がエントリーポイントであること、ReactDOM.render() を使って App コンポーネントをレンダリングしていることを確認します。
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import './index.css';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
)
３．App.jsが存在する
src/App.js がメインのコンポーネントであり、ルーティングの設定を含んでいることを確認します。
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import './App.css';
function App() {
return ();
}
export default App;
ここまで確認出来たら、次にコンポーネントを作っていきます。
コンポーネントの作成とルーティング
src/components/ ディレクトリに HomePage.js と AboutPage.js などの各ページコンポーネントを作成します。
セクション「プロジェクト構造の確認」でルーティングに出てきたHomePage.jsとAboutPage.jsを作成します。
import React from 'react';
import './HomePage.css'; // HomePage-specific styles
function HomePage() {
return (
<div className="home">
<h1>Welcome to the Taberu App</h1>
<p>This is the Taberu. Click the links above to navigate.</p>
</div>
);
}
export default HomePage;
import React from 'react';
import './AboutPage.css'; // AboutPage-specific styles
function AboutPage() {
return (
<div className="about">
<h1>About Us</h1>
<p>We are passionate about creating high-quality web applications.</p>
<p>Learn more about what we do and our mission.</p>
</div>
);
}
export default AboutPage;
App.js で react-router-dom を使用してルーティングを設定します。React Router v6では Routes と Route を使用し、element プロパティにコンポーネントを渡します。
import React from 'react';
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './components/HomePage';
import AboutPage from './components/AboutPage';
import './App.css';
function App() {
return (
//追加部分
<Router>
<div>
<nav>
<ul className='navbar'>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/about">About</Link>
</li>
</ul>
</nav>
<Routes>
<Route exact path="/" element={<HomePage />} />
<Route path="/about" element={<AboutPage />} />
{/* 他のルート... */}
</Routes>
</div>
</Router>
//追加部分
);
}
export default App;
スタイルの追加
各コンポーネントやアプリケーション全体にスタイルを追加します。これにはCSSファイル（App.css, HomePage.css, AboutPage.css など）が使用されます。
スタイルの内容は各自カスタマイズしてください。
.navbar {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
.navbar li {
float: left;
}
.navbar li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.navbar li a:hover {
background-color: #111;
}
.home {
padding: 20px;
text-align: center;
}
.about {
padding: 20px;
text-align: center;
}
最後に、ベースとなるindex.htmlを編集します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React App</title>
</head>
<body>
<div id="root"></div>
<h1>Hello React</h1>
</body>
</html>
では、サーバーを起動して表示させてみます。
ローカル開発サーバーの起動
npm start を実行してローカル開発サーバーを起動し、ブラウザで http://localhost:3000 にアクセスしてアプリケーションを表示します。
npm start
正常に表示されています。
App.jsのルーティングによりデフォルトでHomeの画面が出ています。
AboutをクリックしてAboutPageに正常にルーティングされるか確認します。
以上、djangoプロジェクトでReactを動かす解説でした。
特に、ルーティングからコンポーネントのレンダリングまでの流れはdjangoとの連携部分で
重要になるので、十分に理解したい内容だと思いました。
Discussion