LoginSignup
0
1

More than 3 years have passed since last update.

@anago1030(聖矢 岩辺)

React基本事項の備忘録②

Last updated at Posted at 2021-04-20

はじめに

ProgateでのReactの第二章が終了したので、備忘録としてまとめたいと思います。

JSXがブラウザに表示される流れ

JSXはそのままだとブラウザに表示されません。なので一旦HTMLに変換してからブラウザに渡されます。
以下のようなディレクトリ構成だと仮定します。

React
|-index.html
|-src
   |-index.js
   |-components
        |-App.js

App.jsとindex.jsの関係

index.js内でReactDom.render(<App />, ...)と記述することでApp.js内のJSXがHTMLに変換されます。これは定型文のようなものです。

App.js
class App extends React.Component {
  render (){
    return(
       <div>
          <h1>Hello World!</h1>
       </div>
    );
  }
}

export default App;
index.js
import App from './components/App';
ReactDom.render(<App />, document.getElementByID('root'));

index.jsとindex.htmlの関係

index.js内に(..., document.getElementByID('root'))と記述することで変換されたHTMLがindex.htmlの指定したid名の要素の中に格納されます。
最終的にindex.htmlの内容がブラウザに表示されます。

index.js
import App from './components/App';
ReactDom.render(<App />, document.getElementByID('root'));
index.html
<body>
  <div id="root">ここにApp.jsのreturnの内容が反映される</div> 
</body>

cssを適用

index.html内でcssを読み込むことでcssを適用させることができます。

index.html
<head>
  <link rel="stylesheet" href="stylesheet.css">
</head>
<body>
  <div id="root">ここにApp.jsのreturnの内容が反映される</div> 
</body>

JSXもHTMLと同じようにタグやクラス名を指定してcssを適用させることができます。
注意として、JSXにクラス名を付与させる場合はclassName="クラス名"と記述します。

App.js
class App extends React.Component {
  render (){
    return(
       <div>
          <h1>アナゴ</h1>
          <h2>カツオ</h2>
          <p className="sazae">サザエ</p>
       </div>
    );
  }
}
stylesheet.css
h1 {
  color: red;
}

h2 {
  font-size: 16px;
}

.sazae {
  color: blue;
}

コンポーネント

コンポーネントとは部品やパーツという意味です。
Reactでは見た目 + 機能 = コンポーネント としていて、コンポーネントを組み合わせることによってWebのUIを作成していきます。

コンポーネントの構成

今回は画面にプログラミング言語の一覧を表示させるためにLanguageというコンポーネントを作成していきます。
新しくLanguage.jsというファイルを作成し、React.Componentを継承するLanguageクラスを作成します

Language.js
{/* おまじない */}
import React from 'react';
{/* クラス名がコンポーネントの名前になる */}
class Language extends React.component {
  render () {
   :
   :
  }
}

renderメソッド内にJSXを記述していきます。

Language.js
// Reactをインポート
import React from 'react';

// Languageクラスを定義
class Language extends React.Component {
  render() {
    return (
      <div className='language-item'>
        <div className='language-name'>HTML & CSS</div>
        <img className='language-image' src='HTML-CSS.png'/>
      </div>
     );
  }
}

このままではまだブラウザに表示されません。次にLanguage.jsがブラウザに表示されるまでの流れを整理します。
現在のディレクトリ構造は以下の通りです。

React
|-index.html
|-src
   |-index.js
   |-components
        |-App.js
        |-Language.js

コンポーネントの表示①

App.js内でLanguageコンポーネントを呼び出すにはまず、コンポーネントをexportします。

Language.js
// Reactをインポート
import React from 'react';

// Languageクラスを定義
class Language extends React.Component {
  render() {
    return (
      <div className='language-item'>
        <div className='language-name'>HTML & CSS</div>
        <img className='language-image' src='HTML-CSS.png'/>
      </div>
     );
  }
}
{/* export */}
export default Language;

コンポーネントの表示②

Languageコンポーネントを表示させるためには、次の２つの手順を踏みます。

1. App.js内でコンポーネントをインポートする
2. App.jsのreturn内にJSXを記述する

App.js
import React from 'react';
{/*  Languageコンポーネントをインポート */}
import Language from './Language';
class App extends React.Component {
  render (){
    return(
       <div>
          <h1>言語一覧</h1>
          {/* JSXを記述 */}
          < language />
       </div>
    );
  }
}

これでLanguage.jsのreturnの内容がブラウザに表示されます。
またコンポーネントは何度でも呼び出せます。

App.js
import React from 'react';
{/*  Languageコンポーネントをインポート */}
import Language from './Language';
class App extends React.Component {
  render (){
    return(
       <div>
          <h1>言語一覧</h1>
          < language />
          < language />
          < language />
       </div>
    );
  }
}

上のコードの場合HTML&CSSの同じ情報が３つ表示されています。
これを例えば、違う言語の情報を表示させたい場合はpropsという引数のようなものを用いて表示内容を変えます。

propsとは

引数のようなもので今回の場合はApp.jsから各言語の名前と画像ファイルをLanguageコンポーネントに渡すことで言語ごとに表示を変えることができます。App.jsから渡すこれらのデータをpropsといいます。

propsの渡し方

propsはprops名　= 値という形でコンポーネントを渡す箇所で渡します。
今回の場合はLanguageコンポーネントにnameとimageという２つのpropsを渡します。

App.js
render () {
  return (
    <div>
      < Language 
         name = "HTML & CSS "
         image = "HTML&CSS.png"
      />
    </div>
  )
}

これを各言語ごとにpropsを用意します。

App.js
import React from 'react';
import Language from './Language';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>言語一覧</h1>
        <div className='language'>
          {/* HTML & CSSのpropsを渡す */}
          < Language 
            name = "HTML & CSS"
            image = "HTML&CSS.png"
          />
          {/* JavaScriptのpropsを渡す */}
          < Language 
            name = "JavaScript"
            image ="JavaScript.png"
          />
          {/* Reactのpropsを渡す */}
          < Language 
            name = "React"
            image ="React.png"
          />
        </div>
      </div>
    );
  }
}

export default App;

propsの取得

渡されたpropsはthis.propsで取得できます。this.propsはオブジェクト型で{props名: 値}という形になります。また、オブジェクト型なのでthis.props.props名でpropsの値を取得できます。

Language.js
import React from 'react';

class Language extends React.Component {
  render() {
    return (
      <div className='language-item'>
        {/* props名nameの値を表示する */}
        <div className='language-name'>{ this.props.name }</div>

        {/* src属性の値を、props名imageの値を表示する */}
        <img 
          className='language-image'
          src={this.props.image}
        />

      </div>
    );
  }
}

export default Language;

mapメソッド

コンポーネントを何度も呼び出す際にpropsを用意します。この時、例えば100個のpropsを用意したいときに次のように記述するのは大変です。

App.js
render () {
  return (
    <div>
      <h1>言語一覧</h1>
       < Language name = "..." image = "..." />
       < Language name = "..." image = "..." />
       < Language name = "..." image = "..." />
       < Language name = "..." image = "..." />
       < Language name = "..." image = "..." />
       :
       :
    </div>
  )
}

そこでES2015から実装されたmapメソッドを使って繰り返し処理の形で記述を簡略化していきます。

App.js
render () {
  // languageListを宣言
  const languageList = [
    {name: "HTML & CSS", image: "HTML&CSS.png"},
    {name: "Javascript", image: "Javascript.png"},
    :
    :
  ]
  return (
    <div>
     　{languageList.map(( languageItem ) => {
         return(
          <Language 
             name = { languageItem.name }
             image = { languageItem.image }
          />
        );
      }
    )}
    </div>
  )
}

return外で定義したlanguageListをmapメソッドでlanguageItemに１つずつ格納します。
languageItemはオブジェクト型なのでlanguageItem.props名で値を取得できます。
今回の場合はlanguageItem.nameとlanguageItem.imageで各言語の名前と画像ファイルを取得しています。

以上です！

0
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
1