3. Component - Kite0301/react-my-app GitHub Wiki

ここからは「タスク管理アプリ」を作成しながら、Reactの使い方を学習していきましょう。

どのようなWebページも、様々なパーツから構成されています。
ヘッダーや見出し、ボタンなどのパーツが組み合わさって1つのページとなります。

このようなそれぞれのパーツのことを Component（コンポーネント） と呼び、Reactではこのコンポーネントをいくつか用意して組み合わせることでWebページを作成していきます。

ではまずは Main というコンポーネントを作成してみましょう。

import React from 'react';
import ReactDOM from 'react-dom';

class Main extends React.Component {
  render() {
    return (
      <h1>タスク一覧</h1>
    );
  }
}

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

classから始まる部分が1つのコンポーネントです。
render() の return の値が実際に表示される内容です。

ReactDOM.render 内の <h1>Hello World</h1> の部分を <Main /> と書き換えています。
このように書くことで、Main コンポーネントを呼び出し、表示させることができます。

さらにコードを追加してみましょう。
以下のように、<h1>タグを<div>タグで囲んでみましょう。

render() {
  return (
    <div>
      <h1>タスク一覧</h1>
    </div>
  );
}

追加した<div>にクラス名を付けてみます。
ただし、ここまでで書いてきたHTMLは実はHTMLではなく、HTMLによく似た JSX と呼ばれるものです。
そのため、クラス名の付け方がHTMLとは少し異なります。

render() {
  return (
    <div className='main'>
      <h1>タスク一覧</h1>
    </div>
  );
}

このように、classではなくclassNameとすることでクラスを付けられます。

さらにコードを追加してみましょう。
以下のようにtasksというクラスを持つ<div>を追加してください。

<div className='main'>
  <h1>タスク一覧</h1>
  <div className='tasks'></div>
</div>

コンポーネントとは最初に説明した通り「パーツ」であり、いくつも用意することが可能です。
ここではタスク一覧の1つ1つのリストをListというコンポーネントとして用意してみましょう。

コンポーネントの書き方はMainの時と同じです。
Mainコンポーネントより前に、以下のコードを追加してください。

class List extends React.Component {
  render() {
    return (
      <div className='list'>
        <i className='far fa-circle' />
        トイレ掃除
      </div>
    );
  }
}

このListコンポーネントをMainの中で呼び出します。

class Main extends React.Component {
  render() {
    return (
      <div className='main'>
        <h1>タスク一覧</h1>
        <div className='tasks'>
          <List />
        </div>
      </div>
    );
  }
}

なお、List内の

<i className='far fa-circle' />

の部分は

<i className='far fa-circle'></i>

の省略した書き方です。
このように、中身テキストがない場合には省略して書くことができます。

※ クラス名の far fa-circle に関しては後ほど説明します。

この時点での「index.js」のコードはこちらから確認できます。

3. Component - Kite0301/react-my-app GitHub Wiki

⚠️ **GitHub.com Fallback** ⚠️

⚠️ GitHub.com Fallback ⚠️