{"id":331224,"date":"2022-03-29T21:00:06","date_gmt":"2022-03-29T21:00:06","guid":{"rendered":"http:\/\/savepearlharbor.com\/?p=331224"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T21:00:00","slug":"","status":"publish","type":"post","link":"https:\/\/savepearlharbor.com\/?p=331224","title":{"rendered":"<span>\u041b\u0443\u0447\u0448\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043d\u0430 React. \u0427\u0430\u0441\u0442\u044c 3<\/span>"},"content":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u042d\u0442\u043e \u0442\u0440\u0435\u0442\u044c\u044f \u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u201c\u041b\u0443\u0447\u0448\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043d\u0430 React\u201d \u0430\u0432\u0442\u043e\u0440\u0430 Rahul Sharma. \u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u043d\u0438\u0436\u0435:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/post\/657673\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0430\u0441\u0442\u044c 1<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/post\/657879\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0430\u0441\u0442\u044c 2<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/post\/658079\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0430\u0441\u0442\u044c 3<\/a><\/p>\n<\/li>\n<\/ul>\n<h2>\u0425\u0440\u0430\u043d\u0438\u0442\u0435 \u0442\u043e\u043a\u0435\u043d \u0432 \u043a\u0443\u043a\u0438, \u0432\u043c\u0435\u0441\u0442\u043e localStorage<\/h2>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const token = localStorage.getItem(\"token\"); if (token) {   axios.defaults.headers.common[\"Authorization\"] = token; }<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">import Cookies from \"js-cookie\"; \/\/  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443  const token = Cookies.get(\"token\"); if (token) {   axios.defaults.headers.common[\"Authorization\"] = token; }<\/code><\/pre>\n<p>\u041b\u0443\u0447\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">\u0411\u0435\u0437 \u043a\u043e\u0434\u0430 ?<\/code><\/pre>\n<p><strong><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/em><\/strong> <\/p>\n<ul>\n<li>\n<p><em>\u041a\u0443\u043a\u0438 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0441\u0435 \u0441\u0430\u0439\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0434\u043e\u043c\u0435\u043d\u0430. \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043a\u0435\u043d \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435 \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u0434\u043e\u043c\u0435\u043d\u0435, \u0447\u0442\u043e \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430.<\/em><\/p>\n<\/li>\n<li>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 HttpOnly \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0434\u043b\u044f \u0438\u0437\u0431\u0435\u0433\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043a\u0443\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 JavaScript.<\/em>   <\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (interceptors) \u0434\u043b\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">axios.get(\"\/api\", {   headers: {     ts: new Date().getTime(),   }, });<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">axios.interceptors.request.use(   (config) => {     \/\/ \u041a\u043e\u0434, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430     config.headers[\"ts\"] = new Date().getTime();     return config;   },   (error) => {     \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u0437 \u0437\u0430\u043f\u0440\u043e\u0441\u0430     return Promise.reject(error);   } );  \/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 axios.get(\"\/api\");<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 react context\/redux \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u043f\u043e\u0432 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const auth = { name: \"John\", age: 30 }; return (   &lt;Router>     &lt;Route path=\"\/\" element={&lt;App auth={auth} \/>} \/>     &lt;Route path=\"\/home\" element={&lt;Home auth={auth} \/>} \/>   &lt;\/Router> );<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">return (   &lt;Provider store={store}>     &lt;Router>       &lt;Route         path=\"\/\"         element={&lt;App \/>}       \/>       &lt;Route         path=\"\/home\"         element={&lt;Home \/>}       \/>     &lt;\/Router> );   \/\/ \u0412\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 const { auth } = useContext(AuthContext); \/\/ \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 const { auth } = useSelector((state) => state.auth); \/\/ \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 redux<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f styled-components<\/h3>\n<p>\u041d\u0435 \u043f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434, \u043d\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0434\u0443\u043c\u0430\u0442\u044c \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/p>\n<pre><code class=\"javascript\">const Button = styled.button`   margin: 1.31rem 1.43rem;   padding: 1.25rem 1.5rem; `;<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 rem<\/p>\n<pre><code class=\"javascript\">const toRem = (value) => `${value \/ 16}rem`; const Button = styled.button`   margin: ${toRem(21)} ${toRem(23)};   padding: ${toRem(20)} ${toRem(24)}; `;<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const onNameChange = (e) => setName(e.target.value); const onEmailChange = (e) => setEmail(e.target.value);  return (   &lt;form>     &lt;input type=\"text\" name=\"name\" onChange={onNameChange} \/>     &lt;input type=\"text\" name=\"email\" onChange={onEmailChange} \/>   &lt;\/form> );<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const onInputChange = (e) => {   const { name, value } = e.target;   setFormData((prevState) => ({     ...prevState,     [name]: value,   })); };  return (   &lt;form>     &lt;input type=\"text\" name=\"name\" onChange={onInputChange} \/>     &lt;input type=\"text\" name=\"email\" onChange={onInputChange} \/>   &lt;\/form> );<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 intersection observer \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">element.addEventListener(\"scroll\", function (e) {   \/\/ do something });<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const useScroll = (ele, options = {}): boolean => {   const [isIntersecting, setIsIntersecting] = useState(false);   useEffect(() => {     const cb = (entry) => setIsIntersecting(() => entry.isIntersecting);     const callback: IntersectionObserverCallback = (entries) => entries.forEach(cb);     const observer = new IntersectionObserver(callback, options);     if (ele) observer.observe(ele);     return (): void => ele &amp;&amp; observer.unobserve(ele);   }, [ele]);   return isIntersecting; };   \/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 const ref = useRef&lt;any>(); const isIntersecting = useScroll(ref?.current);  useEffect(() => {   if (isIntersecting) {     \/\/ \u0432\u044b\u0437\u043e\u0432 API   } }, [isIntersecting]);<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 HOC \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const Component = () => {   if (!isAuthenticated()) {     return &lt;Redirect to=\"\/login\" \/>;   }   return &lt;div>&lt;\/div>; };<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const withAuth = (Component) => {   return (props) => {     if (!isAuthenticated()) {       return &lt;Redirect to=\"\/login\" \/>;     }     return &lt;Component {...props} \/>;   }; };  \/\/ \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f &lt;Route path=\"\/home\" component={withAuth(Home)} \/>;  \/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 const Component = (props) => &lt;div>&lt;\/div>; export default withAuth(Component);<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438<\/h3>\n<p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">return (   &lt;Router>     &lt;Route path=\"\/\" element={&lt;App \/>} \/>     &lt;Route path=\"\/about\" element={&lt;About \/>} \/>     &lt;Route path=\"\/topics\" element={&lt;Topics \/>} \/>   &lt;\/Router> );<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const routes = [   {     path: \"\/\",     role: [\"ADMIN\"],     element: React.lazy(() => import(\"..\/pages\/App\")),     children: [       {         path: \"\/child\",         element: React.lazy(() => import(\"..\/pages\/Child\")),       },     ],   },   {     path: \"\/about\",     role: [],     element: React.lazy(() => import(\"..\/pages\/About\")),   },   {     path: \"\/topics\",     role: [\"User\"],     element: React.lazy(() => import(\"..\/pages\/Topics\")),   }, ];  const createRoute = ({ element, children, role, ...route }) => {   const Component = role.length > 0 ? withAuth(element) : element;   return (     &lt;Route key={route.path} {...route} element={&lt;Component \/>}>       {children &amp;&amp; children.map(createRoute)}     &lt;\/Route>   ); };  return &lt;Routes>{routes.map(createRoute)}&lt;\/Routes>;<\/code><\/pre>\n<p><strong><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/em><\/strong><em> \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u043c. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 HOC, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c createRoute.<\/em><\/p>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Typescript<\/h3>\n<p>\u041d\u0438\u0447\u0435\u0433\u043e \u043f\u043b\u043e\u0445\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Typescript <strong>?<\/strong>, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043e\u043d \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434 \u043b\u0443\u0447\u0448\u0435.<\/p>\n<pre><code class=\"javascript\">npx create-react-app my-app --template typescript<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 eslint, prettier \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<pre><code class=\"javascript\">npm install -D eslint prettier npx eslint --init<\/code><\/pre>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u043c\u043e\u0449\u0438 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435: <a href=\"https:\/\/eslint.org\/docs\/user-guide\/getting-started\" rel=\"noopener noreferrer nofollow\">Eslint<\/a>, <a href=\"https:\/\/prettier.io\/docs\/en\/install.html\" rel=\"noopener noreferrer nofollow\">Prettier<\/a><\/p>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 pre-commit \u0445\u0443\u043a \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 eslint \u0438 prettier<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">npx mrm@2 lint-staged \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f pre-commit \u0445\u0443\u043a\u0430  \/\/ \u0421\u043a\u0440\u0438\u043f\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0432 \u043a\u043e\u0440\u043d\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 .husky\/pre-commit  \/\/ Package.json \"lint-staged\": {   \"src\/**\/*.{js,ts,jsx,tsx}\": [     \"npm run lint\",     \"npm run prettier\",     \"npm run unit-test\",     \"git add\"   ] }<\/code><\/pre>\n<p><strong><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/em><\/strong><\/p>\n<ul>\n<li>\n<p><em>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 prettier \u0438 eslint \u043f\u0440\u0438 \u043a\u043e\u043c\u043c\u0438\u0442\u0435. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 package.json.<\/em><\/p>\n<\/li>\n<li>\n<p><em>\u041b\u0443\u0447\u0448\u0435, \u0435\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d CI &amp; CD \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e. \u041a\u0442\u043e-\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c pre-commit \u0445\u0443\u043a \u0438 \u0437\u0430\u043f\u0443\u0448\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0433\u0438\u0442.<\/em>  <\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h3>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e VSCode \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043b\u0435\u0433\u043a\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h3>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=formulahendry.auto-close-tag\" rel=\"noopener noreferrer nofollow\"><u>Auto Close Tag<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=formulahendry.auto-rename-tag\" rel=\"noopener noreferrer nofollow\"><u>Auto Rename Tag<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=kisstkondoros.vscode-codemetrics\" rel=\"noopener noreferrer nofollow\"><u>CodeMetrics<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=pranaygp.vscode-css-peek\" rel=\"noopener noreferrer nofollow\"><u>CSS Peek<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dsznajder.es7-react-js-snippets\" rel=\"noopener noreferrer nofollow\"><u>ES7+ React\/Redux\/React-Native snippets<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\" rel=\"noopener noreferrer nofollow\"><u>Eslint<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=eamodio.gitlens\" rel=\"noopener noreferrer nofollow\"><u>GitLens<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=wix.vscode-import-cost\" rel=\"noopener noreferrer nofollow\"><u>Import Cost<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode\" rel=\"noopener noreferrer nofollow\"><u>Prettier<\/u><\/a>  <\/p>\n<p><strong><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/em><\/strong><em> \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0446\u0435\u043d\u043a\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (CodeMetrics). \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/em><\/p>\n<figure class=\"full-width\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/habrastorage.org\/r\/w1560\/getpro\/habr\/upload_files\/701\/1eb\/b17\/7011ebb17d8f975118a1ee11ce46790a.png\" width=\"880\" height=\"174\" data-src=\"https:\/\/habrastorage.org\/getpro\/habr\/upload_files\/701\/1eb\/b17\/7011ebb17d8f975118a1ee11ce46790a.png\"\/><figcaption><\/figcaption><\/figure>\n<hr\/>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435 ?<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/658079\/\"> https:\/\/habr.com\/ru\/post\/658079\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<div><\/div>\n<div id=\"post-content-body\">\n<div>\n<div class=\"article-formatted-body article-formatted-body_version-2\">\n<div xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\">\n<p>\u041f\u0440\u0438\u0432\u0435\u0442! \u042d\u0442\u043e \u0442\u0440\u0435\u0442\u044c\u044f \u0438 \u0437\u0430\u043a\u043b\u044e\u0447\u0438\u0442\u0435\u043b\u044c\u043d\u0430\u044f \u0447\u0430\u0441\u0442\u044c \u0441\u0435\u0440\u0438\u0438 \u0441\u0442\u0430\u0442\u0435\u0439 \u201c\u041b\u0443\u0447\u0448\u0438\u0435 \u043f\u043e\u0434\u0445\u043e\u0434\u044b \u0438 \u0440\u0435\u0448\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u0443\u043c\u0435\u043d\u044c\u0448\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430 \u043d\u0430 React\u201d \u0430\u0432\u0442\u043e\u0440\u0430 Rahul Sharma. \u041f\u0440\u0435\u0434\u044b\u0434\u0443\u0449\u0438\u0435 \u0441\u0442\u0430\u0442\u044c\u0438 \u0432\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043d\u0430\u0439\u0442\u0438 \u043f\u043e \u0441\u0441\u044b\u043b\u043a\u0430\u043c \u043d\u0438\u0436\u0435:<\/p>\n<ul>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/post\/657673\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0430\u0441\u0442\u044c 1<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/post\/657879\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0430\u0441\u0442\u044c 2<\/a><\/p>\n<\/li>\n<li>\n<p><a href=\"https:\/\/habr.com\/ru\/post\/658079\/\" rel=\"noopener noreferrer nofollow\">\u0427\u0430\u0441\u0442\u044c 3<\/a><\/p>\n<\/li>\n<\/ul>\n<h2>\u0425\u0440\u0430\u043d\u0438\u0442\u0435 \u0442\u043e\u043a\u0435\u043d \u0432 \u043a\u0443\u043a\u0438, \u0432\u043c\u0435\u0441\u0442\u043e localStorage<\/h2>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const token = localStorage.getItem(\"token\"); if (token) {   axios.defaults.headers.common[\"Authorization\"] = token; }<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">import Cookies from \"js-cookie\"; \/\/  \u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0434\u0440\u0443\u0433\u0443\u044e \u0431\u0438\u0431\u043b\u0438\u043e\u0442\u0435\u043a\u0443  const token = Cookies.get(\"token\"); if (token) {   axios.defaults.headers.common[\"Authorization\"] = token; }<\/code><\/pre>\n<p>\u041b\u0443\u0447\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">\u0411\u0435\u0437 \u043a\u043e\u0434\u0430 ?<\/code><\/pre>\n<p><strong><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/em><\/strong> <\/p>\n<ul>\n<li>\n<p><em>\u041a\u0443\u043a\u0438 \u0440\u0430\u0441\u043f\u0440\u043e\u0441\u0442\u0440\u0430\u043d\u044f\u044e\u0442\u0441\u044f \u043d\u0430 \u0432\u0441\u0435 \u0441\u0430\u0439\u0442\u044b \u0432\u043d\u0443\u0442\u0440\u0438 \u043e\u0434\u043d\u043e\u0433\u043e \u0434\u043e\u043c\u0435\u043d\u0430. \u0422\u0430\u043a \u0447\u0442\u043e \u043d\u0435\u0442 \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u043e\u0441\u0442\u0438 \u043f\u0440\u043e\u043f\u0438\u0441\u044b\u0432\u0430\u0442\u044c \u0442\u043e\u043a\u0435\u043d \u0432 \u043a\u0430\u0436\u0434\u043e\u043c \u0437\u0430\u043f\u0440\u043e\u0441\u0435. \u0415\u0441\u043b\u0438 \u0436\u0435 \u0431\u044d\u043a\u0435\u043d\u0434 \u043d\u0430\u0445\u043e\u0434\u0438\u0442\u0441\u044f \u043d\u0435 \u043d\u0430 \u0442\u043e\u043c \u0436\u0435 \u0434\u043e\u043c\u0435\u043d\u0435, \u0447\u0442\u043e \u0438 \u0444\u0440\u043e\u043d\u0442\u0435\u043d\u0434, \u0442\u043e \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0440\u0435\u0448\u0435\u043d\u0438\u0435 \u0438\u0437 \u0441\u043b\u0435\u0434\u0443\u044e\u0449\u0435\u0433\u043e \u043f\u0443\u043d\u043a\u0442\u0430.<\/em><\/p>\n<\/li>\n<li>\n<p><em>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 HttpOnly \u0430\u0442\u0440\u0438\u0431\u0443\u0442 \u0434\u043b\u044f \u0438\u0437\u0431\u0435\u0433\u0430\u043d\u0438\u044f \u043f\u043e\u043b\u0443\u0447\u0435\u043d\u0438\u044f \u0434\u043e\u0441\u0442\u0443\u043f\u0430 \u043a \u043a\u0443\u043a\u0438 \u0447\u0435\u0440\u0435\u0437 JavaScript.<\/em>   <\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043f\u0435\u0440\u0435\u0445\u0432\u0430\u0442\u0447\u0438\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u043e\u0432 (interceptors) \u0434\u043b\u044f \u0442\u043e\u043a\u0435\u043d\u0430 \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438\u043b\u0438 \u0434\u0440\u0443\u0433\u0438\u0445 \u0441\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u044b\u0445 \u0437\u0430\u0433\u043e\u043b\u043e\u0432\u043a\u043e\u0432<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">axios.get(\"\/api\", {   headers: {     ts: new Date().getTime(),   }, });<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">axios.interceptors.request.use(   (config) => {     \/\/ \u041a\u043e\u0434, \u043d\u0435\u043e\u0431\u0445\u043e\u0434\u0438\u043c\u044b\u0439 \u0434\u043e \u043e\u0442\u043f\u0440\u0430\u0432\u043a\u0438 \u0437\u0430\u043f\u0440\u043e\u0441\u0430     config.headers[\"ts\"] = new Date().getTime();     return config;   },   (error) => {     \/\/ \u041e\u0431\u0440\u0430\u0431\u043e\u0442\u043a\u0430 \u043e\u0448\u0438\u0431\u043a\u0438 \u0438\u0437 \u0437\u0430\u043f\u0440\u043e\u0441\u0430     return Promise.reject(error);   } );  \/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 axios.get(\"\/api\");<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 react context\/redux \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0434\u0430\u0447\u0438 \u043f\u0440\u043e\u043f\u043e\u0432 \u0432 \u0434\u043e\u0447\u0435\u0440\u043d\u0438\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const auth = { name: \"John\", age: 30 }; return (   &lt;Router>     &lt;Route path=\"\/\" element={&lt;App auth={auth} \/>} \/>     &lt;Route path=\"\/home\" element={&lt;Home auth={auth} \/>} \/>   &lt;\/Router> );<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">return (   &lt;Provider store={store}>     &lt;Router>       &lt;Route         path=\"\/\"         element={&lt;App \/>}       \/>       &lt;Route         path=\"\/home\"         element={&lt;Home \/>}       \/>     &lt;\/Router> );   \/\/ \u0412\u043d\u0443\u0442\u0440\u0438 \u0434\u043e\u0447\u0435\u0440\u043d\u0435\u0433\u043e \u043a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442\u0430 const { auth } = useContext(AuthContext); \/\/ \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 \u043a\u043e\u043d\u0442\u0435\u043a\u0441\u0442\u0430 const { auth } = useSelector((state) => state.auth); \/\/ \u041f\u0440\u0438 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u043d\u0438\u0438 redux<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f styled-components<\/h3>\n<p>\u041d\u0435 \u043f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434, \u043d\u043e \u0441\u043b\u043e\u0436\u043d\u044b\u0439 \u0434\u043b\u044f \u0447\u0442\u0435\u043d\u0438\u044f, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u0441\u0435 \u043f\u0440\u0438\u0432\u044b\u043a\u043b\u0438 \u0434\u0443\u043c\u0430\u0442\u044c \u0432 \u043f\u0438\u043a\u0441\u0435\u043b\u044f\u0445<\/p>\n<pre><code class=\"javascript\">const Button = styled.button`   margin: 1.31rem 1.43rem;   padding: 1.25rem 1.5rem; `;<\/code><\/pre>\n<p>\u0421\u043e\u0437\u0434\u0430\u0439\u0442\u0435 \u0432\u0441\u043f\u043e\u043c\u043e\u0433\u0430\u0442\u0435\u043b\u044c\u043d\u0443\u044e \u0444\u0443\u043d\u043a\u0446\u0438\u044e \u0434\u043b\u044f \u043f\u0435\u0440\u0435\u0432\u043e\u0434\u0430 \u043f\u0438\u043a\u0441\u0435\u043b\u0435\u0439 \u0432 rem<\/p>\n<pre><code class=\"javascript\">const toRem = (value) => `${value \/ 16}rem`; const Button = styled.button`   margin: ${toRem(21)} ${toRem(23)};   padding: ${toRem(20)} ${toRem(24)}; `;<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u0443\u043d\u0438\u0432\u0435\u0440\u0441\u0430\u043b\u044c\u043d\u044b\u0435 \u0444\u0443\u043d\u043a\u0446\u0438\u0438 \u0434\u043b\u044f \u0438\u0437\u043c\u0435\u043d\u0435\u043d\u0438\u044f \u0434\u0430\u043d\u043d\u044b\u0445 \u0432\u043d\u0443\u0442\u0440\u0438 \u043f\u043e\u043b\u0435\u0439 \u0432\u0432\u043e\u0434\u0430<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const onNameChange = (e) => setName(e.target.value); const onEmailChange = (e) => setEmail(e.target.value);  return (   &lt;form>     &lt;input type=\"text\" name=\"name\" onChange={onNameChange} \/>     &lt;input type=\"text\" name=\"email\" onChange={onEmailChange} \/>   &lt;\/form> );<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const onInputChange = (e) => {   const { name, value } = e.target;   setFormData((prevState) => ({     ...prevState,     [name]: value,   })); };  return (   &lt;form>     &lt;input type=\"text\" name=\"name\" onChange={onInputChange} \/>     &lt;input type=\"text\" name=\"email\" onChange={onInputChange} \/>   &lt;\/form> );<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 intersection observer \u0434\u043b\u044f \u0440\u0435\u0430\u043b\u0438\u0437\u0430\u0446\u0438\u0438 \u043e\u0442\u043b\u043e\u0436\u0435\u043d\u043d\u043e\u0439 \u0437\u0430\u0433\u0440\u0443\u0437\u043a\u0438<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">element.addEventListener(\"scroll\", function (e) {   \/\/ do something });<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const useScroll = (ele, options = {}): boolean => {   const [isIntersecting, setIsIntersecting] = useState(false);   useEffect(() => {     const cb = (entry) => setIsIntersecting(() => entry.isIntersecting);     const callback: IntersectionObserverCallback = (entries) => entries.forEach(cb);     const observer = new IntersectionObserver(callback, options);     if (ele) observer.observe(ele);     return (): void => ele &amp;&amp; observer.unobserve(ele);   }, [ele]);   return isIntersecting; };   \/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 const ref = useRef&lt;any>(); const isIntersecting = useScroll(ref?.current);  useEffect(() => {   if (isIntersecting) {     \/\/ \u0432\u044b\u0437\u043e\u0432 API   } }, [isIntersecting]);<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 HOC \u0434\u043b\u044f \u0430\u0432\u0442\u043e\u0440\u0438\u0437\u0430\u0446\u0438\u0438 \u0438 \u043f\u0440\u0438\u0432\u0430\u0442\u043d\u043e\u0439 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const Component = () => {   if (!isAuthenticated()) {     return &lt;Redirect to=\"\/login\" \/>;   }   return &lt;div>&lt;\/div>; };<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const withAuth = (Component) => {   return (props) => {     if (!isAuthenticated()) {       return &lt;Redirect to=\"\/login\" \/>;     }     return &lt;Component {...props} \/>;   }; };  \/\/ \u041d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044f &lt;Route path=\"\/home\" component={withAuth(Home)} \/>;  \/\/ \u041a\u043e\u043c\u043f\u043e\u043d\u0435\u043d\u0442 const Component = (props) => &lt;div>&lt;\/div>; export default withAuth(Component);<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 \u043c\u0430\u0441\u0441\u0438\u0432 \u0441 \u043e\u0431\u044a\u0435\u043a\u0442\u0430\u043c\u0438 \u0434\u0430\u043d\u043d\u044b\u0445 \u043d\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u0438 \u043f\u0440\u0438 \u0435\u0435 \u0441\u043e\u0437\u0434\u0430\u043d\u0438\u0438<\/h3>\n<p>\u0421\u0442\u0430\u043d\u0434\u0430\u0440\u0442\u043d\u043e\u0435 \u0440\u0435\u0448\u0435\u043d\u0438\u0435:<\/p>\n<pre><code class=\"javascript\">return (   &lt;Router>     &lt;Route path=\"\/\" element={&lt;App \/>} \/>     &lt;Route path=\"\/about\" element={&lt;About \/>} \/>     &lt;Route path=\"\/topics\" element={&lt;Topics \/>} \/>   &lt;\/Router> );<\/code><\/pre>\n<p>\u0425\u043e\u0440\u043e\u0448\u0438\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">const routes = [   {     path: \"\/\",     role: [\"ADMIN\"],     element: React.lazy(() => import(\"..\/pages\/App\")),     children: [       {         path: \"\/child\",         element: React.lazy(() => import(\"..\/pages\/Child\")),       },     ],   },   {     path: \"\/about\",     role: [],     element: React.lazy(() => import(\"..\/pages\/About\")),   },   {     path: \"\/topics\",     role: [\"User\"],     element: React.lazy(() => import(\"..\/pages\/Topics\")),   }, ];  const createRoute = ({ element, children, role, ...route }) => {   const Component = role.length > 0 ? withAuth(element) : element;   return (     &lt;Route key={route.path} {...route} element={&lt;Component \/>}>       {children &amp;&amp; children.map(createRoute)}     &lt;\/Route>   ); };  return &lt;Routes>{routes.map(createRoute)}&lt;\/Routes>;<\/code><\/pre>\n<p><strong><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/em><\/strong><em> \u044d\u0442\u043e \u0442\u0440\u0435\u0431\u0443\u0435\u0442 \u0431\u043e\u043b\u044c\u0448\u0435 \u043a\u043e\u0434\u0430, \u043d\u043e \u0441\u0442\u0430\u043d\u043e\u0432\u0438\u0442\u0441\u044f \u0431\u043e\u043b\u0435\u0435 \u043d\u0430\u0441\u0442\u0440\u0430\u0438\u0432\u0430\u0435\u043c\u044b\u043c. \u041a \u043f\u0440\u0438\u043c\u0435\u0440\u0443, \u0435\u0441\u043b\u0438 \u0432\u044b \u0445\u043e\u0442\u0438\u0442\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u043e\u0432\u0430\u0442\u044c \u0431\u043e\u043b\u044c\u0448\u0435 HOC, \u0432\u0430\u043c \u043d\u0443\u0436\u043d\u043e \u0432\u0441\u0435\u0433\u043e \u043b\u0438\u0448\u044c \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c createRoute.<\/em><\/p>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 Typescript<\/h3>\n<p>\u041d\u0438\u0447\u0435\u0433\u043e \u043f\u043b\u043e\u0445\u043e\u0433\u043e, \u0435\u0441\u043b\u0438 \u0432\u044b \u043d\u0435 \u0438\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0435\u0442\u0435 Typescript <strong>?<\/strong>, \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u043e\u043d \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0441\u0434\u0435\u043b\u0430\u0442\u044c \u0432\u0430\u0448 \u043a\u043e\u0434 \u043b\u0443\u0447\u0448\u0435.<\/p>\n<pre><code class=\"javascript\">npx create-react-app my-app --template typescript<\/code><\/pre>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 eslint, prettier \u0434\u043b\u044f \u0444\u043e\u0440\u043c\u0430\u0442\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u044f<\/h3>\n<pre><code class=\"javascript\">npm install -D eslint prettier npx eslint --init<\/code><\/pre>\n<p>\u0421\u0441\u044b\u043b\u043a\u0438 \u0434\u043b\u044f \u043f\u043e\u043c\u043e\u0449\u0438 \u0432 \u043d\u0430\u0441\u0442\u0440\u043e\u0439\u043a\u0435: <a href=\"https:\/\/eslint.org\/docs\/user-guide\/getting-started\" rel=\"noopener noreferrer nofollow\">Eslint<\/a>, <a href=\"https:\/\/prettier.io\/docs\/en\/install.html\" rel=\"noopener noreferrer nofollow\">Prettier<\/a><\/p>\n<hr\/>\n<h3>\u0418\u0441\u043f\u043e\u043b\u044c\u0437\u0443\u0439\u0442\u0435 pre-commit \u0445\u0443\u043a \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 eslint \u0438 prettier<\/h3>\n<p>\u041f\u043b\u043e\u0445\u043e\u0439 \u043a\u043e\u0434:<\/p>\n<pre><code class=\"javascript\">npx mrm@2 lint-staged \/\/ \u0423\u0441\u0442\u0430\u043d\u043e\u0432\u043a\u0430 \u0438 \u043a\u043e\u043d\u0444\u0438\u0433\u0443\u0440\u0430\u0446\u0438\u044f pre-commit \u0445\u0443\u043a\u0430  \/\/ \u0421\u043a\u0440\u0438\u043f\u0442 \u0431\u0443\u0434\u0435\u0442 \u0441\u043e\u0437\u0434\u0430\u043d \u0432 \u043a\u043e\u0440\u043d\u0435 \u0432\u0430\u0448\u0435\u0433\u043e \u043f\u0440\u043e\u0435\u043a\u0442\u0430 .husky\/pre-commit  \/\/ Package.json \"lint-staged\": {   \"src\/**\/*.{js,ts,jsx,tsx}\": [     \"npm run lint\",     \"npm run prettier\",     \"npm run unit-test\",     \"git add\"   ] }<\/code><\/pre>\n<p><strong><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/em><\/strong><\/p>\n<ul>\n<li>\n<p><em>\u0412\u044b \u043c\u043e\u0436\u0435\u0442\u0435 \u043e\u0431\u043d\u043e\u0432\u0438\u0442\u044c \u043a\u043e\u043d\u0444\u0438\u0433 \u0434\u043b\u044f \u0437\u0430\u043f\u0443\u0441\u043a\u0430 prettier \u0438 eslint \u043f\u0440\u0438 \u043a\u043e\u043c\u043c\u0438\u0442\u0435. \u0412\u044b \u0442\u0430\u043a\u0436\u0435 \u043c\u043e\u0436\u0435\u0442\u0435 \u0434\u043e\u0431\u0430\u0432\u043b\u044f\u0442\u044c \u0438\u043b\u0438 \u0443\u0434\u0430\u043b\u044f\u0442\u044c \u043a\u043e\u043c\u0430\u043d\u0434\u044b \u0432 package.json.<\/em><\/p>\n<\/li>\n<li>\n<p><em>\u041b\u0443\u0447\u0448\u0435, \u0435\u0441\u043b\u0438 \u0432 \u043f\u0440\u043e\u0435\u043a\u0442\u0435 \u043d\u0430\u0441\u0442\u0440\u043e\u0435\u043d CI &amp; CD \u0434\u043b\u044f \u044d\u0442\u043e\u0433\u043e. \u041a\u0442\u043e-\u0442\u043e \u043c\u043e\u0436\u0435\u0442 \u0437\u0430\u043a\u043e\u043c\u043c\u0435\u043d\u0442\u0438\u0440\u043e\u0432\u0430\u0442\u044c pre-commit \u0445\u0443\u043a \u0438 \u0437\u0430\u043f\u0443\u0448\u0438\u0442\u044c \u0435\u0433\u043e \u0432 \u0433\u0438\u0442.<\/em>  <\/p>\n<\/li>\n<\/ul>\n<hr\/>\n<h3>\u041d\u0435\u0441\u043a\u043e\u043b\u044c\u043a\u043e VSCode \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u0439 \u0434\u043b\u044f \u0431\u043e\u043b\u0435\u0435 \u043b\u0435\u0433\u043a\u043e\u0439 \u0440\u0430\u0437\u0440\u0430\u0431\u043e\u0442\u043a\u0438<\/h3>\n<p><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=formulahendry.auto-close-tag\" rel=\"noopener noreferrer nofollow\"><u>Auto Close Tag<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=formulahendry.auto-rename-tag\" rel=\"noopener noreferrer nofollow\"><u>Auto Rename Tag<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=kisstkondoros.vscode-codemetrics\" rel=\"noopener noreferrer nofollow\"><u>CodeMetrics<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=pranaygp.vscode-css-peek\" rel=\"noopener noreferrer nofollow\"><u>CSS Peek<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dsznajder.es7-react-js-snippets\" rel=\"noopener noreferrer nofollow\"><u>ES7+ React\/Redux\/React-Native snippets<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=dbaeumer.vscode-eslint\" rel=\"noopener noreferrer nofollow\"><u>Eslint<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=eamodio.gitlens\" rel=\"noopener noreferrer nofollow\"><u>GitLens<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=wix.vscode-import-cost\" rel=\"noopener noreferrer nofollow\"><u>Import Cost<\/u><\/a><strong>,\u00a0<\/strong><a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=esbenp.prettier-vscode\" rel=\"noopener noreferrer nofollow\"><u>Prettier<\/u><\/a>  <\/p>\n<p><strong><em>\u041f\u0440\u0438\u043c\u0435\u0447\u0430\u043d\u0438\u0435:<\/em><\/strong><em> \u043f\u043e\u043f\u0440\u043e\u0431\u0443\u0439\u0442\u0435 \u0440\u0430\u0441\u0448\u0438\u0440\u0435\u043d\u0438\u044f \u0434\u043b\u044f \u043e\u0446\u0435\u043d\u043a\u0438 \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u0438 \u0444\u0443\u043d\u043a\u0446\u0438\u0439 (CodeMetrics). \u042d\u0442\u043e \u043f\u043e\u043c\u043e\u0436\u0435\u0442 \u0432 \u043d\u0430\u043f\u0438\u0441\u0430\u043d\u0438\u0438 \u0431\u043e\u043b\u0435\u0435 \u0445\u043e\u0440\u043e\u0448\u0435\u0433\u043e \u043a\u043e\u0434\u0430, \u0442\u0430\u043a \u043a\u0430\u043a \u0432\u044b \u0431\u0443\u0434\u0435\u0442\u0435 \u0432\u0438\u0434\u0435\u0442\u044c \u0441\u043b\u043e\u0436\u043d\u043e\u0441\u0442\u044c \u0432\u044b\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u044f \u043a\u043e\u0434\u0430.<\/em><\/p>\n<figure class=\"full-width\"><figcaption><\/figcaption><\/figure>\n<hr\/>\n<p>\u0421\u043f\u0430\u0441\u0438\u0431\u043e \u0437\u0430 \u043f\u0440\u043e\u0447\u0442\u0435\u043d\u0438\u0435 ?<\/p>\n<\/div>\n<\/div>\n<\/div>\n<div class=\"v-portal\" style=\"display:none;\"><\/div>\n<\/div>\n<p> <!----> <!----><br \/> \u0441\u0441\u044b\u043b\u043a\u0430 \u043d\u0430 \u043e\u0440\u0438\u0433\u0438\u043d\u0430\u043b \u0441\u0442\u0430\u0442\u044c\u0438 <a href=\"https:\/\/habr.com\/ru\/post\/658079\/\"> https:\/\/habr.com\/ru\/post\/658079\/<\/a><br \/><\/br><\/br><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":["post-331224","post","type-post","status-publish","format-standard","hentry"],"_links":{"self":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/331224","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=331224"}],"version-history":[{"count":0,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=\/wp\/v2\/posts\/331224\/revisions"}],"wp:attachment":[{"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=331224"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=331224"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/savepearlharbor.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=331224"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}