自己紹介

初めての投稿になります。webエンジニア就活をしている東工大修士1年の「ねぶ」です。
学校の授業や研究に加えて趣味として小さな制作物を作るといったプログラミング経験はあるものの、周りに比べるとスキルは足りていないと思います。
しかし、①勉強好きな性格②物を作る仕事がしたい③黙々と作業するのが好き④自分の作ったものを多くの人が利用してほしい、といった志望があり、エンジニア向きだと感じることが多いのでwebエンジニアを志望しました。
就活においてポートフォリオを作っておいた方がいいと思ったので、今Reactを勉強しています。
また、エンジニアならQiitaに技術ブログを書くことが習慣になっているといいと指導を受けたので、質が低いことは承知ですがとりあえず一本書いてみることにしました。レベルが高いものをどんどん投稿出来るように頑張ります。

Reactでの初めての制作物

早速「基礎から学ぶ React/React Hooks」という本を参考に数字をカウントするものを作ってみました。(模倣品です)
作ったものはこちらです。
https://cf9y7g.csb.app/

Reactのコンポーネントの概念と「stateとprops」を理解出来ました。
以下は私のReactへの理解した事項です。間違っているかもしれないです。

Reactは部品(コンポーネント)を組み合わせるような設計をする
これは設計をやりやすくするだけでなく、高速にレンダリングすることも目的
ページ全てを再レンダリングするのではなく、部分的に再レンダリングをすることで、速度を上げている
そのためにstateとpropsという概念が必要

みたいなイメージを持っています。Reactは「高速なレンダリング」が他のフレームワークよりも優れている特徴だと思いました。

今回は以上です。

コードを載せておきます。

import "./styles.css";
import React, { useState } from "react";

const CounterText = (props) => <p>カウント：{props.num}</p>;
const resetNum = 0;
const Counter = (props) => {
  const [num, setNum] = useState(resetNum);
  const add = () => {
    return setNum(num + 1);
  };
  const sub = () => {
    return setNum(num - 1);
  };
  const reset = () => setNum(0);

  return (
    <>
      <p>{props.name}</p>
      <CounterText num={num} />
      <button onClick={add}>add</button>
      <button onClick={sub}>sub</button>
      <button onClick={reset}>reset</button>
    </>
  );
};

export default function App() {
  return (
    <>
      <Counter name="test1" />
      <Counter name="test2" />
      <Counter name="test3" />
    </>
  );
}

初めてのReact

自己紹介

Reactでの初めての制作物