React的首次使用
我的自我介绍
这是我第一次发帖。我是东京工业大学研究生一年级正在进行Web工程师求职活动的“ねぶ”。
虽然我在学校的课程和研究中有制作小作品的编程经验,但与周围的人相比,我觉得我的技能还不够。
但是,基于以下志愿:①喜欢学习的性格②想从事创作工作③喜欢默默工作④希望许多人能使用自己制作的东西,我感觉适合成为一名工程师,所以决定追求Web工程师职位。
在求职过程中,我觉得准备一个作品集很重要,所以我正在学习React。
此外,作为一名工程师,如果能在Qitta上写技术博客已经成为一种习惯,我接受了这个指导,尽管我知道质量可能不太高,但暂时决定写一篇。我会努力提高自己,尽快能够发布高水平的作品。
第一次在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" />
</>
);
}