ReactTypeScript:  .  
 


    ,     -,    ,  React  TypeScript.                .     ,      ,         .





ReactTypeScript:  

 



 



 ,2023



ISBN978-5-0060-9759-9

     Ridero







  .       ,  -    ,   ,  ,        ,       .



    ,     -,    ,  React TypeScript.       頖     .    ,     ,        .

,       JavaScript, HTML CSS.     ,       .









 1:  React TypeScript

 React TypeScript1

   6

  React10

JSX  20

   25

  props state32

   40

   props React43

 :

  React:.js,.jsx,.tsx50

  React Hooks51


 2:   

  React52

   57

  61

   65

 :

Babel71



 3:   

 API  72

    78

 82

     91

 :

 HTTP POST 蠫GET99

JSON 101



 4:  

  React (React Router)102

 o 105

 110

 :

 map () JavaScript120

 reduce () JavaScript121



 5: TypeScript React

 TypeScript:    122

 TypeScript  React127

   TypeScript:

Type, Interface Generics129

   TypeScript134

 :

  TypeScript138



 6:   React TypeScript

 TypeScript140

    143

 props state 146

   150

  (generics) React153

 :

 . d. ts157



 7: 

    159

Redux   164

  Redux Thunk170

  175

 :

 fetch177



 8:  

 

 Jest React Testing Library178

  

 ,   Webpack Babel182

 :

    React-185

 9:  




 1.  React TypeScript





 1.  React TypeScript



  -     , React TypeScript       .

TypeScript   ,    JavaScript,   .       ,     ,   .           .

  TypeScript :

 . TypeScript    JavaScript,        .     ,        . Ѡ TypeScript      , , [1 -  (props)   ,    React     .]  ,       .

  IDE[2 - IDE (Integrated Development Environment)  ,   ,       .]. TypeScript        (IDE): Visual Studio Code, WebStorm, Sublime Text, Atom, Eclipse, IntelliJ IDEA, NetBeans.      ,   ,    .

   .  TypeScript   .    ,   ,       .

[3 -  (refactoring)            .   ࠖ  ,    ,  ,     ]. TypeScript   ,   IDE            .     .

   . TypeScript       React,       .

  . TypeScript      ,        ,     .

  .      ,         .

  ,   ECMAScript[4 - ECMAScript (  ES)    ,    JavaScript.    ,  ,    ,     JavaScript.] React. TypeScript     JavaScript React,        .

  React TypeScript    ,       .      ,        .

React   ,       -   .  2013, React       -.          ,         .       ,           .

  React    :

 . React  ,        .  ,     ,     .

 DOM[5 - DOM    -     ,        -] (  ). React   DOM,        ,  ,     DOM.    .

 JSX[6 - JSX   ,  React (  ),    ,     (HTML)  .] (JavaScript XML)  JSX      .    HTML-   JavaScript.

  [7 -    (One-Way Data Flow)  ,        , ,       ,    .]. React    ,       .

 .       ,      .     ,     .

  . React        ,      .

  [8 -   (Server-Side Rendering, SSR)    -,    HTML-  -  ,   ().       HTML-       JavaScript,  SSR      -.]. React    ,   SEO  -.

 . React      .   React   .

  . React     ,  React DevTools[9 - React DevTools      ,     ,    React.] Create React App[10 - Create React App (CRA)    ,   ,   ,  React.],   ,      .

   .    ,   React Native,          React.

  TypeScript, React         -   .               .

  React TypeScript :

 . TypeScript     ,     .

 . TypeScript     ,      .

  . React TypeScript      ,     .

 React TypeScript          -.  ,       ,        .

  .     React TypeScript    ,         .

  . React TypeScript        -.

  .     React        .

  .  React TypeScript         .







React TypeScript    -,       ,   .       ,       .

 React TypeScript   ,        ,  - -   .      , React TypeScript    -, ,        .

  React TypeScript         ,     .




 2.    



      React TypeScript,      .             -.




2.1 Node. js npm


Node. js    JavaScript,    JavaScript  .       npm (Node Package Manager),         .   Node. js     npm (Node Package Manager).

   Node. js npm:

   Node. js (https://nodejs.org/)       (Windows, macOS, Linux).

    .

  ,   ( )   node -v,    Node. js, npm -v,    npm.     , ,   .

     Node. js  PATH  .




2.2 


   React TypeScript,      ,  TypeScript.         ࠖ Visual Studio Code,      .

 ,     ,   .

    :

ESLint:    .

Prettier:    .

Reactjs code snippets:    React-.

Auto Complete Tag:   HTML/XML    .

Code Runner:    ( , )     .

    Visual Studio Code.   Extensions (  Ctrl+Shift+X).        .   Install ()  .

 , ,     .




2.3   Create ReactApp


Create React App  ,       React      .   ,   ,    ,       .

  Create ReactApp:

 .    React    . CRA      .

 . CRA    Webpack, Babel  ,     .

  . CRA     .       .

 . CRA        -.

   : CRA  ,   npm start   npm build     .

 , Create React App     React       ,     .

    Create React App   :

          Create React App   :

npm install -g create-react-app

   React,  my-app   :

npx create-react-app my-app

     my-app   .

  :

cd my-app

  :

npm start

       .




2.4 TypeScript


,     React,   Create React App,     TypeScript.

   TypeScript :

  ,   ,  Ctrl + C .

     TypeScript  :

npm install save typescript @types/node @types/react @types/react-dom @types/jest

    . js . tsx[11 - .tsx  ,    TypeScript  JSX.],    TypeScript.

        TypeScript.

:   React Typescript  ,  : npx create-react-app template typescript my-app




2.5


    React TypeScript        -.      Node. js npm,    Create React App,      . Node. js    JavaScript , npm  ,   .  ,  TypeScript   ,    .        .

             React TypeScript.         .

         -  React TypeScript.




 3.   React



      React TypeScript,       React.          .




3.1  React


 React,       .       ,       (HTML-),  .

 React     :

 :  ,     (props)  JSX,   .

 :  ,    React.Component    (state)   .

     React      . ,   React 16.8,   (, useState),     ,     .

      :

 .            .

.        ,       .

 .      .    ,   ,   Jest,    .

,  ,      :

  .        (, componentDidMount, componentDidUpdate),        .

 .               this.setState.

 .          .

  ,         ,    .   ,         ,         .




3.2  


     React.

   React  src.

  src    . tsx (, MyComponent. tsx).

     .

  ,     :

		import React from react
		function MyComponent (){
		return(
		<div>
		<h1> ,     React! </h1>
		</div>
		)
		}
		export default MyComponent;
		 ,  :
		   React.
		   MyComponent,  JSX.
		 JSX,    div .   HTML, JSX   React,     .
		 export default,          .




3.3  


,    ,    .

  src/App. tsx (  js tsx).

    :

		import React from react
		import MyComponent from. /MyComponent
		function App (){
		return(
		<div>
		<h1>   React </h1>
		<MyComponent/>
		</div>
		);
		}
		export defaultApp

   MyComponent    App.

1:

     .

2:

   React ( 17.0.0)      React  react.   ,     Babel    React  JSX   .     ,      ,       React .          .



 index. js App.js

index. js 蠫App. js   ,   React-.    ,    :

index. js ( index. tsx).    React-.      ,    .    React     HTML- -.      ReactDOM.render    DOM.

App. js ( App. tsx)    React-.     ,      .   App   (   ), ,     ,  .

 index.js:

		import React from react
		import ReactDOM from react-dom/client
		import. /index.css
		import App from. /App
		import reportWebVitals from. /reportWebVitals

		const root = ReactDOM.createRoot(document.getElementById (root) as HTMLElement)
		root.render(
		<React.StrictMode>
		<App/>
		</React.StrictMode>
		);
		reportWebVitals()

reportWebVitals  ,  Create React App    .      Google Analytics (),        .        ,   ,     .          .          .  ,     reportWebVitals   ,         index. js.     .

<React.StrictMode>  ,  React,        .   -[12 - - (production build)     ,       .],      .

     :

   . ,        ,       React.

   .         (,  ,    ), <React.StrictMode>    .

  API.       React API .

 document.getElementById (root) as HTMLElement ,       root DOM (Document Object Model) -    HTMLElement.       Type Assertion[13 - Type Assertion (   Type Casting)    TypeScript   ,         .       ,  TypeScript  ,   .] TypeScript,       .

 :

document  ,  - .

getElementById (root)    document,     -   root.

as HTMLElement  TypeScript-,       .   ,   ,    getElementById (root)       HTMLElement.

  ,  TypeScript     ,    ,   .   ,  ,    root    HTMLElement.

 App.js:

		import React from react
		import. /App.css

		function App (){
		return(
		<div className=App>
		<header>
		<h1>  React- </h1>
		</header>
		<main>
		{/*      */}
		</main>
		</div>
		);
		}

		export defaultApp

  tsconfig.json

 tsconfig. json     TypeScript,        TypeScript-[14 - TypeScript-  ,  TypeScript,    ,  TypeScript,  JavaScript-.] (tsc).        ,  TypeScript     .  , tsconfig. json    ,  TypeScript ,     JavaScript.

  tsconfig. json         TypeScript.   :

compilerOptions:      TypeScript.    :

target:   JavaScript,    TypeScript- (, ES5  ES6).

module: ,  TypeScript    (, CommonJS, ESNext).

outDir:  ,     .

strict:     .

jsx: ,  TypeScript   JSX (, react  preserve).

include exclude:   ,   TypeScript     (include)    (exclude).

extends:            .

files include: ,     TypeScript    .       .

exclude: ,     TypeScript   .        .

baseUrl paths:      ,      TypeScript.

  tsconfig. json  , ,     ,        .       TypeScript-       .   tsconfig. json             .      tsconfig. json   :

		{
		compilerOptions:{
		target: es5,
		lib:[
		dom,
		"dom.iterable,
		esnext
		],
		allowJs: true,
		skipLibCheck: true,
		esModuleInterop: true,
		allowSyntheticDefaultImports: true,
		strict: true,
		forceConsistentCasingInFileNames: true,
		noFallthroughCasesInSwitch: true,
		module: esnext,
		moduleResolution: node,
		resolveJsonModule: true,
		isolatedModules: true,
		noEmit: true,
		jsx: react-jsx
		},
		include:[
		src

]

}




3.6 README.md


 README.md  TypeScript (   )      ,    .           ,    .  README.md     ,   ,      [15 -  (Dependencies) React TypeScript     ,  ,       .] .  , README.md    ,   ,         ,        .

  README.md   TypeScript  :

 .   README.md ,    .     ,  ,    .

. ,     . ,    ,   [16 -   (Package Manager)  ,        ,   .     , ,    ,    .]  (, npm  yarn)   .

.      ,    . ,   ,     .

.       ,   .        ,   ,      .

 [17 -   (Project Structure)    ,     .].      .       .

.   ,     .         .

 .    -, [18 -  (Repository)   ,    ,          .] GitHub   ,  ,   .         .

   README.md   TypeScript:

#  TypeScript

     README.md    TypeScript.

## 

1.   npm:

```bash

npm install




3.7 


,      ( ),   Ctrl + C .

     :

npm start

    http://localhost:3000.      MyComponent   .

    蠖       ,   .           .           ,      .




3.8


       React.       ,     .

        .   React          .

  React     ,         ,    .

      JSX  ,         .




 4. JSX  



JSX (JavaScript XML)     JavaScript,   React     .       JavaScript   ,   JSX      .

      JSX     .        React    .  JSX      React,     .




4.1JSX


JSX    JavaScript,    HTML-   JavaScript.     JavaScript,  React        .     JSX,     JavaScript,  React       .  , JSX  ,       ,    JavaScript.

JSX:

const element = <h1> Hello, World! </h1>;



   <h1> Hello, World! </h1>  JSX ,      .




4.2 JSX


       JSX,   React   . JSX  HTML,     :



.  JSX     ,  HTML. ,       <div>,  ࠖ <h1>,   <img>.    ,    <className>  <class>    .

 .      JSX ,  HTML. ,          src alt.

 . JSX    ,  HTML.  ,        :

		<div>
		<h1>  </h1>
		<p>  </p>
		</div>

.    JSX     JavaScript      {}.   . ,      name :

		const name = John
		const greeting = <p> , {name}! </p>;

   JSX   class className,    ,   for htmlFor    class for.         JavaScript HTML.




4.3JSX


  JSX -,   React ,   ,   JSX,    -   .       -,      .

  JSX React:

		import React from react
		import ReactDOM from react-dom
		const element = <h1> Hello, React! </h1>
		ReactDOM.render (element, document.getElementById (root))
		<h1> Hello, React! </h1>
		ReactDOM.render()

:

JSX  <h1> Hello, React! </h1>   element.

ReactDOM  ,  React,     DOM (Document Object Model) -.   React-       DOM   DOM.

ReactDOM.render ()    element   root -.

  ReactDOM :

ReactDOM.render (element, container):      React-     ( div   HTML-).      DOM   DOM.

ReactDOM. hydrate (element, container):    ReactDOM.render,    (hydration)   [19 -     ,   -     ,      ,    .].  ,  React       ,  .

ReactDOM. unmountComponentAtNode (container):      () React-,      .

 ,   ReactDOM.createPortal,    React-    DOM.

:  DOM (Document Object Model)  DOM     ,    -.

DOM:

 DOM     -,  .    ,       .

  DOM    .   , ,    ,       .

DOM:

 DOM     -,    (  JavaScript).    DOM.

  DOM  ,      .      DOM ,   DOM.

    DOM   DOM,     .       ,        ,   ,  .

 ,  DOM         React  ,   DOM.




4.4JSX


 JSX React   :

 . JSX      HTML,     .      ,       .

 .      JavaScript JSX    {},      .          -.

. JSX   ,      .      ,      .

 JSX React   ,     .




4.5


JSX        React,    ,    -.         JavaScript,         -.

      JSX     ,     ()  ,  ,    .




 5.    



       React ,  ,     .      React-        .




5.1 


  React   .     .

    JavaScript   ,     (props)  JSX ,    .       React Hooks[20 - React Hooks  ,   React,       React  .]    :

 .       ,   .     JavaScript-,     .

 Hooks. Ѡ React Hooks ( : useState, useEffect  )         ,   .       , ,  :  ,     .

 this.       this,      ,   .

 .        -   ,    .

 .        ,         (props)   ( JSX).

  :

		import React from react
		function MyComponent (){
		return <h1> ,    ! </h1>
		}
		export default MyComponent

       React.

     JavaScript    React.Component.      :

 (State).      ,        ,  .        setState,     .

  (Lifecycle).       ,   componentDidMount, componentDidUpdate, componentWillUnmount.   ࠖ   ,       . , componentDidMount   ,     DOM.       ,   .

 (Props).      ,    props.    ,          .

 (Context).       React             .

  :



import React, {Component} from react

class MyComponent extends Component{

render (){

return <h1> ,   ! </h1>

}

}

export default MyComponent




5.2 


      ,        JSX.

   :

		import React from react
		import MyComponent from. /MyComponent
		function App (){
		return(
		<div>
		<h1>   React </h1>
		<MyComponent/>
		</div>
		);
		}
		export defaultApp




5.3 


   React                   .     ,    .       React:

 .  React      ,  .      ,  ,     .

 (Props)  (State).        ( )  ( ).         ,       .            .

 .     ,       .    ,    ,      .

 .           .      .

  .           .       ,     .

  :

		import React from react
		function Header (){
		return <h1>  </h1>
		}
		function Sidebar (){
		return(
		<div>
		<h2>   </h2>
		</div>
		)
		}
		function App (){
		return(
		<div>
		<Header/>
		<Sidebar/>
		<p>  </p>
		</div>
		)
		}
		export defaultApp

   Header Sidebar   ,   App.        ,   .




5.4  


   (Higher Order Component, HOC) React  ,        .

,   ,     -    ,      .          ,    HOC.    ,      .

 , HOC        .

,        ,        , HOC         .

:    UserComponent,    :

		import React from react

		const UserComponent = (props) =>{
		return <div> , {props.name}! </div>;
		}

		export default UserComponent

          .     HOC:

		import React, {Component} from react;

		const withDataFetching = (WrappedComponent) =>{
		return class extends Component{
		constructor (props){
		super (props);
		this.state ={
		data: null,
		loading: true,
		}
		}

		async componentDidMount (){
		try{
		const response = await fetch(this.props.url)
		const data = await response. json()
		this.setState ({data, loading: false})
		} catch (error){
		console.error (:, error)
		this.setState ({loading: false})
		}
		}

		render (){
		return(
		<WrappedComponent
		{this.props}
		data={this.state. data}
		loading={this.state. loading}
		/>
		)
		}
		}
		}

		export default withDataFetching

    HOC withDataFetching,     URL    .        UserComponent:

		import React from react
		import withDataFetching from. /withDataFetching

		const UserComponent = (props) =>{
		return(
		<div>
		{props. loading?(
		
		):(
		<div>
		, {props.data.name}!
		<p> Email: {props. data. email}</p>
		</div>
		)}
		</div>
		);
		}

		export default withDataFetching (UserComponent)

 UserComponent     HOC withDataFetching




5.5


    ,    React   .  ,      ,       .

   ,   ,   .  ,      ,       .     ,  ,       ,    .

       React,        .      ,    , ,    .        React ,     .




 6.   props state



 React props state       ,     .     ,   props state      React.




6.1 props state


Props ( properties)       React.     ,     . Props        ,  .

 ,  props  ,  ,        .           , ,         .

:     ,      ,     .     ,      .

  props:

. Props       , ,      .   props          .

:

		function UserProfile (props){
		return(
		<div>
		<p> Name: {props.name}</p>
		<p> Age: {props.age}</p>
		{/*  */}
		</div>

)

}



 .    props    ,    ,    ,     .

 :       props,  ,    . ,  props.age  ,     .

:

		function UserProfile (props){
		const age = props.age || 25//  
		return(
		<div>
		<p> Name: {props.name}</p>
		<p> Age: {age}</p>
		</div>

)

}



  props      React,          .       .

,  props   data, parameters, options    ,        .  ,            ,       .

     :

		function PersonInfo (data){
		return(
		<div>
		<p> : {data.name}</p>
		<p> : {data.age}</p>
		</div>

)

}



  :

<PersonInfoname= age= {30}/>



 ,    props    ࠖ     React,          ,  React.     props     ,       .

,       ,     ,    .            .

State     ,       .       ,    .

:     ,       .      ,  ,  ,     .

		import React, {useState} from react
		function Counter (){
		const [count, setCount] = useState(0)

		const increment = () =>{
		setCount (count+1)
		}

		return(
		<div>
		<p>  : {count}</p>
		<button onClick= {increment}>  </button>
		</div>
		)
		}
		function App (){
		return <Counter/>
		}

		export defaultApp

count      (),    useState, setCount  ,       .   , increment  setCount,    count.

, :

 (Props)  ,     ,  .

 (State)  ,         .




6.2 


    ,   , ,   ,   .    React  .

     React:

 .        .        ()    JSX.

  ().      ,  props (  )  this.props (  ).

   .     ,  ,       .      .

 .       ,   ,      .

  (Type Checking). React       PropTypes (  )  propTypes (  ).       .



 :

		import React from react
		function Welcome (props){
		return <h1> , {props.name}! </h1>
		}
		function App (){
		return <Welcomename=John/>
		}
		export defaultApp

    App  name=John   Welcome  props.

    ,        



 state

 (state) React   ,   ,   ,    ,          .

    React:

  .      ,  ,       .       .

.              useState  .

 .      setState (  )  ,   useState (  ).    React   .

.       ,        . React        .

 (Immutability).    ,      .        .

 .        ,       .

 , state    ,      .           setState().

 :

		import React, {Component} from react
		class Counter extends Component{
		constructor (props){
		super (props)
		this.state = {count:0}
		}
		incrementCount = () =>{
		this.setState ({count: this.state.count+1})
		}
		render (){
		return(
		<div>
		<p> : {this.state.count}</p>
		<button onClick={this.incrementCount}>  </button>
		</div>
		)
		}
		}
		function App (){
		return <Counter/>
		}
		export defaultApp

  .

    React-,       .   props       super (props),     .           .

,   React         (useState, useEffect, ..),         .    React    .

 ,   ,     (,  )           .

constructor (props):         props (),     .  , props   ,    .

super (props):       ( React.Component).  ,        React     (props).

this.state = {count: 0};:      .   ,    count    0. 堖     React    ,     -.

,       ,      .   ,         .

    Counter ()   state,        .  setState ()   ,    .



  

 (props)      ,      React  . Ѡ  (state),      ,        ,             .  ,  props  ,       ,    state   ,   .

  (props),       .

  (state),     ,      .

,  props  , state  .




6.5


 props state React        .            .       state      ,    .    props state       .

  ,       ,         React-.




 7.    



    React           .             .




7.1   


  ࠖ   ,  React,       .           ,   ,   .  ,                .  ,          React-.




7.2   


 React        ,      (  DOM)  ( DOM).    :

 (Mounting):

constructor ():     .      .

static getDerivedStateFromProps (): ,   render,         .

render ():   ,     .

componentDidMount ():      DOM.    ,     DOM, ,  .

 (Unmounting):

componentWillUnmount ():     DOM.    ,       .

        ,       . , React      ,   componentDidUpdate,          props  state.




7.3    


     :

		import React, {Component} from react
		class Timer extends Component{
		constructor (props){
		super (props)
		this.state = {seconds:0}
		}
		componentDidMount (){
		this.intervalId = setInterval (() =>{
		this.setState ({seconds: this.state.seconds+1})
		}, 1000)
		}
		componentWillUnmount (){
		clearInterval(this.intervalId)
		}
		render (){
		return <p> : {this.state.seconds}</p>
		}
		}
		function App (){
		return <Timer/>
		}
		export defaultApp

  :

  constructor    .

  componentDidMount  ,      seconds .

  componentWillUnmount      DOM,    .




7.4


    React        .  ,        ,    .

        ,     ,      .       ,    React-.

          ,    ,       ,    React-.




 8.    props React



   props  ,      .  ,            .




8.1  props React


 React, props ( properties  )   ,          .     ,      .       JSX   .

  . Ӡ    ParentComponent   ChildComponent.      message      :

		//  
		function ParentComponent (){
		return <ChildComponentmessage=, !/>
		}

		//  
		function ChildComponent (props){
		return <div>{props.message} </div>

}



  ,  message    ParentComponent   ChildComponent  :

  ,    ChildComponent,    message    ⠫, !.

   ChildComponent,       props.     ,   props.message      .

 ,   props React     ,        .  props           .

 props      (  , , ), ,     .

   ,  React        props,        .        ,   ,      props.   [21 -     ,   ,   (  ),     .       ,     (  )   .]     .




8.2  props 


 React    ,        .  React      ,   堫    .             props.

 ,  ,    ,    :

 .    ,       ,           .  , ,    .

 .     ,    ,  ,       props        .

 children.      children,      JSX  .   ,      props.children,     ,   ,     JSX   .

 ,  props React           .




8.3  props


React    props       JSX,      .  props      ,      .  ,   :

 .    React, ,   ,    ,   .

:

function MyComponent (props){

//

}



  JSX.    JSX,   ,   . :

<MyComponentname=John age= {30}/>



       (name age)  MyComponent.

  props: React    props,    .   ,  props    :

{

name: John,

age:30

}



   :         props.

:

		function MyComponent (props){
		return(
		<div>
		<p> Name: {props.name}</p>
		<p> Age: {props.age}</p>
		</div>

)

}



    MyComponent   name age,     props.

 , React    props        JSX,          .




8.4    props


 React,      props  ,      ,      .        [22 -       ,     ,     .]  props.




  .


   .

   ,     (https://www.litres.ru/chitat-onlayn/?art=70072171)  .

      Visa, MasterCard, Maestro,    ,   ,     ,  PayPal, WebMoney, ., QIWI ,       .



notes








1


 (props)   ,    React     .




2


IDE (Integrated Development Environment)  ,   ,       .




3


 (refactoring)            .   ࠖ  ,    ,  ,     




4


ECMAScript (  ES)    ,    JavaScript.    ,  ,    ,     JavaScript.




5


DOM    -     ,        -




6


JSX   ,  React (  ),    ,     (HTML)  .




7


   (One-Way Data Flow)  ,        , ,       ,    .




8


  (Server-Side Rendering, SSR)    -,    HTML-  -  ,   ().       HTML-       JavaScript,  SSR      -.




9


React DevTools      ,     ,    React.




10


Create React App (CRA)    ,   ,   ,  React.




11


.tsx  ,    TypeScript  JSX.




12


- (production build)     ,       .




13


Type Assertion (   Type Casting)    TypeScript   ,         .       ,  TypeScript  ,   .




14


TypeScript-  ,  TypeScript,    ,  TypeScript,  JavaScript-.




15


 (Dependencies) React TypeScript     ,  ,       .




16


  (Package Manager)  ,        ,   .     , ,    ,    .




17


  (Project Structure)    ,     .




18


 (Repository)   ,    ,          .




19


    ,   -     ,      ,    .




20


React Hooks  ,   React,       React  .




21


    ,   ,   (  ),     .       ,     (  )   .




22


      ,     ,     .


