自社開発企業でWebアプリケーションエンジニア（※名前はいろいろあるので都合よく解釈してください）、Webアプリのうち各サブシステムを開発しているエンジニアです。

今回もReactについてメモ書きのような感じで書いていきます。
（ほんとは実際にブラウザで動かしてる方がいいのかもだが）
今回もProgateを使って学んでいきます。

※なお著作権等に引っかからないよう、文法的な書き方部分だけ抜粋していく感じ(Re-Write)で行こうと思います。

参考

前回についてはフロントエンド初心者でもReactは簡単？Reactの文法を学んでみた～序章～を見てください。

#表示の仕組み

Reactを利用するにはApp.jsのほかにindex.js,index.htmlが必要
※JavaScriptはHTMLがないとそもそも動かないのは基本中の基本である

App.js

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello World</h1>
        <p>こんにちわ！</p>
      </div>
    );
  }
}

export default App;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';

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

****の部分にApp.jsのrender()に記述した内容が渡される

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root">
      <!--App.jsのrender()に記述した内容がここにバインドされる-->
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

id指定した部分に**document.getElementById('root')**つまりApp.jsのrender()に記述した内容が渡され表示される

#CSSの読み込み

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div id="root">
      <!--App.jsのrender()に記述した内容がここにバインドされる-->
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

stylesheet.css

h1{
  color:red;
}
p{
  color:blue;
}

App.jsの

,

それぞれのタグに対し、cssが適用される。※通常のルール通り。

#CSSの読み込み（クラスを利用する場合）

ReactのJSX部分でクラス名をつける場合は、classNameとしなければならない。

App.js

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1 className="title">Hello World</h1>
        <p className="text">こんにちわ！</p>
      </div>
    );
  }
}

export default App;

index.js

※省略

index.html

<!DOCTYPE html>
<html>
  <head>
    <title>React App</title>
    <link rel="stylesheet" href="stylesheet.css">
  </head>
  <body>
    <div id="root">
      <!--App.jsのrender()に記述した内容がここにバインドされる-->
    </div>
    <script src="bundle.js"></script>
  </body>
</html>

stylesheet.css

.title{
  color:red;
}
.text{
  color:blue;
}

#コンポーネント

Reactではクラス名がコンポーネントの名前になる。

import React from 'react';

class Greeting extends React.Component{
  
  render(){
    return (<div className='greeting-item'>
        <div className='greeting-name'>Hello</div>
        <img className='greeting-image' src='https://xxxx/hello.png' />
      </div>);  
  }
}
export default Greeting;

######App.jsからGreetingコンポーネントを呼び出す

App.js

import React from 'react';
import Language from './Greeting'

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>言語一覧</h1>
        <div className="greeting">
          <Greeting />
        </div>
      </div>
    );
  }
}
export default App;

#props（プロップス）

App.js

import React from 'react';
import Language from './Greeting'

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>言語一覧</h1>
        <div className="greeting">
          <Greeting 
            name="Hello"
            image="https://xxxx/hello.png"
          />
        </div>
      </div>
    );
  }
}
export default App;

Greetingタグにname、textのようにprops名を定義することができる。
そしてこれはGreeting.jsで取得可能

import React from 'react';

class Greeting extends React.Component{
  
  render(){
    return (<div className='greeting-item'>
        <div className='greeting-name'>
          {this.props.name}
        </div>
        <img 
          className='greeting-image' 
          src={this.props.image} 
        />
      </div>);  
  }
}
export default Greeting;

#mapメソッド

propsを利用してGreeting.jsをメソッドのごとく複数回利用できることが分かったが、では100回くらい使いたいとなった場合はどうだろうか。。。

App.js

import React from 'react';
import Language from './Greeting'

class App extends React.Component {
  render() {
    const greetingList = [
      {name:'Hello',image:'https://xxxx/hello.png'},
      {name:'こんにちは',image:'https://xxxx/hello_jp.png'},
    ];
    return (
      <div>
        <h1>言語一覧</h1>
        <div className="greeting">
        {greetingList.map((greetingItem) => {
          <Greeting 
            name={greetingItem.name}
            image={greetingItem.image}
          />
        })}
        </div>
      </div>
    );
  }
}
export default App;

import React from 'react';

class Greeting extends React.Component{
  
  render(){
      {
    return (<div className='greeting-item'>
        <div className='greeting-name'>
          {this.props.name}
        </div>
        <img 
          className='greeting-image' 
          src={this.props.image} 
        />
      </div>);  
  }
}
export default Greeting;

#ここまでの感想

Vue.jsを少しかじったことあるが、Reactのほうがわかりやすいし簡単かもしれない。