首先

最近我想学习前端框架，所以在Udemy上学习了一番。
然而，感觉自己并没有真正掌握，而且想要做一些更实践性的事情，
所以尝试了@Sicut_study（渡边仁）提供的React100本锤炼。

前面的文章

规则

• React, TypeScriptを使う

その他ツールやライブラリの使用は自由

制作物

创建计数器

成功的要求（摘录）

领域表达：存在一个用于显示数字的区域。
增加按钮：点击此按钮将使显示的数字增加1。
减少按钮：点击此按钮将使显示的数字减少1。
初始显示：应用启动时的数字为0。
状态管理：使用React的useState或useReducer来管理计数数字。

产物

运用技术

• React 18.2.0

• TypeScript 4.9.5

Chakra-UI 2.8.5

网址 zhǐ)

图片捕捉

个人电脑 (gè

SP

实施步骤

项目的设立

# React×TypeScriptのプロジェクト作成
npx create-react-app helloworld --template typescript

# ディレクトリ変更
cd helloworld

# Chakra-UIのインストール
npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion

# react-helmetのインストール
npm i react-helmet

创建组件

请确认存储库中的src文件夹。

部署

将GitHub与Netlify进行集成以进行部署。

最后

我在React100本敲门的第二轮中创建了一个叫Counter的应用程序。

我已经确认了如何使用 useState，但目前的情况是除了显示数字的组件，每次点击”+”或”-“按钮时，标题也会重新渲染。

将来如果需要开发大规模的应用程序，也需要确保避免不必要的重新渲染，所以我打算重新确认相关事项。

以下新闻