なんやねん、JSXとか、コンポーネントとか！ #create-react-app

気になってたんだが...

公式サイトより (powered by Google翻訳)
const element = <h1>Hello, world!</h1>;
この面白いタグ構文は、文字列でもHTMLでもありません。

これはJSXと呼ばれ、JavaScriptの構文拡張です。 UIをどのように表示するかを説明するにはReactと併用することをお勧めします。JSXはテンプレート言語を思い出させるかもしれませんが、JavaScriptの完全機能を備えています。

create-react-appで作成されたjavascriptファイルも道理で変な記述なのか...

こういうことだよな（違

index.js

+ const element = <App />;
+ 
- ReactDOM.render(<App />, document.getElementById('root'));
+ ReactDOM.render(element, document.getElementById('root'));

  // If you want your app to work offline and load faster, you can change
  // unregister() to register() below. Note this comes with some pitfalls.

コンポーネントって？

公式サイトより (powered by Google翻訳)

概念的には、コンポーネントはJavaScript関数のようなものです。コンポーネントは任意の入力（「props」と呼ばれます）を受け入れ、何が画面に表示されるべきかを記述するReact要素を返します。

コンポーネントを使用すると、UIを独立した再利用可能な部分に分割し、各部分について個別に考えることができます。

コンポーネントは、出力の際に、他のコンポーネントを参照できます。ボタン、フォーム、ダイアログ、画面：Reactアプリケーションでは、すべてがコンポーネントとして一般的に表現されます。

関数なのか！こういうことやな（違

App.js

+ const logoElement = <img src={logo} className="App-logo" alt="logo" />;
+ 
+ function Logo() {
+   return logoElement
+ }

App.js

          <header className="App-header">
-           <img src={logo} className="App-logo" alt="logo" />          
+           <Logo />
            <p>
              Edit <code>src/App.js</code> and save to reload.
            </p>

他でも参照できるように、外部ファイルにしてみる。
srcフォルダーの下にcomponentsフォルダを作って、そのなかにLogo.jsファイルを作成する。
そして、logo.svgもこのフォルダに移動させる。

Logo.js

import React from 'react';
import logo from './logo.svg';

const logoElement = <img src={logo} className="App-logo" alt="logo" />;

function Logo() {
  return logoElement
}

export default Logo;

App.jsもコンポーネントだから、componentsフォルダに移動しちゃう。（App.scssもｗ）

App.js

  import React, { Component } from 'react';
- import logo from './logo.svg';
+ import Logo from './Logo';
  import './App.scss';

App.js

  import React, { Component } from 'react';
- import logo from './logo.svg';
+ import Logo from './Logo';
  import './App.scss';

index.js

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.scss';
- import App from './App';
+ import App from './components/App';
  import * as serviceWorker from './serviceWorker';

正常に出てる

あいさつするコンポーネントでも作ってみる

既成のソースを弄っているばかりだったので、1つ新しいモノを生み出してみる。

Greeting.js

import React from 'react';

function Greeting() {
  return <div>ようこそ</div>;
}

export default Greeting;

App.js

  import React, { Component } from 'react';
+ import Greeting from './Greeting';
  import Logo from './Logo';
  import './App.scss';

App.js

        <div className="App">
          <header className="App-header">
+           <Greeting />
            <Logo />
            <p>

ロゴの上に出た！

任意の入力「props」

まぁ、Google先生の翻訳から抜粋ですが、値を受け取ってそれを出せる的な器が、propsだそうな。
関数で言うところの引数ですな。ちょい、Greetingを変更してみる。

Greeting.js

import React from 'react';

function Greeting(props) {
    return <div>ようこそ、{props.name}さん</div>;
}

export default Greeting;

器(props)の中にあるnameを出力する感じにしてみる。

まぁ、そうなる。nameに何も入ってないし。
なので、入れてみる。

App.js

- <Greeting />
+ <Greeting name='おかあ' />

でたｗ

この記事のつづきでした。