рдЬреЗрдПрд╕ рдХреЛрдб рдореЗрдВ рддреАрди рдпрд╛ рдЪрд╛рд░ рдЕрд▓рдЧ-рдЕрд▓рдЧ рд╕реНрдерд╛рдиреЛрдВ рдореЗрдВ рд╕рдорд╛рди рдкрд░рд┐рд╡рд░реНрддрди рдХрд░рдирд╛ рдПрдХ рдХрд▓рд╛ рд╣реИ рдЬрд┐рд╕ рдкрд░ рдзреНрдпрд╛рди рджреЗрдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИред рдпрджрд┐ рдЕрдзрд┐рдХ рддрддреНрд╡ рд╣реИрдВ, рддреЛ рдХреЛрдб рд╕рдорд░реНрдерди рдЖрдЯрд╛ рдореЗрдВ рдмрджрд▓ рдЬрд╛рддрд╛ рд╣реИред рдЗрд╕рд▓рд┐рдП, рджреАрд░реНрдШрдХрд╛рд▓рд┐рдХ рдпрд╛ рдмрдбрд╝реА рдкрд░рд┐рдпреЛрдЬрдирд╛рдУрдВ рдХреЗ рд▓рд┐рдП, рдЖрдкрдХреЛ рдХреЛрдб рд▓рд┐рдЦрдирд╛ рдЪрд╛рд╣рд┐рдП рддрд╛рдХрд┐ рдЗрд╕реЗ рдЕрд▓рдЧ-рдЕрд▓рдЧ рдШрдЯрдХреЛрдВ рдореЗрдВ рдХрд┐рдпрд╛ рдЬрд╛ рд╕рдХреЗредрдореИрдВ 10 рд╡рд░реНрд╖реЛрдВ рд╕реЗ рдлреНрд░рдВрдЯ-рдПрдВрдб рдбреЗрд╡рд▓рдкрдореЗрдВрдЯ рдореЗрдВ рд▓рдЧрд╛ рд╣реБрдЖ рд╣реВрдВ рдФрд░ рдлреНрд░рдВрдЯ-рдПрдВрдб рдПрд▓рд┐рдореЗрдВрдЯреНрд╕ рдмрдирд╛рдиреЗ рдХреЗ рд▓рд┐рдП рдШрдЯрдХреЛрдВ рдХреЗ рдЙрдкрдпреЛрдЧ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рдмрд╛рдд рдХрд░реВрдВрдЧрд╛ - рдпрд╣ рдлреНрд░рдВрдЯ-рдПрдВрдб рдбреЗрд╡рд▓рдкрд░ рдХреЗ рдЬреАрд╡рди рдХреЛ рд╕рд░рд▓ рдмрдирд╛рддрд╛ рд╣реИред Mail.ru Cloud Solutions рдХреЗрд╕рдорд░реНрдерди рдХреЗ рд╕рд╛рде рд▓рд┐рдЦрд╛ рдЧрдпрд╛ редрд╕реАрдорд╛рдВрдд рдШрдЯрдХ рдХреНрдпрд╛ рд╣реИрдВ рдФрд░ рдЙрдирдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдХреНрдпреЛрдВ рд╣реИ
HTML рдЯреИрдЧ - рдШрдЯрдХреЛрдВ рдХреЗ рд╕рд╢рд░реНрдд "рд╢реВрдиреНрдп" рд╕реНрддрд░ред рдЙрдирдореЗрдВ рд╕реЗ рдкреНрд░рддреНрдпреЗрдХ рдХреЗ рдЕрдкрдиреЗ рдХрд╛рд░реНрдп рдФрд░ рдЙрджреНрджреЗрд╢реНрдп рд╣реИрдВредрд╕реАрдПрд╕рдПрд╕ рдХрдХреНрд╖рд╛рдПрдВ рдЕрдореВрд░реНрддрддрд╛ рдХрд╛ рдЕрдЧрд▓рд╛ рд╕реНрддрд░ рд╣реИ рдЬреЛ рдЖрдорддреМрд░ рдкрд░ рдПрдХ рдЫреЛрдЯреА рд╕реА рд╕рд╛рдЗрдЯ рдмрдирд╛рддреЗ рд╕рдордп рднреА рдкрд╣реБрдВрдЪ рдЬрд╛рддреА рд╣реИред рд╕реАрдПрд╕рдПрд╕ рд╡рд░реНрдЧ рдореЗрдВ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рдирд┐рдпрдореЛрдВ рдореЗрдВ, рд╣рдо рдЙрди рд╕рднреА рддрддреНрд╡реЛрдВ рдХреЗ рд╡реНрдпрд╡рд╣рд╛рд░ рдХрд╛ рд╡рд░реНрдгрди рдХрд░рддреЗ рд╣реИрдВ рдЬреЛ рддрддреНрд╡реЛрдВ рдХреЗ рдПрдХ рд╕рд╢рд░реНрдд рд╕рдмрд╕реЗрдЯ рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рд╣реИрдВредCSS рдХрдХреНрд╖рд╛рдУрдВ, рд╕рд╛рде рд╣реА рдХрд┐рд╕реА рднреА рдЕрдиреНрдп рддрддреНрд╡реЛрдВ, рдЬреИрд╕реЗ HTML рдЯреИрдЧреНрд╕ рдкрд░ рд▓рд╛рдЧреВ рд╣реЛрдиреЗ рд╡рд╛рд▓реЗ рдирд┐рдпрдо, рдЖрдкрдХреЛ рдХреЗрдВрджреНрд░реАрдп рд░реВрдк рд╕реЗ рд╕реЗрдЯ рдХрд░рдиреЗ рдФрд░ рдПрдХ рд╣реА рдкреНрд░рдХрд╛рд░ рдХреЗ рддрддреНрд╡реЛрдВ рдХреЗ рдХрд┐рд╕реА рднреА рд╕рдВрдЦреНрдпрд╛ рдХреЛ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдирд┐рдпрдореЛрдВ рдХреЛ рдмрджрд▓рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддреЗ рд╣реИрдВред рддрддреНрд╡ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рд╡рд┐рднрд┐рдиреНрди рдЙрдкрдХрд░рдг рд╣реИрдВ - рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рд╕реАрдПрд╕рдПрд╕, рд╕реИрд╕, рд▓реЗрд╕, рдкреЛрд╕реНрдЯрд╕реАрдПрд╕рдПрд╕, рдФрд░ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рд▓рд╛рдЧреВ рдХрд░рдиреЗ рдХреЗ рддрд░реАрдХреЗ - рдмреАрдИрдПрдо, рдПрд╕рдПрдордПрд╕реАрдПрд╕рдПрд╕, рдкрд░рдорд╛рдгреБ рд╕реАрдПрд╕рдПрд╕, рд╕реАрдПрд╕рдПрд╕ рдореЙрдбреНрдпреВрд▓, рд╕реНрдЯрд╛рдЗрд▓ рдШрдЯрдХреЛрдВредрд╡рд╛рд╕реНрддрд╡ рдореЗрдВ рдШрдЯрдХ рд╣реИрдВ:- рдПрдХ рд╣реА рдкреНрд░рдХрд╛рд░ рдХреЗ рддрддреНрд╡ рдЬрд┐рдирдореЗрдВ рдПрдХ рд╣реА рд╢реИрд▓реА рдФрд░ рдПрдХ рд╣реА рд▓реЗрдЖрдЙрдЯ (HTML) рдФрд░ рд╡реНрдпрд╡рд╣рд╛рд░ (JS) рджреЛрдиреЛрдВ рд╣реЛрддреЗ рд╣реИрдВ;
- рд╢реИрд▓реА рдФрд░ рд╡реНрдпрд╡рд╣рд╛рд░ рддрддреНрд╡реЛрдВ рдореЗрдВ рд╕рдорд╛рди рд╣реИ рдЬреЛ рдПрдХ рджреВрд╕рд░реЗ рд╕реЗ рдереЛрдбрд╝рд╛ рднрд┐рдиреНрди рд╣реЛрддреЗ рд╣реИрдВред
рд╡реЗрдм рдХрдВрдкреЛрдиреЗрдВрдЯреНрд╕ рддрдХрдиреАрдХ рд╡рд┐рдХрд╕рд┐рдд рдХреА рдЬрд╛ рд░рд╣реА рд╣реИ, рдЬреЛ рдЖрдкрдХреЛ рдХрд╕реНрдЯрдо HTML рдЯреИрдЧ рдмрдирд╛рдиреЗ рдФрд░ рд▓реЗрдЖрдЙрдЯ рдореЗрдВ рдХреЛрдб рдХреЗ рдЯреЗрдореНрдкрд▓реЗрдЯ рдЯреБрдХрдбрд╝реЗ рд╢рд╛рдорд┐рд▓ рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддреА рд╣реИред рд╣рд╛рд▓рд╛рдВрдХрд┐, рдШрдЯрдХреЛрдВ рдХреЛ рд╡реНрдпрд╛рдкрдХ рд░реВрдк рд╕реЗ рдЖрдзреБрдирд┐рдХ рдлреНрд░рдВрдЯ-рдПрдВрдб рдбреЗрд╡рд▓рдкрдореЗрдВрдЯ рдлреНрд░реЗрдорд╡рд░реНрдХ рдЬреИрд╕реЗ рдХрд┐ рдПрдВрдЧреБрд▓рд░, рд╡реНрдпреВ, рд░рд┐рдПрдХреНрдЯ рдХреЗ рд▓рд┐рдП рд╡реНрдпрд╛рдкрдХ рд░реВрдк рд╕реЗ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИред рдЬрд╛рд╡рд╛рд╕реНрдХреНрд░рд┐рдкреНрдЯ рд╕реБрд╡рд┐рдзрд╛рдУрдВ рдХреЛ рдПрдХ рдШрдЯрдХ рд╕реЗ рдХрдиреЗрдХреНрдЯ рдХрд░рдирд╛ рдЖрд╕рд╛рди рдмрдирд╛рддрд╛ рд╣реИ:import {Header, Footer} from "./components/common";
render() {
return (
...
)
}
рд╕рднреА рдкреНрд░рдореБрдЦ рдкрд░рд┐рдпреЛрдЬрдирд╛рдПрдВ рддреИрдпрд╛рд░ рдХрд┐рдП рдЧрдП рдШрдЯрдХреЛрдВ рдХреЗ рдЕрдкрдиреЗ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдореЗрдВ рдЖрддреА рд╣реИрдВ рдпрд╛ рддреИрдпрд╛рд░ рдХрд┐рдП рдЧрдП рдХрд┐рд╕реА рдПрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдПред рдкреНрд░рд╢реНрди рдЬрдм рдЖрдкрдХреЛ рдкреНрд░рддрд┐рд▓рд┐рдкрд┐ рдмрдирд╛рдиреЗ рд╕реЗ рд▓реЗрдХрд░ рдШрдЯрдХреЛрдВ рдХреЛ рдмрдирд╛рдиреЗ рддрдХ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИ, рддреЛ рд╡реНрдпрдХреНрддрд┐рдЧрдд рд░реВрдк рд╕реЗ рдирд┐рд░реНрдгрдп рд▓рд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдХреЛрдИ рднреА рдЕрдкреНрд░рддрд┐рд╖реНрдард┐рдд рд╡реНрдпрдВрдЬрди рдирд╣реАрдВ рд╣реИрдВредрдпрд╣ рди рдХреЗрд╡рд▓ рдХреЛрдб рдХреЗ рд▓реЗрдЦрди рдХреЛ рдпрд╛рдж рд░рдЦрдиреЗ рдпреЛрдЧреНрдп рд╣реИ, рдмрд▓реНрдХрд┐ рдЗрд╕рдХрд╛ рд╕рдорд░реНрдерди рднреА рд╣реИред рд╕реАрдПрд╕рдПрд╕ рдХрдХреНрд╖рд╛рдУрдВ рдореЗрдВ рдПрдХ рд╣реА рд▓реЗрдЖрдЙрдЯ рдХреА рдПрдХ рд╕рд╛рдзрд╛рд░рдг рдХреЙрдкреА / рдкреЗрд╕реНрдЯ рдФрд░ рдЕрд▓рдЧ-рдЕрд▓рдЧ рд╢реИрд▓рд┐рдпреЛрдВ рдХреЛ рдХрд┐рд╕реА рд╡рд┐рд╢реЗрд╖ рдЬреЛрдЦрд┐рдо рдХреЗ рдмрд┐рдирд╛ рдХреБрдЫ рд╕рдордп рдХреЗ рд▓рд┐рдП рдкреНрд░рджрд░реНрд╢рди рдмрдирд╛ рд╕рдХрддреЗ рд╣реИрдВред рд▓реЗрдХрд┐рди рдЕрдЧрд░ рдЬреЗрдПрд╕ рдореЗрдВ рд▓рд┐рдЦрд╛ рдЧрдпрд╛ рдПрдХ рд╡реНрдпрд╡рд╣рд╛рд░ рддрд░реНрдХ рдкреНрд░рддреНрдпреЗрдХ рддрддреНрд╡ рдореЗрдВ рдЬреЛрдбрд╝рд╛ рдЬрд╛рддрд╛ рд╣реИ, рддреЛ рдХреЛрдб рдХреЗ рдкреБрди: рдЙрдкрдпреЛрдЧ рдХреЗ рд▓рд╛рднреЛрдВ рдХреЛ 2-3 рддрддреНрд╡реЛрдВ рд╕реЗ рд╢рд╛рдмреНрджрд┐рдХ рд░реВрдк рд╕реЗ рдорд╣рд╕реВрд╕ рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ, рдЦрд╛рд╕рдХрд░ рдЬрдм рдпрд╣ рдкрд╣рд▓реЗ рд▓рд┐рдЦрд┐рдд рдХреЛрдб рдХрд╛ рд╕рдорд░реНрдерди рдФрд░ рд╕рдВрд╢реЛрдзрди рдХрд░рдиреЗ рдХреА рдмрд╛рдд рдЖрддреА рд╣реИредрдкреБрди: рдкреНрд░рдпреЛрдЬреНрдп рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдШрдЯрдХ
рдорд╛рди рд▓реЗрдВ рдХрд┐ рд╣рдорд╛рд░рд╛ рдЖрд╡реЗрджрди рдХрд╛рдлреА рдмрдбрд╝рд╛ рд╣реЛ рдЧрдпрд╛ рд╣реИ, рдФрд░ рд╣рдордиреЗ рдЕрдкрдиреЗ рд╕реНрд╡рдпрдВ рдХреЗ рдШрдЯрдХреЛрдВ рдХреЗ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХреЛ рд▓рд┐рдЦрдиреЗ рдХрд╛ рдлреИрд╕рд▓рд╛ рдХрд┐рдпрд╛ред рдореИрдВ рдЗрд╕рдХреЗ рд▓рд┐рдП рд▓реЛрдХрдкреНрд░рд┐рдп рд░рд┐рдПрдХреНрдЯ рдлреНрд░рдВрдЯ-рдПрдВрдб рдбреЗрд╡рд▓рдкрдореЗрдВрдЯ рдЯреВрд▓ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХрд╛ рд╕реБрдЭрд╛рд╡ рджреЗрддрд╛ рд╣реВрдВред рдЗрд╕рдХреЗ рдлрд╛рдпрджреЛрдВ рдореЗрдВ рд╕реЗ рдПрдХ рд╣реИ рдХреЗрд╡рд▓ рдПрдореНрдмреЗрдбреЗрдб рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдФрд░ рдХреБрд╢рд▓рддрд╛рдкреВрд░реНрд╡рдХ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ред рдиреАрдЪреЗ рджрд┐рдП рдЧрдП рдХреЛрдб рдореЗрдВ, App рдХрд╛ рдкреБрд░рд╛рдирд╛ рдШрдЯрдХ рддреАрди рдиреЗрд╕реНрдЯреЗрдб рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рддрд╛ рд╣реИ: AppHeader, Article, AppFooter:import React from "react";
import AppHeader from "./components/AppHeader";
import Article from "./components/Article";
import AppFooter from "./components/AppFooter";
export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {
title : "My App",
contacts : "8 800 100 20 30"
firtsArticleTitle : "Welcome",
secondArticleTitle : "Let's speak about..."
}
};
render() {
return (
<>
<AppHeader
title={this.state.title}
/>
<Article
title={this.state.firstArticleTitle}
/>
<Article
title={this.state.secondArticleTitle}
/>
<AppFooter
contacts={this.state.contacts}
/>
</>
)
}
}
рдХреГрдкрдпрд╛ рдзреНрдпрд╛рди рджреЗрдВ : рдЕрдм рд▓реЗрдЖрдЙрдЯ рдореЗрдВ рд╡рд░рд┐рд╖реНрда рд░реИрдкрд┐рдВрдЧ рдЯреИрдЧ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ - рдЖрдорддреМрд░ рдкрд░ рдпрд╣ рдерд╛ div
ред рдЖрдзреБрдирд┐рдХ рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛, рдлреНрд░реИрдЧрдореЗрдВрдЯ рдЯреВрд▓ рдкреНрд░рджрд╛рди рдХрд░рддреА рд╣реИ, рдЬрд┐рд╕рдХрд╛ рд╕рдВрдХреНрд╖рд┐рдкреНрдд рд░рд┐рдХреЙрд░реНрдб <></>
ред рдЗрди рдЯреИрдЧ рдХреЗ рднреАрддрд░, рдЖрдк рдПрдХ рдлреНрд▓реИрдЯ рдЯреИрдЧ рдкрджрд╛рдиреБрдХреНрд░рдо рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ, рдЬреИрд╕рд╛ рдХрд┐ рдКрдкрд░ рджрд┐рдП рдЧрдП рдЙрджрд╛рд╣рд░рдг рдореЗрдВ рд╣реИредрд╣рдордиреЗ рддреАрди рдкреБрд╕реНрддрдХрд╛рд▓рдп рдШрдЯрдХреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд┐рдпрд╛, рдЬрд┐рдирдореЗрдВ рд╕реЗ рдПрдХ рдмреНрд▓реЙрдХ рдореЗрдВ рджреЛ рдЧреБрдирд╛ рд╣реИред рдореВрд▓ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рд╕реЗ рдбреЗрдЯрд╛ рдШрдЯрдХ рдХреЗ рдкреНрд░реЙрдкреНрд╕ рдореЗрдВ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд┐рдпрд╛ рдЬрд╛рддрд╛ рд╣реИ рдФрд░ рд╕рдВрдкрддреНрддрд┐ рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рдЗрд╕рдХреЗ рдЕрдВрджрд░ рдЙрдкрд▓рдмреНрдз рд╣реЛрдЧрд╛ this.props
ред рдпрд╣ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдХреЗ рд▓рд┐рдП рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╣реИ рдФрд░ рдЖрдкрдХреЛ рд╡рд┐рд╢рд┐рд╖реНрдЯ рддрддреНрд╡реЛрдВ рд╕реЗ рджреГрд╢реНрдп рдХреЛ рдЬрд▓реНрджреА рд╕реЗ рдЗрдХрдЯреНрдард╛ рдХрд░рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИред рдЦрд╛рд╕рдХрд░ рдпрджрд┐ рдЖрдкрдХреЗ рдЖрд╡реЗрджрди рдореЗрдВ рдХрдИ рд╕рдорд╛рди рдкреГрд╖реНрда рд╣реИрдВ рдЬреЛ рдХреЗрд╡рд▓ рд▓реЗрдЦреЛрдВ рдХреА рд╕рд╛рдордЧреНрд░реА (рдореЙрдбрд▓) рдФрд░ рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдореЗрдВ рднрд┐рдиреНрди рд╣реИрдВредрд╣рд╛рд▓рд╛рдБрдХрд┐, рд╣рдореЗрдВ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдШрдЯрдХ рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛ рд╕рдХрддреА рд╣реИред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рд╕рдорд╛рди рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рд╡рд╛рд▓реЗ рдШрдЯрдХ рди рдХреЗрд╡рд▓ рдкрд╛рдареНрдп рд╕рд╛рдордЧреНрд░реА рдореЗрдВ, рдмрд▓реНрдХрд┐ рдбрд┐рдЬрд╛рдЗрди рдореЗрдВ рднреА рднрд┐рдиреНрди рд╣реЛ рд╕рдХрддреЗ рд╣реИрдВ: рд░рдВрдЧ, рдЗрдВрдбреЗрдВрдЯ, рдмреЙрд░реНрдбрд░реНрд╕ред рдПрдХ рд╣реА рдШрдЯрдХ рдХреА рд╡рд┐рднрд┐рдиреНрди рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдкреНрд░рджрд╛рди рдХрд░рдирд╛ рднреА рд╕рдВрднрд╡ рд╣реИредрдирд┐рдореНрдирд▓рд┐рдЦрд┐рдд рдорд╛рдорд▓реЗ рдХреЛ рдиреАрдЪреЗ рдорд╛рдирд╛ рдЬрд╛рддрд╛ рд╣реИ: рдХреЙрд▓рдмреИрдХ рдХреА рдЙрдкрд╕реНрдерд┐рддрд┐ рдХреЗ рдЖрдзрд╛рд░ рдкрд░, рд╣рдорд╛рд░рд╛ рдШрдЯрдХ "рдЙрддреНрддрд░рджрд╛рдпреА" рд╣реЛ рд╕рдХрддрд╛ рд╣реИ рдпрд╛ рдкреГрд╖реНрда рдкрд░ рдПрдХ рддрддреНрд╡ рдХреЛ рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рджреГрд╢реНрдп рдмрдирд╛ рд░рд╣ рд╕рдХрддрд╛ рд╣реИ:
...
render() {
return (
<Article
text={this.state.articleText}
onClick={(e) => this.bindTap(e)}
customClass={this.state.mainCustomClass}
/>
)
}
import React from "react";
export default class Article extends React.Component {
constructor(props) {
super(props);
};
render() {
let cName="default";
if (this.props.customClass) cName = cName + " " this.props.customClass;
let bgColor="#fff";
if (this.props.bgColor) bgColor = this.props.bgColor;
return (
{this.props.onClick &&
<div
className={cName}
onClick={(e) => this.props.onClick(e)}
style={{background : bgColor}}
>
<p>{this.props.text}<p/>
</div>
}
{!this.props.onClick &&
<div className={cName}>
<p>{this.props.text}<p/>
</div>
}
)
}
}
рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдореЗрдВ, рдШрдЯрдХреЛрдВ рдХреА рдХреНрд╖рдорддрд╛рдУрдВ рдХреЗ рд╡рд┐рд╕реНрддрд╛рд░ рдХреЗ рд▓рд┐рдП рдПрдХ рдФрд░ рддрдХрдиреАрдХ рд╣реИред рдХреЙрд▓ рдкреИрд░рд╛рдореАрдЯрд░ рдореЗрдВ, рдЖрдк рди рдХреЗрд╡рд▓ рдбреЗрдЯрд╛ рдпрд╛ рдХреЙрд▓рдмреИрдХ, рдмрд▓реНрдХрд┐ рдкреВрд░реЗ рд▓реЗрдЖрдЙрдЯ рдХреЛ рднреА рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВ:
...
render() {
return (
<Article
title={this.state.articleTitle}
text={
<>
<p>Please read the article</p>
<p>Thirst of all, I should say programming React is a very good practice.</p>
</>
}
/>
)
}
import React from "react";
export default class Article extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<div className="article">
<h2>{this.props.title}</h2>
{this.props.text}
</div>
)
}
}
рдШрдЯрдХ рдХрд╛ рдЖрдВрддрд░рд┐рдХ рд▓реЗрдЖрдЙрдЯ рдЗрд╕рдХреА рд╕рдВрдкреВрд░реНрдгрддрд╛ рдореЗрдВ рдкреБрди: рдкреЗрд╢ рдХрд┐рдпрд╛ рдЬрд╛рдПрдЧрд╛ рдХреНрдпреЛрдВрдХрд┐ рдЗрд╕реЗ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд┐рдпрд╛ рдЧрдпрд╛ рдерд╛ props
редрд╕рдореНрдорд┐рд▓рд┐рдд рдФрд░ рдЙрдкрдпреЛрдЧ рдкреИрдЯрд░реНрди рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдШрдЯрдХ рдореЗрдВ рдЕрддрд┐рд░рд┐рдХреНрдд рд▓реЗрдЖрдЙрдЯ рдХреЛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдирд╛ рдЕрдХреНрд╕рд░ рдЕрдзрд┐рдХ рд╕реБрд╡рд┐рдзрд╛рдЬрдирдХ рд╣реЛрддрд╛ рд╣реИ this.props.children
ред рдпрд╣ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХрд┐рд╕реА рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдпрд╛ рд╕рд╛рдЗрдЯ рдХреЗ рд╡рд┐рд╢рд┐рд╖реНрдЯ рдмреНрд▓реЙрдХреЛрдВ рдХреЗ рд▓рд┐рдП рдЬрд┐рдореНрдореЗрджрд╛рд░ рд╕рд╛рдорд╛рдиреНрдп рдШрдЯрдХреЛрдВ рдХреЛ рд╕рдВрд╢реЛрдзрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдмреЗрд╣рддрд░ рд╣реИ рдЬрд╣рд╛рдВ рд╡рд┐рднрд┐рдиреНрди рдЖрдВрддрд░рд┐рдХ рд╕рд╛рдордЧреНрд░реА рдЧреНрд░рд╣рдг рдХреА рдЬрд╛рддреА рд╣реИ: рдХреИрдкреНрд╕, рд╕рд╛рдЗрдбрдмрд╛рд░, рд╡рд┐рдЬреНрдЮрд╛рдкрдиреЛрдВ рдХреЗ рд╕рд╛рде рдмреНрд▓реЙрдХ, рдФрд░ рдЕрдиреНрдпред
...
render() {
return (
<Article title={this.state.articleTitle}>
<p>Please read the article</p>
<p>First of all, I should say programming React is a very good practice.</p>
</Article>
)
}
import React from "react";
export default class Article extends React.Component {
constructor(props) {
super(props);
};
render() {
return (
<div className="article">
<h2>{this.props.title}</h2>
{this.props.children}
</div>
)
}
}
рдкреВрд░реНрдг рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдШрдЯрдХ
рдХреЗрд╡рд▓ рджреГрд╢реНрдп рдХреЗ рд▓рд┐рдП рдЬрд╝рд┐рдореНрдореЗрджрд╛рд░ рдШрдЯрдХреЛрдВ рдХреЛ рдКрдкрд░ рдорд╛рдирд╛ рдЧрдпрд╛ рдерд╛ред рд╣рд╛рд▓рд╛рдВрдХрд┐, рд╣рдо рд╕рдмрд╕реЗ рдЕрдзрд┐рдХ рд╕рдВрднрд╛рд╡рдирд╛ рдкреБрд╕реНрддрдХрд╛рд▓рдпреЛрдВ рдХреЛ рди рдХреЗрд╡рд▓ рдорд╛рдирдЪрд┐рддреНрд░рдг рдХреЗ рд▓рд┐рдП рдкреНрд░рд╕реНрддреБрдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрдЧреА, рдмрд▓реНрдХрд┐ рдорд╛рдирдХ рдбреЗрдЯрд╛ рдкреНрд░рд╕рдВрд╕реНрдХрд░рдг рддрд░реНрдХ рднреАредрдЖрдЗрдП рдлреЛрди рдШрдЯрдХ рдХреЛ рджреЗрдЦреЗрдВ, рдЬрд┐рд╕реЗ рдПрдХ рдлреЛрди рдирдВрдмрд░ рджрд░реНрдЬ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдбрд┐рдЬрд╝рд╛рдЗрди рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рдпрд╣ рдкреНрд▓рдЧ-рдЗрди рд╕рддреНрдпрд╛рдкрдирдХрд░реНрддрд╛ рдкреБрд╕реНрддрдХрд╛рд▓рдп рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рджрд░реНрдЬ рд╕рдВрдЦреНрдпрд╛ рдХреЛ рдореБрдЦреМрдЯрд╛ рдХрд░ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рд╡рд░рд┐рд╖реНрда рдШрдЯрдХ рдХреЛ рд╕реВрдЪрд┐рдд рдХрд░ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рдлреЛрди рд╕рд╣реА рдпрд╛ рдЧрд▓рдд рддрд░реАрдХреЗ рд╕реЗ рджрд░реНрдЬ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ:
import React from "react";
import Validator from "../helpers/Validator";
export default class Phone extends React.Component {
constructor(props) {
super(props);
this.state = {
value : this.props.value || "",
name : this.props.name,
onceValidated : false,
isValid : false,
isWrong : true
}
this.ref = React.createRef();
};
componentDidMount = () => {
this.setValidation();
};
setValidation = () => {
const validationSuccess = (formattedValue) => {
this.setState({
value : formattedValue,
isValid : true,
isWrong : false,
onceValidated : true
});
this.props.setPhoneValue({
value : formattedValue,
item : this.state.name,
isValid : true
})
}
const validationFail = (formattedValue) => {
this.setState({
value : formattedValue,
isValid : false,
isWrong : true,
});
this.props.setPhoneValue({
value : formattedValue,
item : this.state.name,
isValid : false
})
}
new Validator({
element : this.ref.current,
callbacks : {
success : validationSuccess,
fail : validationFail
}
});
}
render() {
return (
<div className="form-group">
<labeL htmlFor={this.props.name}>
<input
name={this.props.name}
id={this.props.name}
type="tel"
placeholder={this.props.placeholder}
defaultValue={this.state.value}
ref={this.ref}
/>
</label>
</div>
)
}
}
рдЗрд╕ рдШрдЯрдХ рдореЗрдВ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдПрдХ рдЖрдВрддрд░рд┐рдХ рд╕реНрдерд┐рддрд┐ рд╣реИ, рдЬрд┐рд╕рдХрд╛ рдПрдХ рд╣рд┐рд╕реНрд╕рд╛ рдмрд╛рд╣рд░реА рдХреЛрдб рдХреЗ рд╕рд╛рде рд╕рд╛рдЭрд╛ рдХрд░ рд╕рдХрддрд╛ рд╣реИ рдЬреЛ рдЗрд╕реЗ рдХрд╣рддреЗ рд╣реИрдВред рдЕрдиреНрдп рднрд╛рдЧ рдШрдЯрдХ рдХреЗ рдЕрдВрджрд░ рд░рд╣рддрд╛ рд╣реИ, рдЗрд╕рдХреЗ рдКрдкрд░ рдХреЗ рдЙрджрд╛рд╣рд░рдг рдореЗрдВ onceValidated
ред рдЗрд╕ рдкреНрд░рдХрд╛рд░, рдШрдЯрдХ рдХреЗ рддрд░реНрдХ рдХрд╛ рд╣рд┐рд╕реНрд╕рд╛ рдкреВрд░реА рддрд░рд╣ рд╕реЗ рдЗрд╕рдореЗрдВ рд╕рдВрд▓рдЧреНрди рд╣реИредрдпрд╣ рдХрд╣рд╛ рдЬрд╛ рд╕рдХрддрд╛ рд╣реИ рдХрд┐ рд╡рд┐рд╢рд┐рд╖реНрдЯ рд╡реНрдпрд╡рд╣рд╛рд░ рдЕрдиреБрдкреНрд░рдпреЛрдЧ рдХреЗ рдЕрдиреНрдп рднрд╛рдЧреЛрдВ рд╕реЗ рд╕реНрд╡рддрдВрддреНрд░ рд╣реИред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рд╕рдВрдЦреНрдпрд╛ рдорд╛рдиреНрдп рдереА рдпрд╛ рдирд╣реАрдВ, рдЗрд╕рдХреЗ рдЖрдзрд╛рд░ рдкрд░, рд╣рдо рд╡рд┐рднрд┐рдиреНрди рдкрд╛рда рд╕рдВрдХреЗрддреЛрдВ рдХреЛ рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рд╣рдордиреЗ рдПрдХ рдЕрд▓рдЧ рдкреБрди: рдкреНрд░рдпреЛрдЬреНрдп рдШрдЯрдХ рдХреЛ рди рдХреЗрд╡рд▓ рдкреНрд░рджрд░реНрд╢рди рдореЗрдВ рд▓рд┐рдпрд╛, рдмрд▓реНрдХрд┐ рдбреЗрдЯрд╛ рдкреНрд░реЛрд╕реЗрд╕рд┐рдВрдЧ рд▓реЙрдЬрд┐рдХ рднреА рд▓рд┐рдпрд╛редрдПрдорд╡реА рдШрдЯрдХ
рдпрджрд┐ рд╣рдорд╛рд░рд╛ рдорд╛рдирдХ рдШрдЯрдХ рдЙрдиреНрдирдд рдХрд╛рд░реНрдпрдХреНрд╖рдорддрд╛ рдХрд╛ рд╕рдорд░реНрдерди рдХрд░рддрд╛ рд╣реИ рдФрд░ рд╡реНрдпрд╡рд╣рд╛рд░ рдХрд╛ рдкрд░реНрдпрд╛рдкреНрдд рд╡рд┐рдХрд╕рд┐рдд рддрд░реНрдХ рд╣реИ, рддреЛ рдЗрд╕реЗ рджреЛ рдореЗрдВ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд╛рдпрдХ рд╣реИ:- рдбреЗрдЯрд╛ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП "рд╕реНрдорд╛рд░реНрдЯ" (
Model
); - рдкреНрд░рджрд░реНрд╢рд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП "рдЧреВрдВрдЧрд╛" (
View
)ред
рдПрдХ рдШрдЯрдХ рдХреЛ рдХреЙрд▓ рдХрд░рдХреЗ рдХрдиреЗрдХреНрд╢рди рдЬрд╛рд░реА рд░рд╣реЗрдЧрд╛ред рдЕрдм рдпрд╣ рд╣реЛрдЧрд╛ Model
ред рджреВрд╕рд░рд╛ рднрд╛рдЧ - View
- рдХреЗ render()
рд╕рд╛рде рдмреБрд▓рд╛рдпрд╛ рдЬрд╛рдПрдЧрд╛ props
, рдЬрд┐рдирдореЗрдВ рд╕реЗ рдХреБрдЫ рдЖрд╡реЗрджрди рд╕реЗ рдЖрдП рдереЗ, рдФрд░ рджреВрд╕рд░рд╛ рднрд╛рдЧ рдкрд╣рд▓реЗ рд╕реЗ рд╣реА рдШрдЯрдХ рдХреА рд╕реНрдерд┐рддрд┐ рд╣реИ:
...
render() {
return (
<Phone
name={this.state.mobilePhoneName}
placeholder={"You mobile phone"}
/>
)
}
import React from "react";
import Validator from "../helpers/Validator";
import PhoneView from "./PhoneView";
export default class Phone extends React.Component {
constructor(props) {
super(props);
this.state = {
value : this.props.value || "",
name : this.props.name,
onceValidated : false,
isValid : false,
isWrong : true
}
this.ref = React.createRef();
};
componentDidMount = () => {
this.setValidation();
};
setValidation = () => {
const validationSuccess = (formattedValue) => {
...
}
const validationFail = (formattedValue) => {
...
}
new Validator({
element : this.ref.current,
...
});
}
render() {
return (
<PhoneView
name={this.props.name}
placeholder={this.props.placeholder}
value={this.state.value}
ref={this.ref}
/>
)
}
}
import React from "react";
const PhoneView = React.forwardRef((props, ref) => (
<div className="form-group">
<labeL htmlFor={props.name}>
<input
name={props.name}
id={props.name}
type="tel"
ref={ref}
placeholder={props.placeholder}
value={props.value}
/>
</label>
</div>
));
export default PhoneView;
рдпрд╣ рдЙрдкрдХрд░рдг рдкрд░ рдзреНрдпрд╛рди рджреЗрдиреЗ рдпреЛрдЧреНрдп рд╣реИ React.forwardRef()
ред рдпрд╣ рдЖрдкрдХреЛ ref
рдПрдХ рдШрдЯрдХ рдмрдирд╛рдиреЗ рдХреА рдЕрдиреБрдорддрд┐ рджреЗрддрд╛ рд╣реИ Phone
, рд▓реЗрдХрд┐рди рдЗрд╕реЗ рд╕реАрдзреЗ рд▓реЗрдЖрдЙрдЯ рддрддреНрд╡реЛрдВ рдореЗрдВ рдмрд╛рдБрдзрддрд╛ рд╣реИ PhoneView
ред рд╣рдореЗрд╢рд╛ рдХреА рддрд░рд╣ рд╕рднреА рдЬреЛрдбрд╝рддреЛрдбрд╝ ref
рддрдм рдЙрдкрд▓рдмреНрдз рд╣реЛрдВрдЧреЗ Phone
ред рдЙрджрд╛рд╣рд░рдг рдХреЗ рд▓рд┐рдП, рдпрджрд┐ рд╣рдореЗрдВ рдлреЛрди рдирдВрдмрд░ рд╕рддреНрдпрд╛рдкрдирдХрд░реНрддрд╛ рдХреЛ рдЬреЛрдбрд╝рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реИредрдЗрд╕ рджреГрд╖реНрдЯрд┐рдХреЛрдг рдХреА рдПрдХ рдЕрдиреНрдп рд╡рд┐рд╢реЗрд╖рддрд╛ View
рдШрдЯрдХ рдХрд╛ рдЕрдзрд┐рдХрддрдо рд╕рд░рд▓реАрдХрд░рдг рд╣реИ ред рд╡рд╛рд╕реНрддрд╡ рдореЗрдВ, рдЗрд╕ рднрд╛рдЧ рдХреЛ рдЗрд╕рдХреЗ рдЕрдВрддрд░реНрдирд┐рд╣рд┐рдд рддрд░реАрдХреЛрдВ рдХреЗ рдмрд┐рдирд╛, рдХрд╛рд╕реНрдЯ рдХреЗ рд░реВрдк рдореЗрдВ рдкрд░рд┐рднрд╛рд╖рд┐рдд рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рдХреЗрд╡рд▓ рд▓реЗрдЖрдЙрдЯ рдФрд░ рдореЙрдбрд▓ рд╕реЗ рдбреЗрдЯрд╛ рдкреНрд░рддрд┐рд╕реНрдерд╛рдкрдиредрдЕрдм рд╣рдорд╛рд░реЗ рдкреБрди: рдкреНрд░рдпреЛрдЬреНрдп рдШрдЯрдХ рдХреЛ рд╡рд┐рднрд╛рдЬрд┐рдд рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИ Model
рдФрд░ View
, рд╣рдо рдЕрд▓рдЧ рд╕реЗ рд╡реНрдпрд╛рд╡рд╕рд╛рдпрд┐рдХ рддрд░реНрдХ рдФрд░ рд▓реЗрдЖрдЙрдЯ рдХреЛрдб рд╡рд┐рдХрд╕рд┐рдд рдХрд░ рд╕рдХрддреЗ рд╣реИрдВред рд╣рдо рдЫреЛрдЯреЗ рдШрдЯрдХ рддрддреНрд╡реЛрдВ рд╕реЗ рднреА рд▓реЗрдЖрдЙрдЯ рдХреЛ рдЗрдХрдЯреНрдард╛ рдХрд░ рд╕рдХрддреЗ рд╣реИрдВредрдШрдЯрдХреЛрдВ рдкрд░ рдЪрд▓ рд░рд╣реЗ рд╕рдВрдкреВрд░реНрдг рдЕрдиреБрдкреНрд░рдпреЛрдЧ рдХреА рд╕реНрдерд┐рддрд┐
рдпрд╣ рдКрдкрд░ рджрд┐рдЦрд╛рдпрд╛ рдЧрдпрд╛ рдерд╛ рдХрд┐ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдкреИрд░рд╛рдореАрдЯрд░ рдпрд╛ рдЯрд╛рдЗрдкрд┐рдВрдЧ, рдФрд░ рдХреЙрд▓рдмреИрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдШрдЯрдХреЛрдВ рдХрд╛ рдкреНрд░рдмрдВрдзрди рдХрд░ рд╕рдХрддрд╛ рд╣реИредрдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЛ рд╕рдлрд▓рддрд╛рдкреВрд░реНрд╡рдХ рдХрд╛рдо рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП, рдКрдкрд░реА рд╕реНрддрд░ рдкрд░ рдиреЗрд╕реНрдЯреЗрдб рдкреБрди: рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЧрдП рдШрдЯрдХреЛрдВ рдХреА рд╕реНрдерд┐рддрд┐ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд╕рд╛рд░реНрдердХ рдбреЗрдЯрд╛ рдкреНрд░рд╛рдкреНрдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рд╣реЛрддреА рд╣реИред рд╣рд╛рд▓рд╛рдБрдХрд┐, рдпрд╣ рдкреВрд░реЗ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХрд╛ рдЙрдЪреНрдЪрддрдо рд╕реНрддрд░ рдирд╣реАрдВ рд╣реЛ рд╕рдХрддрд╛ рд╣реИредрдпрджрд┐ рд╣рдорд╛рд░реЗ рдкрд╛рд╕ рдПрдХ рдХреНрд▓рд╛рдЗрдВрдЯ рдСрдерд░рд╛рдЗрдЬреЗрд╢рди рдмреНрд▓реЙрдХ рд╣реИ рдФрд░ рдЗрд╕рдореЗрдВ рд▓реЙрдЧрд┐рди рдФрд░ рдкрд╛рд╕рд╡рд░реНрдб рджрд░реНрдЬ рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдкреБрди: рдкреНрд░рдпреЛрдЬреНрдп рдШрдЯрдХ рд╣реИрдВ, рддреЛ рдкреВрд░реЗ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдХреЛ рдпрд╣ рдЬрд╛рдирдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ рдХрд┐ рдпреЗ рд╕рд░рд▓ рдШрдЯрдХ рдХрд┐рд╕реА рднреА рд╕рдордп рдХрд┐рд╕ рд╕реНрдерд┐рддрд┐ рдореЗрдВ рд╣реИрдВред рдмрд▓реНрдХрд┐, рдкреНрд░рд╛рдзрд┐рдХрд░рдг рдмреНрд▓реЙрдХ рд╣реА рд╕рд░рд▓ рдкреБрди: рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЧрдП рдШрдЯрдХреЛрдВ рдХреА рд╕реНрдерд┐рддрд┐ рдХреЗ рдЖрдзрд╛рд░ рдкрд░ рдПрдХ рдирдП рд░рд╛рдЬреНрдп рдХреА рдЧрдгрдирд╛ рдХрд░ рд╕рдХрддрд╛ рд╣реИ рдФрд░ рдЗрд╕реЗ рдкрд╛рд╕ рдХрд░ рд╕рдХрддрд╛ рд╣реИ: рдкреНрд░рд╛рдзрд┐рдХрд░рдг рдмреНрд▓реЙрдХ рд╕рд╣реА рдврдВрдЧ рд╕реЗ рднрд░рд╛ рд╣реИ рдпрд╛ рдирд╣реАрдВредрдШрдЯрдХреЛрдВ рдХреЗ рдПрдХ рдмрдбрд╝реЗ рдШреЛрдВрд╕рд▓реЗ рдХреЗ рд╢рд┐рдХрд╛рд░ рдХреЗ рд╕рд╛рде, рдбреЗрдЯрд╛ рдХреЗ рд╕рд╛рде рдХрд╛рдо рдХреЗ рд╕рдВрдЧрдарди рдХреА рдирд┐рдЧрд░рд╛рдиреА рдХрд░рдирд╛ рдЖрд╡рд╢реНрдпрдХ рд╣реИ рддрд╛рдХрд┐ рд╣рдореЗрд╢рд╛ рдкрддрд╛ рдЪрд▓ рд╕рдХреЗ рдХрд┐ "рд╕рдЪреНрдЪрд╛рдИ рдХрд╛ рд╕реНрд░реЛрдд" рдХрд╣рд╛рдВ рд╣реИред рдореИрдВрдиреЗ рдкрд╣рд▓реЗ рд╣реАрдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдореЗрдВ рдЕрддреБрд▓реНрдпрдХрд╛рд▓рд┐рдХ рд░рд╛рдЬреНрдп рд╕рдВрдХреНрд░рдордг рд╕реЗ рдЬреБрдбрд╝реА рдХреБрдЫ рдХрдард┐рдирд╛рдЗрдпреЛрдВ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ рд▓рд┐рдЦрд╛ рд╣реИ редрдкреБрди: рдкреНрд░рдпреЛрдЬреНрдп рдШрдЯрдХреЛрдВ рдХреЛ рд╣рдореЗрд╢рд╛ рдЙрди рдХреЙрд▓рдмреИрдХ рд╕реЗ рдЧреБрдЬрд░рдирд╛ рдЪрд╛рд╣рд┐рдП рдЬреЛ рдбреЗрдЯрд╛ рдХреЛ рдШрдЯрдХреЛрдВ рдХреЗ рд╕рдВрднрд╛рд╡рд┐рдд рдмреНрд▓реЙрдХ рдХреЛ рдкреНрд░рдмрдВрдзрд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдЖрд╡рд╢реНрдпрдХ рд╣реИред рд╣рд╛рд▓рд╛рдБрдХрд┐, рдЖрдкрдХреЛ рдЕрддрд┐рд░рд┐рдХреНрдд рдбреЗрдЯрд╛ рд╕реНрдерд╛рдирд╛рдВрддрд░рд┐рдд рдХрд░рдиреЗ рдХреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдирд╣реАрдВ рд╣реИ, рддрд╛рдХрд┐ рдбреЛрдо рдЯреНрд░реА рдХреЗ рдмрдбрд╝реЗ рд╣рд┐рд╕реНрд╕реЗ рдХреЗ рдЕрдирд╛рд╡рд╢реНрдпрдХ рд░рд┐рдбреНрд░реЗрд╕ рдХрд╛ рдХрд╛рд░рдг рди рд╣реЛ рдФрд░ рдШрдЯрдХреЛрдВ рдореЗрдВ рдкреНрд░рд╕рдВрд╕реНрдХрд░рдг рдкрд░рд┐рд╡рд░реНрддрди рдХреЗ рд▓рд┐рдП рдХреЛрдб рдХреЛ рдЬрдЯрд┐рд▓ рди рдХрд░реЗрдВредрдбреЗрдЯрд╛ рдХреЛ рд╡реНрдпрд╡рд╕реНрдерд┐рдд рдХрд░рдиреЗ рдХреЗ рд▓рд┐рдП рдПрдХ рдФрд░ рддрд░реАрдХрд╛ рдПрдХ рдШрдЯрдХ рдЖрд╣реНрд╡рд╛рди рд╕рдВрджрд░реНрдн рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдирд╛ рд╣реИред рдпрд╣ рдПрдХ рджреЗрд╢реА рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рд╡рд┐рдзрд┐ рд╣реИред createContext
, рд╕рдВрд╕реНрдХрд░рдг 16.3 рд╕реЗ рдЙрдкрд▓рдмреНрдз рд╣реИ, рдкрд╣рд▓реЗ рд╡рд╛рд▓реЗ рд╕реЗ рднреНрд░рдорд┐рдд рд╣реЛрдиреЗ рдХреА рдирд╣реАрдВ React getChildContext
! ...рдлрд┐рд░ рдЖрдкрдХреЛ рдШрдЯрдХ рдШреЛрдВрд╕рд▓реЗ рдХреЗ рд╢рд┐рдХрд╛рд░ рдкреЗрдбрд╝ рдХреЗ рдиреАрдЪреЗ "рдореЛрдЯрд╛рдИ" рдХреЗ рдорд╛рдзреНрдпрдо рд╕реЗ рд╕рд╣рд╛рд░рд╛ рдкрд╛рд╕ рдХрд░рдирд╛ рд╣реЛрдЧрд╛ред рдпрд╛ рдбреЗрдЯрд╛ рдкреНрд░рдмрдВрдзрди рдФрд░ рдкрд░рд┐рд╡рд░реНрддрди рдбрд┐рд▓реАрд╡рд░реА рдХреЗ рд▓рд┐рдП рд╡рд┐рд╢реЗрд╖ рдкреБрд╕реНрддрдХрд╛рд▓рдпреЛрдВ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░реЗрдВ, рдЬреИрд╕реЗ Redux рдФрд░ Mobx ( Mobx + React рдмрдВрдбрд▓ рдкрд░ рдЖрд▓реЗрдЦ рджреЗрдЦреЗрдВ )редрдпрджрд┐ рд╣рдо Mobx рдкрд░ рдкреБрди: рдкреНрд░рдпреЛрдЬреНрдп рдШрдЯрдХреЛрдВ рдХреА рдПрдХ рд▓рд╛рдЗрдмреНрд░реЗрд░реА рдХрд╛ рдирд┐рд░реНрдорд╛рдг рдХрд░рддреЗ рд╣реИрдВ, рддреЛ рдЗрд╕ рддрд░рд╣ рдХреЗ рдШрдЯрдХреЛрдВ рдореЗрдВ рд╕реЗ рдкреНрд░рддреНрдпреЗрдХ рдХрд╛ рдЕрдкрдирд╛ рд╕реНрдЯреЛрд░ рд╣реЛрдЧрд╛ред рдпрд╣реА рд╣реИ, рдкреВрд░реЗ рдПрдкреНрд▓рд┐рдХреЗрд╢рди рдореЗрдВ рдХрд╣реАрдВ рд╕реЗ рднреА рдПрдВрдб-рдЯреВ-рдПрдВрдб рдПрдХреНрд╕реЗрд╕ рдХреЗ рд╕рд╛рде, рдШрдЯрдХ рдХреЗ рдкреНрд░рддреНрдпреЗрдХ рдЙрджрд╛рд╣рд░рдг рдХреА рд╕реНрдерд┐рддрд┐ рдХреЗ рдмрд╛рд░реЗ рдореЗрдВ "рд╕рддреНрдп рдХрд╛ рд╕реНрд░реЛрдд"ред Redux рдФрд░ рдЗрд╕рдХреЗ рдПрдХрдорд╛рддреНрд░ рдбреЗрдЯрд╛ рд╡реЗрдпрд░рд╣рд╛рдЙрд╕ рдХреЗ рдорд╛рдорд▓реЗ рдореЗрдВ, рд╕рднреА рдШрдЯрдХреЛрдВ рдХреЗ рд╕рднреА рд░рд╛рдЬреНрдп рдПрдХ рд╣реА рд╕реНрдерд╛рди рдкрд░ рдЙрдкрд▓рдмреНрдз рд╣реЛрдВрдЧреЗредрд░рд┐рдПрдХреНрдЯ рдШрдЯрдХреЛрдВ рдХреЗ рдХреБрдЫ рддреИрдпрд╛рд░ рдХрд┐рдП рдЧрдП рдкреБрд╕реНрддрдХрд╛рд▓рдп
рддреИрдпрд╛рд░ рдШрдЯрдХреЛрдВ рдХреЗ рд▓реЛрдХрдкреНрд░рд┐рдп рдкреБрд╕реНрддрдХрд╛рд▓рдп рд╣реИрдВ, рдЬреЛ рдПрдХ рдирд┐рдпрдо рдХреЗ рд░реВрдк рдореЗрдВ, рдореВрд▓ рд░реВрдк рд╕реЗ рдХрдВрдкрдирд┐рдпреЛрдВ рдХреА рдЖрдВрддрд░рд┐рдХ рдкрд░рд┐рдпреЛрдЬрдирд╛рдПрдВ рдереАрдВ:- Material-UI тАФ , Material Design Google.
- React-Bootstrap тАФ , . : API , , .
- VKUI тАФ ┬л┬╗. VK mini apps, (. VK mini apps). VKUI ┬л┬╗. ┬л┬╗ . vkconnect тАФ iOS Android.
- ARUI Feather тАФ React- -. , . open source, .
рдЗрди рд╕рднреА рдкреБрд╕реНрддрдХрд╛рд▓рдпреЛрдВ рдХрд╛ рдЙрджреНрджреЗрд╢реНрдп рддрддреНрд╡реЛрдВ рдХреЗ рд▓реЗрдЖрдЙрдЯ рдФрд░ рдЙрдирдХреЗ рд╕реНрдЯрд╛рдЗрд▓ рдХрд╛ рдирд┐рд░реНрдорд╛рдг рдХрд░рдирд╛ рд╣реИред рдХреЙрд▓рдмреИрдХ рдХрд╛ рдЙрдкрдпреЛрдЧ рдХрд░рдХреЗ рдкрд░реНрдпрд╛рд╡рд░рдг рдХреЗ рд╕рд╛рде рд╕рд╣рднрд╛рдЧрд┐рддрд╛ рдХреЛ рдХреЙрдиреНрдлрд╝рд┐рдЧрд░ рдХрд┐рдпрд╛ рдЧрдпрд╛ рд╣реИред рдЗрд╕рд▓рд┐рдП, рдпрджрд┐ рдЖрдк рд▓реЗрдЦ рдХреЗ рддреАрд╕рд░реЗ рдФрд░ рдЪреМрдереЗ рдкреИрд░рд╛рдЧреНрд░рд╛рдл рдореЗрдВ рд╡рд░реНрдгрд┐рдд рдкреВрд░реНрдг-рдкреБрди: рдЙрдкрдпреЛрдЧ рдХрд┐рдП рдЬрд╛рдиреЗ рдпреЛрдЧреНрдп рдШрдЯрдХ рдмрдирд╛рдирд╛ рдЪрд╛рд╣рддреЗ рд╣реИрдВ, рддреЛ рдЖрдкрдХреЛ рдЗрд╕реЗ рд╕реНрд╡рдпрдВ рдХрд░рдирд╛ рд╣реЛрдЧрд╛ред рд╢рд╛рдпрдж, рдРрд╕реЗ рдШрдЯрдХреЛрдВ рдХреЗ рджреГрд╢реНрдп рдХреЗ рдШрдЯрдХреЛрдВ рдХреЗ рд░реВрдк рдореЗрдВ рд▓реЗрдирд╛, рдКрдкрд░ рдкреНрд░рд╕реНрддреБрдд рд▓реЛрдХрдкреНрд░рд┐рдп рдкреБрд╕реНрддрдХрд╛рд▓рдпреЛрдВ рдореЗрдВ рд╕реЗ рдПрдХ рд╣реИредрдпрд╣ рд▓реЗрдЦ Mail.ru Cloud Solutions рдХреЗ рд╕рдорд░реНрдерди рд╕реЗ рд▓рд┐рдЦрд╛ рдЧрдпрд╛ рдерд╛ ред