React勉強備忘録(基礎知識編)

動作環境

---

npm 8.12.1
node 18.4.0
React 18.2.0

基礎知識

---

JSX

JSXは「JavaScript XML」の略
Javascript内にhtmlの記載ができる。
jsx内で、htmlのclass属性を実装するには、jsのclass(オブジェクト指向とかのクラス)と区別するために、classNameと記述する必要がある。
※ファイルの拡張子は.jsxにする。
　jsでもjsxを使用できるが、明示的に.jsxにしておいたほうが無難である。

import React from 'react'

const BasicHeadingOne = (props) => {
  return (
    <h1 className={props.className}>
      {props.text}
    </h1>
  )
}

export default BasicHeadingOne

記載方法

最上位のタグがないと文法上エラーとなってしまう。

import React from 'react'

const Article = () => {
  return (
    <> // ここが最上位のタグ
      <BasicHeadingOne text="jsxについて" />
      <p>jsxの特徴や、使用方法について紹介しています</p>
    </>
  )
}

export default Article

コンポーネント

Reactで開発を行う際は、コンポーネント単位でソースコードを記述していく

const TextInput = (props) => {
  const { type, name, value, className, onChange, required, id, onClick, placeholder } = props
  return (
    <input
      type={type}
      name={name}
      value={value}
      className={className}
      onChange={onChange}
      required={required}
      id={id}
      onClick={onClick}
      placeholder={placeholder}
    />
  )
}

export default TextInput

コンポーネントの種類

クラスコンポーネントと関数コンポーネントの２種類が存在する。

• クラスコンポーネント

import React from "react";

class ClassComponent extends React.Component {
  render() {
    return <div>This is Class Component</div>;
  }
}

• 関数コンポーネント

import React from "react";

const Component = () => {
  return <div>This is Functional Component</div>;
};

※現状は関数コンポーネントを使用するほうが一般的になっている。

Props

コンポーネントの再利用性を向上させるための仕組み
親コンポーネントから子コンポーネントへデータや関数を渡す際は、propsを使用する。
※子から親へのデータを渡すことは不可

import React from 'react'

const List = (props) => {
  return (
    <ul class="list-group">
      {props.list.map((data) => (
        <li key={index.toString()} class="list-group-item">
          {data.title}
        </li>
      ))}
    </ul>
  )
}

export default List

複数propsの渡し方

単純に記載するとこうなる。

return (
    <StockEditForm
    productName={productName}
    productImageUrl={productImageUrl}
    productUrl={productUrl}
    expiryDate={expiryDate}
    number={number}
    inputProductName={inputProductName}
    inputProductImageUrl={inputProductImageUrl}
    inputProductUrl={inputProductUrl}
    inputExpiryDate={inputExpiryDate}
    inputNumber={inputNumber}
    />
)

だが、これをスプレッド演算子で以下のように簡潔に記述できる。

<StockEditForm
  {...{
    productName,
    productImageUrl,
    productUrl,
    expiryDate,
    number,
    inputProductName,
    inputProductImageUrl,
    inputProductUrl,
    inputExpiryDate,
    inputNumber
  }}
/>

Children

子要素の数がいくつあってもpropsとして子要素をレンダリングすることが可能

import ...

const ...

return (
  <BasicWrapper className="wrapper-stock"> // ラッパー用のコンポーネント
    <Modal/>
    <Paragragh>
    ...
  </BasicWrapper>

import ...

const BasicWrapper = ({ children }) => {
    return <Wrapper>{children}</Wrapper>
}