Обзор

Итак, после настройки рабочей среды и создания простой тестовой демонстрации с использованием реакции, чтобы убедиться, что все работает нормально, теперь мы собираемся более подробно рассмотреть компоненты React, как они работают и почему они очень важны для создания функционала. пользовательские интерфейсы.

Кроме того, мы обсудим лучший способ рендеринга нескольких компонентов одновременно и почему это очень важно для макета нашего приложения.

Реагировать Компоненты

Компоненты - это объекты (класс ES6), где он расширяется из базового класса компонентов, ему нужен конструктор, который принимает свойства (атрибуты), и метод рендеринга, который возвращает блок элементов Html, возвращаемые элементы могут иметь только один корневой узел и дочерние элементы этот узел.

Также под элементами вы можете использовать классы, имена идентификаторов и прослушиватели встроенных событий.

Вы также можете добавить пользовательские методы в класс, чтобы использовать их в качестве слушателей событий или членов класса.

class Header extends React.Component {
  //Initialize Component passing in the Properties (Attributes)
  constructor(props) {
    super(props);
  }
  //Gets Called before Just Right Upon Component Rendering 
  componentWillMount() {
    console.log("Will be Drawn!");
  }
  //Render Method 
  render() {
    return (

Our Header

This is a Small Text

); } }

If you have Noticed that we used the ComponentWillMount Method and this gets called upon the rendering Stage of the current component so it would be very efficient for doing some initialization or Adding event Listeners before the actual rendering process of the component into the DOM.

Now if you tried to open the HTML File in the browser you should get Everything gets rendered for us using React, and yeah this is how React components works and the main idea behind it.

Rendering Multiple Components

As you may have noticed when we try to render a component to the DOM using the ReactDOM Render method we can pass in one single component as the rendering target and Root Container but let’s say that we have a multiple Components that we need to render to the DOM, it actually pretty simple all you have to do is call the Secondary component under the component normally as an Html elements and react gonna do the rest of the job for us from here

class SecondComp extends React.Compoent {
   constructor(props) {
      super(props);
   }

   render() {

   }
}
//We can render both of them just by Wrapping one under the Other 
class MainApp extends React.Compoent {
   constructor(props) {
      super(props);
   }

   render() {
     return (

You can use HTML Elements

); } }

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

Что дальше

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