もくじ
Reactとは
React.jsまたはReactJSの名称でも知られ、JavaScriptのフロントエンドのためのフレームワークです。
Reactを用いてアプリを作るフレームワークはReact Nativeと呼ばれ別物のようです。
それでは簡単に見てみましょう。
インデントが少しおかしいですね。すみません。
<div>〜</div>はひとつインデントします。
Reactで記述している全体がJavaScriptです。
JSX
JavaScriptの構文の拡張です。ReactでJSXを使うことは必須ではありませんが、Htmlのように記述でき作り手がわかりやすくなるため、よほどの理由がない限りJSXを使う方が有用です。
一例です。
JSXを使わない構文
JSXで書かれた以下のコードは
JSXを使わない以下のコードにコンパイルできます：
上記からわかるように、Htmlに慣れている方なら特にJSXを使うことをお勧めします。
return内は一つの要素
return内に複数の要素があるとエラーになります。
複数の要素がある場合は下図のように<div>タグで囲んで一つの要素にまとめる必要があります。
このとき、<div>タグを<>〜 </>として省略することも可能です。
return(
<>
<h1>タイトル</h1>
<p>段落</p>
</>
)
JSXの命名規則
JSXはHTMLよりもJavaScriptに近いものなので、React DOMはHTMLの属性ではなくキャメルケース (camelCase) のプロパティ命名規則を使用します。
JSXでは例えば、classはclassNameとなり、tabindexはtabIndexとなります。
実践
ここからはReactをインストールし起動している前提です。まだであれば過去のこの記事を参考に始めてみましょう。
中身を確認
npm startで起動するとブラウザに表示されるページは、/src/index.jsからいろいろ読み込んで表示されています。まずはそれを確認しましょう。
今は細かく追求すると頭から煙が出ると思うので簡単にいきましょう。
- /src/index.js
9行目の<App />は同じ階層にあるApp.jsを参照しています。
- /src/App.js
このreturn内を/src/index.jsが読み込んでブラウザに表示しています。
書き換える
初期のコードを書き換えて、自分が表示させたい内容に書き換えましょう。
- App.js
import React from 'react';
class App extends React.Component {
render(){
return(
<>
<h1>タイトル</h1>
<p>段落</p>
</>
);}
}
export default App;
ブラウザを確認するとreturn内に記述した結果が表示されているはずです。
味気ないのはcssを設定していないからですね。
Componentで管理
コンポーネントとはUIの一部分をひとかたまりにまとめて切り出したものです。
先ほどの例で見てみます。
これは「タイトル」と「段落」を持ったひとつのコンポーネントです。しかし、「タイトル」を表示するコンポーネント、「段落」を表示するコンポーネント、と分けることができます。分けることで他のページで「タイトル」を表示したければ同じコンポーネントを使うことが出来るのです。
今は一つのコンポーネントになっているので、もし他のページで「タイトル」を使おうと思っても「段落」も同時に表示されます。
コンポーネントを分けて管理することで使い回しが容易に出来るようになります。
コンポーネントを分ける
src配下にTitle.jsとParagraph.jsというファイルを新規に作成し以下を追記します。
- Title.js
import React from 'react';
class Title extends React.Component {
render(){
return(
<h1>タイトル</h1>
);}
}
export default Title;
- Paragraph.js
import React from 'react';
class Paragraph extends React.Component {
render(){
return(
<p>段落</p>
);}
}
export default Paragraph;
これによりタイトルと段落のコンポーネントを分割しました。
次に、呼び出す側も書き換えましょう。
- index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import Title from './Title'; // ★
import Paragraph from './Paragraph'; // ★
import * as serviceWorker from './serviceWorker';
ReactDOM.render(
<React.StrictMode>
<Title /> // ★
<Paragraph /> // ★
</React.StrictMode>,
document.getElementById('root')
);
（略）
★の箇所を追加変更しています。
ブラウザで確認すると何も変わりませんが、これでindex.js以外のファイルでもTitle、Paragraphのコンポーネントをそれぞれで使い回すことができます。
複雑化していくとコンポーネントが便利
初めはファイルも少ないので今回のようにコンポーネントを分割する必要性は低いですが、規模が大きくなり複雑になっていくとコンポーネントを分割することで非常に管理しやすくなります。
是非活用していきましょう。
