РЕАКТИВ — СТАТЬЯ — 1

Это будет первый день моего изучения React.js . Кто я ? Я парень, который начинает с react.js и хочу поделиться тем, что я узнал из этих статей. Начнем со СТАТЬИ — 1.

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

Давайте создадим наш файл index.html следующим образом.

<!DOCTYPE html>
<html>
  <head>
    <title>My App</title>
    <script src="index.js" defer></script>
  </head>
  <body>
    <div id="root">
    </div>
  </body>
</html>

// Fetch the div elements with id root from index.html
const root = document.getElementById('root');

// Create two paragraph elements and add text content to it
const childParagraphOne = document.createElement('p');
childParagraphOne.textContent = 'Hello World!';
const childParagraphTwo = document.createElement('p');
childParagraphTwo.textContent = 'Welcome to my website';

// Create a div element with id container 
const container = document.createElement('div');
container.id = 'container';

// Append both the paragraph elements as children of div element with id container
container.append(childParagraphOne , childParagraphTwo);

// Append the container as the child of div element with id root
root.append(container);

Как вы можете видеть на картинке выше, оба элемента абзаца, которые мы создали с помощью javaScript, отображаются в браузере.

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

Как вы можете видеть на картинке выше, внутри тега body у нас есть тег div с корневым идентификатором, а внутри него у нас есть еще один тег div с контейнером id, а внутри него у нас есть два тега p с текстовым содержимым.

Теперь давайте посмотрим, как мы можем выполнить вышеуказанную операцию с помощью React.js. Но что такое React.js? Мы узнаем это после завершения этой операции. Поскольку это наш день изучения react.js, мы увидим самый простой способ добавить react.js в наш существующий проект JavaScript. И этот путь лежит через CDN Links. Мы можем найти ссылки CDN для добавления react.js в наши проекты по этой ссылке . Когда мы перейдем по ссылке, мы увидим два типа ссылок CDN для добавления react.js. Один будет для файлов кода разработки, а другой — для файлов производственного кода. В чем разница ? Файлы производственного кода будут заканчиваться расширением .production.js . и будет иметь более минимизированный код по сравнению с файлами кода разработки, которые заканчиваются расширением .development.js.

Давайте добавим react.js в наш проект, используя ссылки CDN файлов кода разработки. Мы добавим теги script для ссылок в наш файл index.html следующим образом.

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
    <script src="index.js" defer></script>
</head>
<body>
    <div id="root">
    </div>
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
</body>
</html>

Как вы можете видеть на картинке выше, файл react.development.js — это просто набор функций. Точно так же react-dom.development.js также представляет собой набор функций.

Теперь, когда мы добавили react.js в наш проект. Давайте создадим и визуализируем элементы абзаца так же, как мы это делали в ванильном javaScript. Для этого мы внесем следующие изменения в файл index.js нашего проекта.

// Fetch the div element with id root from index.html
const root = document.getElementById('root');

// ReactDOM needs to know which is the root
const reactProjectRoot = ReactDOM.createRoot(root);

// Create two paragraph elements and add text content to it using React
// The first argument is name of the tag.
// The second argument is an object for adding React props ( think of them as HTML attributes ) to the tag.
// The third argument is the content of the tag.
const childParagraphOne = React.createElement('p',{},'Hello World!');
const childParagraphTwo = React.createElement('p',{},'Welcome to my website');

// Create a container div element for these paragraph elements and add the above paragraph elements as its child using React.
// { id : 'container' } is the way of adding the html attribute id with value container to created div element using React.
// The third argument is an array containing the child elements of this container element.
const container = React.createElement('div',{id : 'container'},[childParagraphOne,childParagraphTwo]);

// Render everything inside the root in browser
reactProjectRoot.render(container);

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

Как вы можете видеть на картинке выше, внутри тега body у нас снова есть тег div с корневым идентификатором, а внутри него у нас есть еще один тег div с контейнером id, а внутри него у нас есть два тега p с текстовым содержимым. Эта структура HTML — это то, что мы видели, когда делали что-то в стиле ванильного javaScript. Просто сравните файлы index.js в стиле vanilla javaScript и методе работы react.js и просмотрите комментарии. Вы увидите, что мы сделали одно и то же в обоих случаях.

Давайте подытожим то, что мы видели, React.js поставляется с двумя файлами react и react-dom. Оба файла представляют собой наборы функций. Следовательно, React.js представляет собой набор функций, предназначенных только для создания и отображения представлений, и поэтому называется библиотекой.

Но тогда что такое фреймворк? Почему Angular называют фреймворком, а не библиотекой? Ну, рамка поставляется с включенными батареями. Как и в случае с react.js, мы получаем два файла react и react-dom, которые предназначены только для создания представлений и их рендеринга в браузере. Но в Angular мы получаем файлы, которые используются для создания представлений, их рендеринга в браузере, обработки http-запросов, обработки форм и т. д. Вот почему angular — это фреймворк.

Спасибо всем. Пожалуйста, поделитесь своим мнением об исправлении ошибок в этой статье, и мы узнаем больше в следующей статье. Оставайтесь в курсе !