React 入门实例学习笔记二、按钮点击计数器 Button Click Counter

原创

已于 2023-04-05 10:19:19 修改 · 1.5k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#react.js #学习 #javascript

于 2022-03-16 21:27:10 首次发布

这篇博客是关于使用React构建一个ButtonCounter应用的笔记，包括创建Button组件、Counter组件，设置App以及运行项目的详细步骤。作者通过VS Code检出分支，逐步添加组件并展示如何处理点击事件更新状态。博客还提供了修改后的index文件内容和运行项目后的效果，并给出了遇到报错时的解决建议。

博主介绍：大爽歌, b站小UP主，直播编程+红警三，python1对1辅导老师。

本博客为microsoft的的Frontend Bootcamp 的day1中 react 的学习笔记

笔记目录: React 入门实例学习笔记目录
请先看目录，按照目录先后顺序阅读实践
本博客有对应视频版本，具体见目录。

0 分支检出

使用vs-code 检出分支click-counter, 具体见视频:
【代码过程】 React 入门实例 TodoApp 学习梳理笔记

1 添加组件

在src文件夹下，新建components文件夹
文件夹中添加以下三个文件

Button.tsx 如下

import React from 'react';
import './Button.css'

export const Button = props => {
   
   
  return (
    <button className='Button' onClick={
   
   props.onClick}>
      {
   
   props.children}
    </button>
  )}