# React のサンプル DOM を描画してみる
実際にコードを修正・追加していきながら、React.js による開発のイメージをつかんでいきます。
# 本セクションの流れ
- Example コンポーネントを表示する。
- Example コンポーネントの中身を変えてみる。
# 1. Example コンポーネントを表示する。
http://localhost:8000/home (opens new window) を表示します。
~~/resources/views/home.blade.php にコードを追加します。
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
{{ __('You are logged in!') }}
</div>
</div>
</div>
</div>
</div>
<div id="example"></div>
@endsection
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
ページに Example Component と表示された要素が追加されていることを確認します。
ここで追加された要素は、React で書かれた ~~/resources/js/components/Example.jsx の中身です。
~~/resources/js/components/Example.jsx
import React from 'react'
import ReactDOM from 'react-dom'
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
)
}
export default Example
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'))
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
22 ～ 24 行目で、 id 属性に example を指定した場合に Example コンポーネントを表示させるよう設定されているため、~~/resources/views/home.blade.php に追加した div 要素に Example.js の中身が表示されました。
# Example コンポーネントの中身を変えてみる。
Example コンポーネントの中身を修正しながら、表示が変わることを確認します。試しに、card-header クラスの中身 Example Components を Test に変えてみます。
~~/resources/js/components/Example.jsx
import React from 'react';
import ReactDOM from 'react-dom';
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Test</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
export default Example;
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
実際にページの表示も変わっていることも確認します。今回セットアップした環境では、React のコードを修正して保存した際に、リロードしなくてもページの更新が行われます。これをホットリロードと呼びます。
以上で本セクションは終了です。
# 本セクションで修正したコード
~~/resources/views/home.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<div class="row justify-content-center">
<div class="col-md-8">
<div class="card">
<div class="card-header">{{ __('Dashboard') }}</div>
<div class="card-body">
@if (session('status'))
<div class="alert alert-success" role="alert">
{{ session('status') }}
</div>
@endif
{{ __('You are logged in!') }}
</div>
</div>
</div>
</div>
</div>
<div id="example"></div>
@endsection
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
~~/resources/js/components/Example.jsx
import React from 'react'
import ReactDOM from 'react-dom'
function Example() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Test</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
)
}
export default Example
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'))
}
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
※ ここまで確認できたら、適宜 Git に Commit ＆ Push しておきましょう。
コマンド例
