2022年3月2日 React実践の教科書 モダンJavaScriptの機能に触れる イベントやスタイルの扱い方~

イベントの扱い方

ボタンを押したときのイベントの onClick をReactで行う場合をやっていきます。

ボタンの作成

App.jsx

export const App = () => {
  return(
    <>
     {console.log("test")} <= {}で囲う事でJavascriptも記述できます。
     <h1>こんにちは！</h1>
     <p>React学習中です。</p>
     <button>ボタン</button>  <= 追加
    </>
 );
};

• Reactではイベントはキャメルケースで記述します。
• return以降のjsxでJavaScriptを記述する際は{}で囲うことで可能です。

以上を踏まえて alert 機能を実装していきます。

App.jsx

export const App = () => {
  // onClickイベント時に発火する関数を定義しています。
  const onClickButton = () => {
    alert();
  };
  return(
    <>
     {console.log("test")} <= {}で囲う事でJavascriptも記述できます。
     <h1>こんにちは！</h1>
     <p>React学習中です。</p>
　　　　　　　　　　// {}で囲って関数を実行させるのをonClickイベント時に発生させる記述です。
     <button onClick={onClickButton}>ボタン</button>  <= 追加
    </>
 );
};

• onClickButton関数を定義しています。
• onClickイベント発火時にonClickButton関数が実行されるように記述しています。

これでボタンをクリックするとalertが出るようになります。

スタイルの扱い方

• 通常のHTML/CSS同様にタグにstyle属性を記述することで実現できます。
• CSSの各要素はJavaScriptのオブジェクトとして記述します。

App.jsx

export const App = () => {
  // onClickイベント時に発火する関数を定義しています。
  const onClickButton = () => {
    alert();
  };
  return(
    <>
     {console.log("test")} <= {}で囲う事でJavascriptも記述できます。
     <h1 style={{ color: "red" }}>こんにちは！</h1>
     <p>React学習中です。</p>
　　　　　　　　　　// {}で囲って関数を実行させるのをonClickイベント時に発生させる記述です。
     <button onClick={onClickButton}>ボタン</button>  <= 追加
    </>
 );
};

• styleを指定しイベントと同様にJavaScriptを書くので {}は二重になります。
• JavaScriptのオブジェクトなので “red” はクォーテーションで囲う必要があります。

JavaScriptのオブジェクトなので事前に定義しておいた変数を割り当てることもできます。 <p> タグに追加してみます。

App.jsx

export const App = () => {
  // onClickイベント時に発火する関数を定義しています。
  const onClickButton = () => {
    alert();
  };
  // CSSオブジェクト
　  const contentStyle = {
    color: "blue",
    fontSize: "20px"
  };

  return(
    <>
     {console.log("test")} <= {}で囲う事でJavascriptも記述できます。
     <h1 style={{ color: "red" }}>こんにちは！</h1>
     <p style={contentStyle}>React学習中です。</p>
　　　　　　　　　　// {}で囲って関数を実行させるのをonClickイベント時に発生させる記述です。
     <button onClick={onClickButton}>ボタン</button>  <= 追加
    </>
 );
};

• font-sizeではなくfontSizeとキャメルケースで書く点に注意しましょう。

最後に

読んでくださった方、ありがとうございます。

参考

本書のみ。