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 (
    
      
{item.term}
      
{item.description}
    
  );
}

function Glossary(props) {
  return (
    

      {props.items.map(item => (
        
      ))}
    
  );
}