React Getting Started Example Study Notes 2. Button Click Counter Button Click Counter

Blogger introduction: Da Shuangge, B station’s small UP owner, Live programming + red Police three, python 1 to 1 tutor.

This blog is the study notes of react in day1 of microsoft'sFrontend Bootcamp

Notes directory: React introductory example study notes directory
Please read the directory first and read the practice in the order of the directory
This blog has a corresponding video version, see the directory for details.

0 branch checkout

Use vs-code to check out the branchclick-counter, see the video for details:
[Code Process] React Getting Started Example TodoApp Learning Notes

1 Add components

In thesrc folder, create a newcomponents folder
and add the following three files a>

Button.tsxas follows

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

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

Button.cssAs follows
(You can also create an empty one firstButton.css as in the video,
and then run the project Observe the effect while editing css in Chrome's developer tools)

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

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

.Button:active {
    
    
  background: #004578;
}

Counter.tsxas follows

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 Add App

presentsrctext item, additionApp.tsxtext item below

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

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

3 Simple modification of index

Modify the title of public/index.html toButton Click Counter, and the revised title is as follows

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

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

Renamesrc/index.js tosrc/index.tsx, and modify the content as follows

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


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

4 Operation and others

Enter the commandnpm start in the terminal to run the project
The effect is as follows

Please add image description

Click the button and the corresponding number will increase by 1

If in vscode, the program runs correctly but there is an error message in after the import statement, you can turn off the error message. The closing method is as follows.tsx

Please add image description

Finally submit the changes to github