React.jsの基礎的な書き方まとめ

2020年11月16日

<script crossorigin src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script crossorigin src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

React.jsの基礎

React.jsはJSXでHTMLを構築していく。
それぞれの役割毎にコンポーネントを生成し、処理を行う。
表示（レンダリング）はreactDOM.renderで行う。

JSXとは

• JavaScriptの文法拡張
• HTMLタグを値として直接書ける
• 「Babel」でJSXのコードをJavaScriptのコードに変換して動く
• {}で変数と関数をコードに書くことが出来る

コンポーネントとは

• Reactで画面に表示される「部品」
• 処理に必要な内容やデータをまとめたもの
• コンポーネントはタグで書ける⇒<App />等
• コンポーネントの返り値は1つの親要素でないといけない
• コンポーネントは大文字で始まる名前でないといけない
• 関数型コンポーネントとクラス型コンポーネントがある
• React hook等の新機能の実装で、簡潔にかける関数型コンポーネントが主流っぽい

reactDOM.renderとは

• 画面へ内容の表示を行う
• 第一引数にコンポーネントやタグなど表示させる内容を指定
• 第二引数に表示させる場所を指定
• 表示及び画面の更新を行うときに使う

JSX、コンポーネント、renderの基礎サンプルコード

<div id="app1"></div>

<script type="text/babel">
const App = () => { //関数型コンポーネントを生成
    return <div>Hello React!</div>; //JSXでタグを書いている returnできるのは1つの親要素のみ
}
    
ReactDOM.render( //レンダリング（表示）を行う
  <App />,
  document.getElementById('app1')
);
</script>

タグを複数行に跨いで書きたい時は()で囲う

<div id="app2"></div>

<script type="text/babel">
const App = () => {
    return (
        <div>
            <p>
                Hello World!
            </p>
            <p>
                Hello React!
            </p>
        </div>
    );
}
    
ReactDOM.render(
  <App />,
  document.getElementById('app2')
);
</script>

関数型コンポーネントの書き方（functionとアロー関数）

• 従来のfunction(){}型でも関数型コンポーネント指定できる
• Reactではアロー関数のほうが記述を省略できたり色々便利

<div id="app3"></div>

<script type="text/babel">
function App(){ //これでも動く
    return <div>Hello React!</div>;
}

ReactDOM.render(
  <App />,
  document.getElementById('app3')
);
</script>

属性の設定

• コンポーネントタグに属性を指定できる
• コンポーネントで受け取った属性に対応して処理を変えられる

<div id="app4"></div>

<script type="text/babel">
const App = (props) => {
    return <div>Hello, {props.text}</div>;
}

//要素は1つしか指定できないので、2つ以上のコンポーネントを含みたい場合は親をdiv等で囲む
let el = (
    <div>
        <App text="fuga" />
        <App text="hoge" />
    </div>
);
    
ReactDOM.render(
  el,
  document.getElementById('app4')
);
</script>

styleの設定

• styleをオブジェクト形式で書くことでその要素にスタイルを反映できる
• スタイルのプロパティはキャメルケース（ハイフンを大文字に置き換える）で書かなくてはいけない

<div id="app5"></div>

<script type="text/babel">
const App = (props) => {
    //スタイルをオブジェクトで指定 本来ハイフンが付くfont-sizeはfontSizeに置換
    let style = {
        color : props.color,
        fontSize : props.size + 'px'
    };
    return <div style={style}>Hello React!!</div>;
}

let el = (
    <div>
        <App color="red" size="15" />
        <App color="blue" size="20" />
        <App color="green" size="25" />
    </div>
);
    
ReactDOM.render(
  el,
  document.getElementById('app5')
);
</script>

コンポーネント内の管理を容易にするReact hooksの使い方はこちらのページをご確認ください。

React hooksの書き方・使い方をサンプルコードで解説