Я официально на 11-й неделе 15-недельного курса разработки программного обеспечения с погружением во Flatiron School. Сумасшедший! Мы собираемся заняться нашим испытанием кода Mod4, закончить наши обучающие лекции и начать работу над проектами Mod4, прежде чем мы проведем последние три недели, работая и создавая наши окончательные проекты. Мы изучили хороший материал о Javascript и React.js, и я буду честен, когда скажу, что немного боролся. React просто не привязывался ко мне, как Ruby/Ruby on Rails и Javascript, поэтому я был немного обескуражен.

Проведя субботу с столь необходимым временем вдали от компьютера, я вернулся к кодированию и повторному обучению себя концепциям большую часть дня в воскресенье, и я могу сказать, что чувствую себя немного лучше. Я пока не уверен на 100%, но знаю, что буду с большей практикой.

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

Я помню урок в Learn.co, на котором мы узнали о различиях и полезности компонентов Presentational и Container. Эти двое были жизненно важны для поддержания моего кода в чистоте и порядке. А теперь я собираюсь рассказать вам, ребята, почему важно использовать эти стили компонентов в вашем коде!

Компоненты контейнера

Мне нравится рассматривать компонент Container как своего рода «посредника» или «посредника» между компонентом Parent и компонентом Presentation. Основная обязанность компонента Container — предоставлять данные и поведение своим дочерним элементам, которыми обычно являются презентационные компоненты. Компоненты-контейнеры имеют очень ограниченный HTML-код, обычно только с оберткой ‹div›. Родительский компонент также обычно считается компонентом-контейнером, поскольку он содержит данные, имеет состояние и вызывает другие компоненты для передачи данных, чтобы отображать данные и предоставлять им функциональные возможности.

// Parent component that also acts as a Container component
import React from 'react';
import CatList from '<file path>';
class App extends React.Component {
   constructor() {
      super();
      this.state = {
         arrayOfCats: [ ... ] 
      };
   render() {
     return (
       <> 
         <CatList cats={this.state.arrayOfCats} />
// <CatList />, or CatList.js is a component being called within
// this Container component
       </> 
     );
   };
};
export default App;

Вы также можете вызвать другой компонент-контейнер внутри родительского компонента, чтобы передать данные и поведение компоненту-представлению, что сделает ваш код еще чище и организованнее! Например, если у вас есть состояние в родительском компоненте, которое содержит массив данных, которые вы хотите отобразить, вы можете передать это состояние в качестве реквизита компоненту-контейнеру, который затем вы можете сопоставить с реквизитом и передать каждый сопоставленный компонент. возражать компоненту Presentation.

// Container component that takes in 'cats' as a prop from App.js
import React from 'react';
import Cat from '<file path>';
class CatList extends React.Component {
   render() {
      return (
         <div> // usually some container/grouping styling here!
            {this.props.cats.map(cat => <Cat cat={cat} />)}
// This container component is calling a Presentational component 
// and passes the data to it, and that's ALL it does! 
        </div>
      );
   };
};
export default CatList;

Презентационные компоненты

Компоненты презентации говорят сами за себя. Его основная обязанность заключается в работе с аспектами представления кода или в рендеринге переданных данных и обеспечении форматирования для их отображения в модели DOM. Если здесь нет определяемых или устанавливаемых/изменяемых состояний, вы можете просто использовать компонент класса, а не функциональный компонент. Это буквально так. Просто и понятно, верно?

// Presentational Component that takes in 'cat' as a prop, which is // a single object from the arrayOfCats in App.js, from CatList.js
import React from 'react';
const Cat = (props) => {
   return ( 
      <div className="image">
         <img src={props.cat.image} />
      </div>
      <div className="content">
         <div className="header"> {props.cat.name} </div>
         <div> Age: {props.cat.age} </div>
      </div>
   );
}
export default Cat;

И вот оно! Простой способ сохранить ваш код чистым и организованным, ради вашего мозга, когда вы понимаете, что есть ошибка или ошибка, когда вы пытаетесь что-то отобразить. Очевидно, что вы можете добавить несколько интересных функций, передаваемых в качестве реквизита, чтобы предоставить больше функциональности отображаемым данным, например, добавить «нравится» или, в случае с кошками, «усыновить» кошку!

Кодирование меня поражает. И процесс добавления функций, передачи их в качестве свойств, которые будут вызываться на основе «щелчка» в отображаемых данных, меня поражает. Несколько месяцев назад я бы не смог сделать ничего из этого! И посмотри, где я сейчас. Дикий. Оставайтесь с нами для следующей остановки в этом сумасшедшем приключении :)