Reactの基本

[Haramaki0326]

JSX

全般

• JSXで書いているHTMLのようなタグの中（return以降等）では{ }で囲むことでJavascriptを記述できる

  const App = () => {
  return (
  <>
    {console.log('TEST')}
    <h1>こんにちは！</h1>
    <p>おげんきですか</p>
  </>
  );
  }

return

• return 以降が複数行になる場合は( ) で囲う
• return 以降は１つのタグで囲わなければならない

const App = () => {
  return (
    <div>
      <h1>こんにちは！</h1>
      <p>おげんきですか</p>
    </div>
  );
}

イベント

• イベント名はキャメルケースになる

  • × onclick, onchange
  • ○ onClick, onChange

    
    const App = () => {
    const onClickButton = () => {
    alert();
    }

  return ( <>

  こんにちは！

  おげんきですか

  ボタン

  </> ); }

スタイル

• HTML/CSSと同様、style属性 を記述する
• CSSの各要素はJavascriptのオブジェクトとして記述する
  • イベントと同様にJSを書くので、 style={}の記述になる
  • その中にオブジェクトでCSSに対応する要素を記述する
  • つまり、style={{}}の記述になる
  • JSのオブジェクトなので、値はred ではなく 'red' とする
  • 例: style={{ color: 'red' }}の記述になる
• JSのオブジェクトのプロパティ名は -(ハイフン)は認められていないので、イベントと同様CSSのプロパティ名も全てキャメルケースとなる
  • 例： font-sizeではなく fontSize となる

const App = () => {

  const contentStyle = {
    color: 'blue',
    fontSize: '20px'
  }

  return (
    <>
      <h1 style={{ color: 'red' }}>こんにちは！</h1>
      <p style={contentStyle}>おげんきですか</p>
      <button onClick={onClickButton}> ボタン </button>
    </>
  );
}

[Haramaki0326]

Props

基本

• Propsはコンポーネントに渡す引数のようなもの
• コンポーネントは受け取ったPropsに応じて表示するスタイルや内容を変化させる

App.jsx (Propsを渡す側)

import {} from "./components/ColoredMessage";

export const App = () => {

  return (
    <>
      <h1 style={{ color: 'red' }}>こんにちは！</h1>
      <ColoredMessage color='blue' message='お元気ですか？' />
      <button onClick={onClickButton}> ボタン </button>
    </>
  );
};

ColoredMessage.jsx (Propsを渡される側)

export const ColoredMessage = (props) => {

  const contentStyle = {
    color: props.color,
    fontSize: '20px'
  }

  return (
    <p style={contentStyle}>{props.message}</p>
  );
};

children

• コンポーネントも通常のHTMLタグと同様に任意の要素を囲って使用することができる
• 囲まれた部分がchildrenとしてpropsに設定される
• childrenが未設定
  • <ColoredMessage />
• childrenとしてfooを設定
  • <ColoredMessage> foo </ ColoredMessage>

App.jsx (Propsを渡す側)

import {} from "./components/ColoredMessage";

export const App = () => {

  return (
    <>
      <h1 style={{ color: 'red' }}>こんにちは！</h1>
      <ColoredMessage color='blue'>お元気ですか？</ ColoredMessage>
      <button onClick={onClickButton}> ボタン </button>
    </>
  );
};

ColoredMessage.jsx (Propsを渡される側)

export const ColoredMessage = (props) => {

  const contentStyle = {
    color: props.color,
    fontSize: '20px'
  }

  return (
    <p style={contentStyle}>{props.children}</p>
  );
};

分割代入（destructure）

• Propsを扱う場合に、毎回props.~ と記述するのは面倒

• そこで最初の段階でpropsを分割代入しておく

  export const ColoredMessage = (props) => {
  const { color, children } = props;
  
  const contentStyle = {
  color: color,
  fontSize: '20px'
  }
  
  return (
  <p style={contentStyle}>{children}</p>
  );
  };

[Haramaki0326]

exportの種類

• normal exportの方を利用するべし という記事が多く出てくるが判断保留

normal export

• import側は { }が必要
• importで指定したファイル内に一致する名称のexportがないとエラーになる

export側

export const SomeComponent = () => {};

import側

import { SomeComponent } from './SomeComponent';

default export

• export側は export defautl ~
• import側は { }は必要なく、任意の名前をつけれる
• ファイルごとに1つだけexportが可能

export側

const SomeComponent = () => {};
export default SomeComponent;

import側

import SomeComponent from './SomeComponent';