create-react-app and React function component

React function component v.s. class component, React¹⁷.0.2, npx create-react-app, Typescript⁴.1.2, web-vitals, Created at July 21, 2021, Read Series…

React ^17.0.2 and Typescript ^4.1.2

Execute create-react-app command to create a new react application, using typescript. You can goto Basic-1.1. create-react-app commit to find out committed files.

npm uninstall -g create-react-app
npm install -g create-react-app
npx create-react-app react17mui4 --template typescript

[Try to understand] Run this application with one of following:

npm start
npm run start

Check typescript version: you will see Version 4.1.3, when

tsc -v

React Functional Components and Class Components

Chose function component, for the following reasons:

• Less code
• Much easier to read and test because they are plain JavaScript functions without state or lifecycle-hooks
• Easier to separate container and presentational components
• May be a performance boost for functional component in future React versions

[Try to understand] this is simplest example
[Try to understand] return (…) in function component.
[Try to understand] render() { return (…); } in class component.
[Try to understand] there are a lot of difference between function component v.s. class component

React Functional Components example

// src/App.tsx Equivalent functional component
import React from 'react';
import logo from './logo.svg';
import './App.css';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}
export default App;

React Class Components example

// src/App.tsx Equivalent class component
import React from 'react';
import logo from './logo.svg';
import './App.css';
export default class App extends React.Component {
  render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.tsx</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
      </div>
    );
  }
}
export default App;

For differences between Functional Components and Class Components:

+=============================+=============================+
|   Functional Components     |   Class Components          |
+=============================+=============================+
|A functional component is    |A class component requires   |
|just a plain JavaScript      |you to extend from React.    |
|function that accepts props  |Component and create a       |
|as an argument and returns   |render function which        |
|a React element.             |returns a React element.     |
+=============================+=============================+
|No render method used in     |Must have the render()       |
|functional component         |method returning HTML.       |
+=============================+=============================+
|Stateless components, simply |Stateful components because  |
|accept data and display in   |implement logic and state.   |
|some form, only responsible  |                             |
|for rendering UI.            |                             | 
+=============================+=============================+
|React lifecycle methods (for |React lifecycle methods can  |
|example, componentDidMount)  |be used inside class         |
|cannot be used in functional |components (for example,     |
|components.                  |componentDidMount).          |
+=============================+=============================+

reportWebVitals.ts: web-vitals, tiny (~1K), comes together with create-react-app: for measuring all the Web Vitals metrics on real users, in a way that accurately matches how they’re measured by Chrome and reported to other Google tools. Referenced in src/index.tsx.

Github commits is here: Basic-1.1. create-react-app

Conclusion

Choosefunction component .