Web_React #7

9461 ワード
React web テキストリンク
210819
Web_React #7
import React, {Component} from 'react';
import './App.css';

class App extends Component {
    render() {
        return (
            <div className="App">
                Hey~ React!!!
            </div>
        );
    }
}

export default App;
このコードはAppです.jsのコード.
ここでclass App extends Componentはreactが所有するComponentクラスを継承し、新しいAppというclassを作成します.表示には以下のrender()メソッドがあります.
これがcomponentを作成するコードです.
このコードを利用する前はpureでしたhtmlの<header>タグの内容をsubjectというタグに変換します.
-pure.html
<html>
    <body>
        <header>
            <h1>WEB</h1>
            world wide web!
        </header>

        <nav>
            <ul>
                <li>
                    <a href="1.html">HTML</a>
                </li>
                <li>
                    <a href="2.html">CSS</a>
                </li>
                <li>
                    <a href="3.html">JavaScript</a>
                </li>
            </ul>
        </nav>
        <article>
            <h2>HTML</h2>
            HTML is HyperText Markup Language.
        </article>

    </body>
</html>
-App.js
class Subject extends Component {
    render() {
        return (
            <header>
                <h1>WEB</h1>
                world wide web!
            </header>
        );
    }
}
App.jsにこのセクションを追加します.
では、このSubjectというクラスにはヘッダタグ部分の内容が含まれています.
次のステップでは、
class App extends Component {
    render() {
        return (<div className="App">
            Hey~ React!!!
        </div>);
    }
}
class App extends Component {
    render() {
        return (<div className="App">
            <Subject></Subject>
        </div>);
    }
}
修正してあげます.

div classがappのタグ内にheaderタグが現れた.
reactコードではSubjectですが、Webブラウザではヘッダーに置き換えられます.
最終的にHTMLコードがWebブラウザに提供されるのでReactの存在はわかりません.
このようにしてコンポーネントを作成できます.
リファレンス
https://www.inflearn.com/course/react-%EC%83%9D%ED%99%9C%EC%BD%94%EB%94%A9/lecture/20308?tab=note&mm=close
CH 07ファイルのアップロード
eos-unittest