??????? ? React ? ????????? ????

Posted on July 12, 2023 by Andy Dingfelder

? ??? ??????? ????? ?????? ??? ????????, ??????????? ??? ???????? ???????, ? ????? ???????? ?????? ????????? ????????????. ??? ???? ???????? ??????????, ??????? ????????? ????????? ????????????? ???????? ? ???????? ? React-???????. ?????? ? ??????????? ?????????? ???????, ? ???? ??? ???????????? ? ??????? ??????????? ??????? ?????????? ??????????? react ???????????? ????????. ??? ???????? ????? ??????????? ?????????, ?? ?? ?????, ??????? ???????, ???????? ? ???????? ?????????. ???? ????? ?????-?? ?????? ??? ????????, ?? ??? ????? ???????? ? ?????????????? Recharts API. ????? ????, ???????????? ??????? ???????????? ??????????, ?????? ?????????? ???????????.

??????? 1: ????? ??? ? ????????

??? ????? ????????????, ????? ????????? «??????» ?????-?? ?????????? ? ????????? ??. ????????, ?? ?????? ????????? ??????? ??? ???? ?????? ??????. ??? ??? ??????? ???????? ? ??? ??????? ??????? ? ?????????.

?????? ? React: ??? ??? ????? ? ??? ???????? ????????????

? ???? ???, ?????? ????? ???????????????, ????????? ??? ????, ??????? ?? ?????? ? ????. ? ?????????? ? ????? ?????????? ????? ???????????? ??????? ??? ????????????? React animations ??? ????????? — react-animate-on-scroll. ?? ????? ??????? ?????? this.state.history ?? this.state.history.slice(0, this.state.stepNumber + 1). ??? ???????????, ??? ???? ?? «???????? ?????», ? ????? ??????? ????? ??? ?? ???? ?????, ?? ?????? ??? «???????» ???????, ??????? ????????? ???? ??????????.

???????? ?????????? ?? HTML ? CSS

react ??????????

???? ??? ???????? ??????? setCount(count + 1), ?????????? ???????? ????????? count. ????? ???????? count ?????????? ?????? ?????? ? ???????? ?????, ??????? ??? ??? ?????????? ????? ????????. ???????? ????????? ?????, ?? ??????? ??? ????? ??? ???? ???????????. ??????????, ??????? ????????????? ??????????? ??? ?????? ??????? ????????? ??????????? ?????????, ???? ? ?????? ???? ????????? ??? ????????. ???? ?? ????????? ???????????? — ?????????? ????? ???????????? ?????? ???????? ?? ????????.

react ??????????

?????????? ??? ?????????? ??????????

?? ????? ???????????? ??????? CSS-?????, ????? ??????????????? ?? ???????? React ? ????????? ???? ????????-??????. ???? ?? ??????????? ???????? ??? ???????????? ?????? ? ????? ????????, ???????? ???? ??? ? ????? ??????? ????????? ???. ???? ?? ??????????? ???????? ??? ??????????? ????????, ???????? src/index.js ? ????? ?????? ??????? (?? ??? ???????????? ???? ???? ? ??????? ?????????).

?????????? ????? ???????????? ????????? ???

???? ?????? ???????????? ????????? ?????? ????????????? React API. ????????, ? ????? React.Component API ?????????????? ? ?????? ??????? setState() ? ????????? ??????? ?????????? ????????? ?????? ???????????. React — ??? JavaScript-?????????? ??? ?????????? ????????????????? ??????????. ????? ????????? ?????? ??????????? ? React, ??????? ?? ??????? ???????? ??? ?? ????????. ????????? — ??? ????? ????????????????? ??????????, ? ???????? ???? ??????????? ?????? ? ?????????. ????????? ????? ???? ?????????, ??? ??????, ??? ???????, ??? ????? ????????.

?????????? ?????????? ??????????

  • ?? ????? ??????? ?????? this.state.history ?? this.state.history.slice(0, this.state.stepNumber + 1).
  • ????? ???????????? ????????? ?? ????????, ??????? ?? ????? ?????? ?????, ???? ???? JS-???? ??????????, ?????????? ?????????, ? ???? React ???????? DOM-???????? ? ?????? div.
  • ????? ????, ????????? Vue.js ? Angular, ?? ?????? ???? ?? ??? ?????????????, ? ?????? ??????? ??????? ? ????????.
  • ??? ?????? ????????? ?????????, ?? ????? ???????????? ??? ??? ????????? ??? ? ?????? ??????????? ??????? ???????.

???????? ?????? ??????????? — ?????????????? ????????? ???????? ?????????? ?? ?????? proto ??????????. ????????? ??? ????????????? ? ??????????, ?????????, ????? ? ?????? ??? ??????????? ?????? ??????????? tests-coverage-tool. ??????? React ???????????? ???????????? ?????? React 19 ? ??????.

? ??? ? ?????????? ????? ????????????? — ??? ??????, ??? ???? ? ???? ???????? ???? ? ????????? ??????. React ????? ????? ???????? ?? ??????? ? ??????? Node ? ????? ???? ???????????? ?? ????????? ??????????? ? ?????????????? React Native. ???? ?? ????????? ? ??????? ???????, ?? ?????????? ????????????? ??????????? ????? ???????????? ? ????????. ?????? ??????? ????? ????? ????? ?????? ? ????, ?? ?????? ?????????????? ? ?????????? ??????? ???????.

Styled-components — ??? ????????? ??????????? ?? ????????? CSS ??? ?????????? ?????? ??????????? React. Overreacted.io – ?????? ???? ????????????, ?????? ?? ??????? ????????????? React ? ???????? Redux. ????? ?? ??????? ????? ??????????? ? React ? ????????????? ?????????. Dev.to – ????? ?????????????? ??????????, ???? ??????? ???????????? ??? ?????????? ??????? ????????. ??? ??? ???? ????? ??????, ??????????? ??????????, ??????? ?????? ???? ??????????? ?????? ???????????.

????????? ?????? ? ??????????? ???????? ??????????? ????????? ??????????? Suspense. ??? ????, ????? ????????? ????????? ????????, ? React 19 ???????????? ??? ????? ????, ??????? ???????? ?????? ? ??????????, ???????? ? ?????????? ???????? ??????. ??? ???? ???????? ??????? ??? ?????? ? ???????, ?? ????? ???? ???????????? ? ??? ?????? ?????????, ????????, ??? ??????. ????????? ????????? ??????????? — ??? ??????? ??? ?????? ? ????????? ???????? ? ?????????????????? ??????????. ?????????? ????????? ??????????? React-?????????????, ??????? ?????? ? ???????? ??????????? ? ????????? ????. Draft.js ????? ???????? ? ????? React-??????????, ???? ?? ???????????? ?? ??????? ????????? ????? API ?????? ? ????????? ?????.

??? ?????????, ??????????? ????? ????????? ??????? ?????? ????????????????? ?????????? ? ??????? ??????????? ??????????? ?????????. ? ?????? ??????? ????????? ??????????? ????? ???? ? ??????? ??????? — ??????????? ???????????, ? ??????? ????? ????????? ???????? ? ?????? ??? ???. ?????? ? React.js ???? ????????? ????? — ??? ?????????? ??????????? ???????-«??????», ??????? «?????????» ?? ????????? ???????? ??? ?? ?????. ????????????????? ??????????????? ?????????? ????? ???????????? ????????, ????????? ? ?????? ????? ????, ? ???? ??????? ??? ?? ?????? ????????.

??? ???? ?? ????? ?????????? ????????? ??? ???-??????????. ??? ?? ????? ?????? ????? ??? ????????? ????? ?????? ???????????????? ?????, ??????? ?? ?????? ????????????? ????? ???????????????? ?? React, ?? ??????? ???????????? ???. React ??????????? codemod ??? ??????????? ???????????? ???????????. ????????? ?? API-??????????? ??????????????? ???????? ???????? ????? ?????? ?????. React-?????????? ????? ????? ?? ???? ????????? ???????? ????????, ? ????? ??????? ??? ????????????? ?????????????? ???????? ??? API-??????????.

react ??????????

? ????? ?? ????? ?? ? ???? ??????? React, ?? ?????? ???? ??????????? ?????????? ?????? ?????? ????????? ? ????? CHANGELOG.md ? ??????????? React, ? ????? ?? ???????? ??????. ???????? ???????? ?? ??, ??? ?????????? ? ????????? ?????. ???????? ??????????? ? React ?????? ?????? ?????????? ? ????????? ?????, ? ???? HTML — ? ?????????. ??? ?????? ?? ?????? ?? ??????? Domo, ??? ?? ?????, ?????? ????, ????? ?????????, ??? ??????????? ?? ????? ????, ?????? ??? ???????? ???????????????? ????????? ?? React.

? ???????? ?????????? ?????????? ??????? ??????? ??????????? «????????? ? ???????» — ? ??????? ????? ????. ?????? ?????? — ??????????(????????) ??????, ???????? ???????????? ????? ????????. ?????? ?????? — ???????? ?????? ????? ??????, ??????? ???????? ?????????. ??????? ?? ???????? ?? Board ???? value ????, ????? ?????????? ?????? ?? 0 ?? 8 ?????? ??????? Square. ?? ?????? ???? ?? ???????? ????? ?????? «X», ???????????? ? ??????????? ????????? Square.

?????? ?? ??? ????? ???????? ??????????? ??? ???????????? ? ????????? ??? ? ?????? ???? ???????????? ??????? ?????????? React. ?? ????????? ????????? ?????????????? ???? ?? ????? ??????????, ??????? ?? ??????????? ???????????? ??? ?????? ??? ??????? ????????????. ???? ??? ???????? “????????” ? React, ?? ?????? ???????????? ??????-???????? ??? ????. ?????????? ?????? Hello World ?? CodePen ??? CodeSandbox. ????? ?????????? ????? ????? ????? ???????? ? ??????????? ???-??????????, ???????????? ? ????, ??? ??????? ? ?????????????? React, Angular, Vue, Solid, Svelte ? ?.?.

??? ??????, ??? ?????????? ????????? ???????????? ???, ????? ??????, React ??????? ?????? ?? ????????, ??????? ???? ??????? ? ?????? setState ??? ????????? ????????? ???????. ???? ?? ????? ?????? ?? ?????? ???????? ??????, ?????? ??? ????? jumpTo ?? ?????????. ?????? ??? ????????????? jumpTo, ?? ??????? stepNumber ? ????????? ?????????? Game, ??? ???????? ?????? ????, ??????? ?????? ????????????. ??? ????????? ?????????? ??????, React ????? ? ??????? ???????? ?????? ???? ? ???? ??? ? ????????? ???????? ??????. ???? ? ????? ?????? ???? ????, ???????? ?????? ?? ????, React ??????? ????? ?????????. ???? ? ??????? ?????? ??????????? ????, ??????? ??? ? ??????? ??????, React ?????????? ?????????? ?????????.

??? ??????? ?????????? ???????? ? ????? ??? ????????? ? ????? ?????????, ?????????? ?? ????????? ??????????????????, ???????? ????????????? ? ????? ??????????. ?? ?????? ?????? ??????????? ???????????? ????? ??????? ????? ?????? ???????????? ?? ??????? ?????. ????? ???????? ??????????? ???????? ? ??????? ??????? ??????????, ??????????? ?????? ??????????. ?????????? JSX ??????? ? ?????? ????????????, ?? ??????? ??? ????? ??????? ????????? ? ????????. ????? ?????????? «?????????» ???? ? ?????? HTML ? JavaScript, ??????? ? ?????????? ????? ?????????? ? ?????????.

IT ????? ?????? ?? ?????? ???????????? ? ????? ??????? https://deveducation.com/ here.

About Andy Dingfelder

Andy is a Technology Manager with over 20 years of experience in Software Development, Project Management and Team Management in Telco, Healthcare and General SDLC. Full bio is available at: http://www.linkedin.com/in/dingfelder Follow at http://twitter.com/dingfelder Andy Dingfelder lives in Hawkes Bay, New Zealand with his wife and two daughters.
This entry was posted in Technology. Bookmark the permalink.