react

Reactにおける基本概念についてのまとめ

component周りの仕組みがなんとなくわかってきたので簡単にまとめました。

入門者に向けて

実はこのサイト自体もReactで書かれていて、我流でそれっぽい機能を実装していくうちに徐々に理解が進んで行きました。そしてこの記事を執筆中に全てはReact公式ドキュメントに書かれていたことに気づきました。

個人的お勧めの入門方法

ということで僕と違って効率的に学習を進めたいという人はネットに転がっている良さげなチュートリアルをこなすと手っ取り早く勘所を習得できると思います。最近の投稿かつQiitaでいいねがたくさんついていたやつ↓

【React+TypeScript】Netflixのクローンを作るチュートリアル

Reactのコンセプト

自分なりの理解としてはあらかたこのような感じです。

  • ヘッダーやフッターといったサイトを構成する部品を各Componentとして管理し、適宜呼び出すことでテンプレートやページを生成します。
  • ComponentにはProps(=プロパティ)が設定できます。Componentを呼び出す時、Propsに対して任意の値を渡すことができます。
  • JSX(JavascriptでHTMLを生成できる言語)で記述でき、Propsと合わせてレンダリングする対象および中身を動的に生成することができます。

それでは以上を踏まえて順次解説をしていきます。

Componentの取り扱い

Componentは直訳の通り「部品」です。部品ということで使い回すことができます。また、Component自体がライブラリとして公開されていたりもします。

Componentの作成
import React from "react";

export const SampleComponent: React.FC = () => {
  return (
    <p>やあ</p>
  )
}
Componentの呼び出し
import SampleComponent from "../components/SampleComponent" //使用したいComponentのファイルパスを指定しimportしておく。

<SampleComponent/>

Propsの作成と値渡し

大抵のcomponentにはProps(=プロパティ)が用意されています。componentにPropsを渡すことができます。このようにpropsのデータモデルを持つinterfaceを定義し、それをSampleComponentに継承させます。

//SampleComponent.tsx
import React from "react";

export interface SampleProps {
  title: string;
}

export const SampleComponent: React.FC<SampleProps> = props => {
  return (
    <p>{props.title}</p>
  )
}

こんな感じでpropsに値を渡すことができます。

//index.tsx
import SampleComponent from "../components/SampleComponent"

<SampleComponent title="うぉううぉう" />

Propsに加えて定数として定義したCSSを渡すこともできます。(後述)

JSXの書き方

JSX と呼ばれる JavaScript の構文の拡張です。~あらゆる有効な JavaScript の式を JSX 内で中括弧に囲んで使用できます。

JSXの導入より引用

例えばifを使ったレンダリングの条件分岐やmap等を使った並び替え、ソートなどを行うことができます。propsに対して処理を行うことが多いです。

基礎的なjavascriptの文法を知っていれば苦労することはないはずです。当然かもしれませんがレンダリングさせたいHTMLをretrunする必要があります。

Javascriptの実行

ifなどの構文や関数を実行したい場合は{}で囲った中にJSを記述します。

条件分岐
{
  if (props.title === "あああ") {
  	return (
      //html
  	)
	} else {
  	return (
    	//html
  	)
	}
}
変数展開

文字列の中で行いたいときは${}とします。

`${ props.title }を見る`

CSSを当てる

cssを定数として定義しておくことで使いまわすことができます。要素に対して複数個のCSSを当てています。

//index.tsx

import SampleComponent

<div css={[inner, SampleComponentCSS]}>
</div>

const SampleComponentCss = css`
  color: rgba(255, 255, 255, 0.7);
  p {
    color: rgba(255, 255, 255, 0.7);
  }
`;

Componentに対しても、Propsへの値渡しと同じような要領で当てることができます。

<SampleComponent css={SampleComponentCss} title="うぉううぉう"  />

読んでいただきありがとうございます!!

記事として取り上げたトピックを体系化してまとめた内容を電子書籍として販売しています。購入していただくことで執筆の応援ができます。詳細はこちらから