Reactとは

世界的に有名なJavaScriptのライブラリです。
Reactはサイトの見た目の部分を作ることができ、
Facebook、Airbnb、Dropboxなどの有名企業も多く使用しています。

雛形


// Reactをimport
import React from 'react';

// React.Compornentを継承するクラスの定義
class アプリ名 extends React.Compornent {
 constructor(props) {
  super(props);
  this.state = {変数: 値}
 }

 イベント名() {

 }

// JSXを戻り値とするrenderメソッドを定義
  render() {
　　return (
     この中でJSXを記述する。
   )
  }
}

// クラスをexport
export default アプリ名;

JSXとは

Reactで使うHTMLのことを言います。ほぼHTMLと同じですが呼び方が違います。

複数の要素がある場合には < div >タグを使う。


render() {
 return (
  <h1>見出し１</h1>
  <h2>見出し２</h2>
  // <img>タグには閉じタグ(/)が必要
  <img src = '----'/>
 )
}

イベントの書き方

イベント名 = {() => { 処理 }}　とすることでイベントを設定できます。


<button onClick = {() => { 処理 }}

stateとは

ユーザーの動きに合わせて変わる値のことをいいます。
stateは、constructorの中で、オブジェクトとして定義します。
ここで定義したオブジェクトがstateの初期値となります。
その他の部分の、定型文として覚えておけば大丈夫です。


constructor(props) {
  super(props);
  this.state = {変数: 値}
}

stateの表示

this.state.プロパティ名とすることで、指定したstateのプロパティ名に対応する値を取得できます。


constructor(props) {
  super(props);
  this.state = {name: '田中'}
 }
  render() {
　　return (
     <h1>こんにちは、{this.state.name}さん！</h1>
   )
  }

stateの変更

this.setState({プロパティ名: 変更する値})とすることで、指定されたプロパティに対応するstateの値が変更される。
Reactでは、「stateの値に直接代入することで値を変更してはいけない」という決まりがあります。
値を変更したい場合は、setStateを使いましょう。


<button onClick = {() => {this.setState({name: '佐藤'})}}>佐藤</button>

コンポーネントとは

コンポーネントは「部品」や「パーツ」という意味です。
Reactでは、見た目を機能ごとにコンポーネント化して、コンポーネントを組み合わせることでWebサイトの見た目を作ります。
クラス名がコンポーネント名となり、下記の場合はLanguageがコンポーネント名となる。

Language.js


import React from 'react';

class Language extends React.Component {
  render() {
   return(
     JSXの記述
   );
}

コンポーネントの表示

1.作成したコンポーネントをexportする

Language.js


export default Language;

2.App.jsで、コンポーネントをインポートし、JSX内に記述する。

App.js


import React from 'react';

// コンポーネントをインポート
import Language from './Language.js';

class Language extends React.Component {
  render() {
   return(
     // JSX内に<コンポーネント名 />を記述する
     <Language />
   );
}

propsとは

propsは、「props名=値」という形で、コンポーネントを呼び出す箇所で渡します。
タグの中身は、改行してあげることで見やすくなります。
渡されたpropsは、this.propsで取得できます。
this.propsは{ props名: 値}というオブジェクトになります。


<Language
  prop名 = 値
/>

propsの取得

this.propsと書くことで{props名: 値}というオブジェクトを取得できるので、「this.props.props名」とすることでpropsの値を取得できます。


      <div className='language-item'>
        <div className='language-name'>{this.props.name}</div>
        <img 
          className='language-image' 
          src={this.props.image} 
        />
      </div>

mapメソッドを利用する

mapメソッドで配列fruitListの各要素に対して順に処理を行い、各要素を < p >タグで囲んで表示しています。mapメソッドの戻り値はJSXなので、引数であるfruitItemは中括弧{}で囲むことに注意しましょう。


{languageList.map((languageItem) => {
  return (
    <Language
      name = {languageItem.name}
      image = {languageItem.image}
    />
  )
})}

コンポーネントが表示される流れ

コンポーネント

↓jsx