По материалам React’s Docs. React - это не MVC. Это библиотека просмотра. Это намерение создателей React. Фактически, Facebook намеревался переосмыслить структуру MVC с помощью этого проекта. Они остановились на архитектуре, которую они назвали Flux для клиентской архитектуры. React - это просто часть головоломки Flux, и ее можно использовать как мощную библиотеку View самостоятельно (вам не нужно использовать архитектуру Flux, чтобы использовать компоненты React для пользовательского интерфейса). Узнать больше о Flux можно здесь.

Сегодня я просто хочу поговорить о компонентах React. Я начал так, чтобы вы не сразу думали о системе типа MVC, думая о компонентах React. Подумайте только о кусочках зрения. Было бы полезно думать о компонентах React как о сверхмощных узлах DOM.

Итак, я собираюсь поделиться кодом в ES6 (он же ES2015), чтобы показать вам приблизительное представление о том, как должны выглядеть эти компоненты. Если вы хотите протестировать React или любой другой фреймворк, я рекомендую http://todomvc.com/. Создайте вилку репозитория GitHub и протестируйте его!

Приложения React состоят из вложенных компонентов пользовательского интерфейса. Я собираюсь показать очень простой пример компонента с вложенным компонентом пользовательского интерфейса.

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

  • Создание компонента с правильным HTML-подобным кодом (этот HTML-подобный код взят из JSX, расширения синтаксиса JavaScript), который нужно будет отобразить.
var App = () => (
  <div>
    <h2>My Slow Carb Grocery List</h2>
    <TodoList />
  </div>
);
  • Рендеринг этого компонента.
ReactDOM.render(<App />, document.getElementById("app"));

Пока все довольно просто. Немного необычно, если вы не привыкли к ES6 или JSX, но вы обнаружите, что это растет на вас. JSX хорош тем, что очень легко визуализировать, что происходит с представлением, поскольку он очень похож на HTML.

Главное, на что я хочу обратить внимание, - это строка кода ‹TodoList /› HTML, похожая на элемент. Это наш вложенный компонент внутри нашего компонента приложения. Это предполагает, что мы создали другой компонент, точно так же, как мы создали компонент App, и назвали его TodoList. Это выглядело бы примерно так:

var TodoList = () => (
  <ul>
    <li>Chicken</li>
    <li>Lentils</li>
    <li>Green Beans</li>
  </ul>
);

Самое замечательное в этом то, что вы фактически визуализируете компонент TodoList внутри компонента приложения, просто включая ‹TodoList /›, как мы. Другими словами, вам не нужен еще один вызов ReactDom.render (…) для TodoList, потому что мы включили его в приложение, которое отображается. React очень линейный. Это было сделано намеренно создателями React. Они хотели решить проблему слежения за потоком MVC и потеряться в собственных диаграммах. Посмотрите это отличное видео, рассказывающее, как родились React и Flux.

В следующем посте я более подробно расскажу о передаче данных. Это делается в реакции с помощью props и States. А пока не стесняйтесь узнать больше о props vs state здесь. Наслаждаться!