Reactとは？

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 1/42。

Reactは、ユーザーインターフェースを構築するための世界で最も人気のあるライブラリです。Facebook、Netflix、Airbnbなど、あなたが毎日利用するウェブのインタラクティブな部分は、これを使って構築されています。

基本的な考え方はシンプルです。1つの巨大なページを書く代わりに、componentと呼ばれる、小さく再利用可能なパーツを組み立てます。ボタンはcomponentです。プロフィールカードもcomponentです。ページ全体も、componentの中にあるcomponentにすぎません。

component は何も恐ろしいものではありません。JavaScript の 画面に表示されるものを returns する function です。

function App() {
    return <h1>Hello, React!</h1>;
}

JavaScript の中にある HTML のように見えるものは、JSX と呼ばれます。ロジックが存在する場所で、画面を記述できます。React はコンポーネントが返すものを受け取り、実際のページを同期した状態に保ちます。何を望んでいるかを記述すれば、ブラウザーをどのように更新するかは React が判断します。

このコースでは、小さな React アプリの main component である App.jsx を編集します。右側のプレビューには、type するとアプリがリアルタイムで表示されます。何かを作ってみましょう。

チャレンジ

初心者

ここに、あなたの first React component がすでに書かれています。

行うこと:

App.jsx を読みます: これは JSX を returns する function です。
Run ボタンを press します。
右側のプレビューで、component が返した内容が render される様子を確認します。

これが React の一連の流れ全体です: component が JSX を returns し、React がそれを画面に表示します。次のレッスンからは、自分で JSX を書きます。

自分で試してみよう

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>