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

原创已于 2023-04-05 10:19:19 修改 · 1.6k 阅读

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>
  )}

Button.css如下
(也可以像视频中，先新建一个空的Button.css，
等运行项目后在chorme的开发者工具中一边编辑css一边观察效果)

.Button {
  display: block;
  background: #0078d4;
  color: white;
  padding: 5px 10px;
  outline: none;
  border: none;
}

.Button:hover {
  background: #005a9e;
}

.Button:active {
  background: #004578;
}

Counter.tsx如下

import React from 'react';
import {Button} from './Button.tsx';


export const Counter = props => {
  const [clicks, setClicks] = React.useState(0);
  const handleClick = () => setClicks(clicks + 1);
  const { text } = props;

  return (
    <div>
      {text}: {clicks}
      <Button onClick={handleClick}>Click</Button>
    </div>
  );
}

2 添加App

在src文件夹下，添加App.tsx文件如下

import React from 'react';
import { Counter } from './components/Counter.tsx';

export const App = props => {
  return (
    <div>
      <Counter text="chickens" />
      <Counter text="ducks" />
    </div>
  )
}

3 简单修改index

修改public/index.html的标题为Button Click Counter，修改后如下

<!DOCTYPE html>
<html>
  <head>
    <title>Button Click Counter</title>
  </head>

  <body>
    <div id="app"></div>
  </body>
</html>

将src/index.js重命名为src/index.tsx，且修改内容如下

import React from 'react';
import ReactDOM from 'react-dom';
import { App } from './App.tsx';


ReactDOM.render(
  <App />,
  document.getElementById('app')
);