React: практики, которые помогут стать продвинутым разработчиком

React.js — один из лучших и наиболее популярных способов создать одностраничное приложение. Это гибкий и удобный фреймворк, с помощью которого можно либо добавить компонент на существующий сайт, либо создать новый сайт с нуля.

Сейчас React.js используется во многих других фреймворках и инструментах вроде Next.js, GatsbyJs, Razzle, After.js и т. д. Поэтому если вы хорошо разберётесь в React.js, то пользоваться всеми этими фреймворками станет легче.

Смотрите также: React.js для продолжающих

Используйте фрагменты вместо div

Зачастую у нас на руках множество компонентов, которые приходится оборачивать в div, т.к. render() позволяет вернуть только один компонент. Таким образом мы добавляем в документ лишний HTML-элемент.

Согласно официальному руководству:

Порой мы нарушаем семантику HTML, когда добавляем элементы <div> в JSX, чтобы заставить код React работать, особенно при работе со списками (<ol>, <ul> и <dl>) и таблицами <table>. В таких случаях лучше использовать фрагменты React для группировки нескольких элементов.

			import React, { Fragment } from 'react';

function ListItem({ item }) {
  return (
    <Fragment>
      <dt>{item.term}</dt>
      <dd>{item.description}</dd>
    </Fragment>
  );
}

function Glossary(props) {
  return (
    <dl>
      {props.items.map(item => (
        <ListItem item={item} key={item.id} />
      ))}
    </dl>
  );
}