- Варианты создания компонента (pureFunction, class, createElement)
- pureRender - знания принципа ререндера Реакт приложений при изменениях хранилищ, какие props приводят к неоправданному перерендеру, кеширование результатов функций
- Контейнер - его назначение, основные задачи, типовая структура
- Глупый компонент - его назначение, основные задачи, принцип разбиения на компоненты, функции
- React router - как создавать синхронный, асинхронный роутер, как отложить рендер компонента в Route на время загрузки, как работает функция match, как считывать параметры url ?q=1, #q=1 как их устанавливать при .
- Последовательность DOM render, последовательность вызова всех функций компонента, например componentDidMount, componentWillMount, componentWillReceiveProps и всех остальных. Как использовать ref, в какой момент он вызывается.
| import { useLocation, useHistory } from 'react-router-dom'; | |
| import { useEffect, useState } from 'react'; | |
| import moment, { Moment } from 'moment'; | |
| const isValidDate = (d: any): boolean => { | |
| return moment(d).isValid(); | |
| }; | |
| type CustomPropertyKey = boolean | number[] | string[] | Date | PropertyKey; |
| #!/usr/bin/env bash | |
| SLEEP_DURATION=${SLEEP_DURATION:=1} # default to 1 second, use to speed up tests | |
| progress-bar() { | |
| local duration | |
| local columns | |
| local space_available | |
| local fit_to_screen | |
| local space_reserved |
| #!/usr/bin/env bash | |
| SLEEP_DURATION=${SLEEP_DURATION:=1} # default to 1 second, use to speed up tests | |
| progress-bar() { | |
| local duration | |
| local columns | |
| local space_available | |
| local fit_to_screen | |
| local space_reserved |
| const countries = [ | |
| { | |
| "name": "RU", | |
| "title": "Россия (RU)", | |
| "visible": true, | |
| "visa": false | |
| }, | |
| { | |
| "name": "AB", | |
| "title": "Абхазия (AB)", |
| # Шаблон JIRA для dev | |
| После готовности задачи, разработчик прикрепляет комментарий по шаблону в JIRA - карточке задачи. | |
| ``` | |
| *Исполнитель:* @vetsel | |
| *Стенд:* http://relef.csssr.ru/ | |
| *Pull-request:* https://github.com/CSSSR/relef/pull/2615 | |
| *Документация:* | |
| # http://wiki.relef.ru/pages/viewpage.action?pageId=7930001 | |
| # ссылка_на_описание_АПИ |
| import * as express from 'express' | |
| import UserRegistrator from '../classes/user_registrator/user_registrator' | |
| import User from '../classes/user/user' |
| import UserAvatar from '../UserAvatar' | |
| import CompanyAvatar from '../CompanyAvatar' | |
| const getDropdowns = company => ({ | |
| main: [ | |
| { | |
| title: 'Мой график', | |
| link: `/companies/${company}/timetable/my/month` | |
| }, | |
| { |
Команда каждого проекта, а также заказчик (если он участвует в коде разработки), должны договариватся о code style проекта, желательно с самого старта. Для того, чтобы это сделать, как правило, настраивают статический анализатор кода. Для js, чаще всего используют eslint. Его конфигурация хранится в корне проекта в файле конфигурации (пример .eslintrc файла).
Практически любой редактор кода поддерживает отображение предупреждений и ошибок статических анализаторов, это обеспечивает высокую скорость работы, так как при использовании анализатора, вам нет необходимости компилироват и запускать код, чтобы увидет основные опечатки, ошибки и неточности.
Для новичков использование eslint позволяет очень быстро обучиться правильному code style. Существует два наиболее признанных code style: [google](https://google.github.io/styleguide/javascriptguid
| "============================================================================= | |
| " Description: Vimi bundle .vimrc | |
| " Author: Vyacheslav Oliyanchuk <[email protected]> | |
| " URL: http://github.com/miripiruni/vimi/ | |
| "============================================================================= | |
| " Make Vim more useful | |
| set nocompatible | |
| " Vundle setup |