Help us understand the problem. What is going on with this article?

なんやねん、JSXとか、コンポーネントとか!

More than 1 year has passed since last update.

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

公式サイトより (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もw)

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';

正常に出てる
スクリーンショット 2018-11-29 15.59.59.png

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

既成のソースを弄っているばかりだったので、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>

ロゴの上に出た!
スクリーンショット 2018-11-30 11.54.07.png

任意の入力「props」

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

Greeting.js
import React from 'react';

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

export default Greeting;

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

スクリーンショット 2018-11-30 11.54.26.png

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

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

でたw

スクリーンショット 2018-11-30 11.57.48.png

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away