PRDXN реагує на найкращі практики

Facebook React - це декларативна, ефективна та гнучка бібліотека JavaScript для створення інтерфейсів користувача (UI).

Коли я вперше почав писати код в React, я пам’ятаю, що бачив багато різних підходів, що сильно відрізняються від підручника до підручника. Тож моя команда PRDXN і я придумали керівництво / перелік найкращих практик (ВР), які допоможуть нам усім швидше, швидше.

Facebook React - це декларативна, ефективна та гнучка бібліотека JavaScript для створення інтерфейсів користувача (UI).

Далі - наш путівник. Ми сподіваємось, що це допоможе вам прискорити прийняття та використання React; чи ви тільки починаєте / починаєте або досвідчений розробник.

1. Підтримуйте структуру організованої папки:

Як і будь-який проект програмування / кодування, це дуже важливо! Якщо ваші файли проекту не організовані логічно, ви та ваші співробітники можуть заплутатися та витрачати дорогоцінний час на пошук файлів чи редагування неправильних файлів.

На PRDXN ми придумали таку структуру папок, щоб полегшити та зробити неприємним для всіх. Натисніть кнопку "Відтворити", щоб переглянути.

2. Компоненти - шматки та дерева. Гей, ти Javascript Lumberjack!

Компоненти - це серце Реактора. Компонент React - це в основному будь-яка частина інтерфейсу користувача.

Створіть логічні фрагменти інтерфейсу (групування): завжди розділіть ваші компоненти на шматки (так само логічні групи). Розгляньте будь-який інтерфейс програми та починайте ділити інтерфейс користувача на менші логічні фрагменти. Кожен із цих елементів (груп) інтерфейсу є потенційними компонентами.

Дерево, гілки та підгалузі: Повний / повний вигляд інтерфейсу користувача (дерева або стовбура) поділяється на логічні фрагменти (ака гілки). Дерево стає початковим компонентом (компонентом компонування), і тоді кожен фрагмент в інтерфейсі (ака-гілка) перетвориться на підкомпонент, який можна далі розділити на підкомпоненти (він же - підгалузі). Це підтримує інтерфейс користувача організованим, а також дозволяє даним та змінам стану логічно перетікати з дерева до гілок, а потім до підгалузей.

Створіть логічні групування інтерфейсу користувача (шматки): дерево, гілки, підгалузі!

3. Компоненти - функціональні та класові:

Існує два типи компонентів: функціональний та класний.

Коли я повинен перейти з функціональним компонентом? Отримайте функціональний компонент, якщо ваш компонент не робить більше, ніж реквізит. Подумайте про функціональні компоненти як про чисті функції: вони завжди відображатимуться однаково і поводяться однаково, враховуючи однакові реквізити. Крім того, вони не цікавляться методами життєвого циклу; вони є бездержавними.

Функціональний компонент, приклад.

Коли я повинен перейти з компонентним класом? Якщо ваш компонент потребує внутрішнього стану та методів життєвого циклу компонентів, тоді перейдіть до компонента на основі класу. Перевірте це, щоб допомогти вам зрозуміти більше про "внутрішній стан" та "методи життєвого циклу".

Компонент на основі класу, приклад.

4. Реквізит! Реквізит вам! Реквізити мені! Але ні, ми говоримо Реактивні реквізити!

«Концептуально компоненти - це як функції JavaScript. Вони приймають довільні введення (називаються «реквізит») і повертають елементи React, що описують, що має з’являтися на екрані ». Клацніть на джерело.

Принесіть верблюдів! Ні, ти можеш залишити цих верблюдів у десерті. Ми говоримо тут про верблюда Завжди використовуйте camelCase для імен опори. Реквізити також можна розглядати як атрибути, а умовою, встановленою React, є використання camelCase для атрибутів JSX.

Завжди використовуйте camelCase для імен опори.

Повірте, це правда, клянусь! Пропустіть значення опори, коли воно явно вірно. Навіть якщо ми не призначимо справжнє значення реквізиту, це вважається справжнім значенням, тому немає необхідності присвоювати реквізит як значення.

Пропустіть значення опори, коли воно явно вірно.

Уникайте використання індексу масиву як ключового опору; використовуйте натомість унікальний ідентифікатор: Ми бачили, що надто багато розробників використовують індекс елемента як свій ключ, коли вони рендерують список, що ТАК не добре! Це те, що вони неправильно пишуть ...

ЦЕ ПРИКЛАД, ЩО ВИ БУДЕТЕ *** НЕ *** РОБИТИ!

Ключовим моментом є єдине, що React використовує для ідентифікації елементів DOM. Отже, що станеться, якщо ви пересунете елемент до списку або вилучите щось із середини? Якщо ключ такий же, як і раніше, React передбачає, що елемент DOM являє собою той самий набір компонентів (як і раніше). Але це не так!

Ось чому ви повинні використовувати унікальний ідентифікатор. Кожен предмет повинен мати постійну та унікальну властивість (ID). І в ідеалі він (ідентифікатор) повинен бути призначений при створенні елемента. Тож написано щось подібне ...

ЦЕ ПРИКЛАД, ЩО БУДЕ *** ДІЙТЕ!

Завжди визначайте явні параметри defaultProps для всіх не потрібних реквізитів. Надання defaultProps означає, що читачеві вашого коду не потрібно приймати речі, оскільки вони знають стандартне значення для реквізиту, просто дивлячись на defaultProps під час надання компонентів.

Bad vs Good example re: визначення defaultProps.

Як бачимо, є невеликі, але дуже важливі речі, які роблять ваш код React відносно без помилок під час перегляду. Витрачаючи час на засвоєння цих кращих практик та використовуючи їх, ви значите, що витрачаєте менше часу на перезапис коду, щоб виправити свої помилки, надаючи більше часу на те, що вам подобається. І якщо робити те, що вам подобається, означає писати код, ви отримаєте більше часу, щоб написати код для іншого проекту!

Більше найкращих практик PRDXN можна знайти тут, на Github: https://github.com/prdxn/React-JS-Checklist. Будь ласка, не соромтеся поділитися та внести свій внесок у цей список. І якщо у вас є якісь проблеми з доступом, зв’яжіть нас у коментарях тут.

Зацікавлені у роботі з PRDXN як клієнт чи як працівник? Тоді удари нас! Перейдіть сюди www.prdxn.com для отримання детальної інформації, включаючи контактні дані.