Блог ReactJs (часть 1)

Сегодня вы узнаете, как создать простое приложение с помощью ReatcJs!

Первые три вопроса, которые возникают у каждого новичка: Что такое ReactJs, почему ReactJs и Где он используется в Big Компании????

что такое ReactJ?

ReactJS — это библиотека JavaScript, используемая для создания многократно используемых компонентов пользовательского интерфейса. Он быстрый, простой в освоении и интересный в работе.

История ????

React создан Джорданом Уоке, инженером Facebook. Он довольно новый, с момента его первого выпуска прошло всего 5 лет (первоначальный выпуск в 2013 году)

React — это не фреймворк, это волшебное решение для Facebook, позволяющее обрабатывать миллиарды сообщений, миллионы лайков и миллионы комментариев без перезагрузки веб-страницы.

Крупные компании используют Reactjs

Итак, Reactjs используется не только Facebook! он используется несколькими крупными компаниями, такими как

Netflix — крупнейший платный сервис потокового видео.
Yahoo! — почтовый клиент в React
Instagram: приложение для социальных сетей, предназначенное для обмена фотографиями и видео.

и другие бедные компании, такие как "Microsoft"

Да, чувак, это правда, Microsoft использовала Reactjs во многих крупных проектах.

например: веб-версия Skype, Microsoft office365, мобильное приложение Skype и другие…

Почему React?

Итак, мы узнали, что такое Reactjs и какие крупные компании используют это волшебное решение.

Производительность: использование React приведет к быстрому пользовательскому интерфейсу без особой работы по оптимизации производительности.
Простота:компонент, основанный на Reactjs, с простым кодом JavaScript.
Вся мощь HTML, CSS и Javascript внутри компонента:
Этому легко научиться: любой, у кого есть опыт работы с HTML, CSS и JavaScript, может изучить Reactjs (предназначен для разработчиков, дизайнеров и инженеров Microsoft: предназначен для разработчиков, дизайнеров и инженеров Microsoft 😗
увеличение скорости разработки:ReactJS позволяет нам создавать многократно используемые компоненты пользовательского интерфейса, которые можно использовать на многих веб-страницах.
Тестируемость:приложения ReactJS очень легко тестироватьОсновные концепции ReactjsОсновные концепции Reactjs

Основные концепции ReactJ!

Виртуальный DOM:Reactjs использует концепцию виртуального DOM, которая помогает повысить производительность,

HTML DOM — это стандарт получения, изменения, добавления или удаления элементов HTML.

HTML DOM предоставляет интерфейс (API) для просмотра и изменения узлов. Он содержит такие методы, как getElementById или removeChild.

<html>
 <body>

 <p id="demo"></p>

 <script>
  document.getElementById("demo").innerHTML = "Hello World!";
 </script>

 </body>
 </html>

Проблема с ДОМ!

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

Таким образом, решение этой проблемы — «виртуальный DOM».

Виртуальный дом

— Virtual DOM — это абстракция HTML DOM.

— Виртуальный объект DOM имеет те же свойства, что и реальный объект DOM.

— React поддерживает текущий DOM, и если необходимо отобразить некоторые изменения, то только эти изменения устанавливаются в исходном DOM.

Управление DOM происходит медленно. Управление виртуальным DOM намного быстрее,

Разница между виртуальным DOM и обычным DOM?

Компонент :

«Все является компонентом»

Компоненты — это сердце и душа React.

Что такое Компонент?

— Автономные многоразовые строительные блоки веб-приложения.

— компонент — это класс или функция JavaScript

— Компоненты позволяют разделить пользовательский интерфейс на независимые повторно используемые части.

Итак, мой вам совет, прежде чем вы начнете программировать, вы должны разделить свой пользовательский интерфейс на компоненты, компоненты многократного использования!

Как выглядит компонент?

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hello:<p>hello world. <a href="http://www.react-cn.com/">react</a></p> };
  }
  render() {
    return (
      <div>
        hello Tops !
      </div>
    )
  }

JSX:

Компоненты React написаны на JSX, синтаксисе расширения JavaScript, позволяющем легко цитировать HTML
— JSX — это шаг препроцессора, добавляющий синтаксис XML в JavaScript. Вы определенно можете использовать React без JSX, но JSX делает React намного более элегантным.

— С помощью JSX можно написать следующий код JSX/JavaScript:

var nav = (
‹ul id="nav"›
‹li›‹a href="#"›Home‹/a›‹/li›
‹li›‹a href =”#”›О нас‹/a›‹/li›
‹li›‹a href=”#”›Клиенты‹/a›‹/li›
‹li›‹a href=" #”›Контакты‹/a›‹/li›
‹/ul›
);

И Бабель превратит его в это: 😙

ar nav = React.createElement(
   "ul",
   { id: "nav" },
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Home"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "About"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Clients"
      )
   ),
   React.createElement(
      "li",
      null,
      React.createElement(
         "a",
         { href: "#" },
         "Contact Us"
      )
   )
);

«Babel — это компилятор JavaScript»

Состояние && Реквизит:

— React управляет потоком данных в компонентах с состоянием и пропсами

— Данные в состояниях и пропсах используются для рендеринга Компонента с динамическими данными.

# Понимание реквизитов ReactJS:

В ReactJS реквизиты эквивалентны параметрам чистой функции javascript.
В ReactJS каждый компонент рассматривается как чистая функция javascript.
В ReactJS мы используем реквизиты для отправки данных компонентам.
Одной из наиболее важных особенностей свойств является то, что они могут быть переданы родительским компонентом своим дочерним компонентам.

Понимание состояния ReactJS:

— State похоже на хранилище данных для компонента ReactJS. В основном он используется для обновления компонента, когда пользователь выполняет какое-либо действие, например clicking button, typing some text, pressing some key и т. д.

— состояние строго принадлежит одному компоненту.

class Counter extends Component{
  
  constructor(props){
    super(props);
    this.state = {counter: 0}
  }render(){
    return(
      <p>{this.state.counter}</p>
  )
}

И может быть изменен позже с помощью встроенной функции setState().

class Counter extends Component{
  
  constructor(props){
    super(props);
    this.state = {counter: 0}
    this.increment = this.increment.bind(this);
  }
  increment(){
    this.setState({counter: this.state.counter + 1})
  }render(){
    return(
      <button onClick={this.increment}>Like</button>
      <p>{this.state.counter}</p>
  )
}

Props используются для передачи данных от родителя к дочернему элементу или самим компонентом. Они неизменны и поэтому не будут изменены.
Состояние используется для изменяемыхданных или данных, которые будут изменяться. Это особенно полезно для пользовательского ввода

Экосистема Reactjs

Помимо Reactjs, есть и другие классные инструменты

React-router: стандартная библиотека маршрутизации для React.
React-Native: позволяет создавать мобильные приложения, используя только JavaScript. Он использует тот же дизайн, что и React, что позволяет создавать богатый мобильный пользовательский интерфейс из декларативных компонентов.
React-VR: создавайте захватывающие впечатления от просмотра в формате 360 и виртуальной реальности с помощью React.
create-react-app: инструмент, созданный разработчиками Facebook для помощи в создании приложений React. Это избавит вас от трудоемкой настройки и настройки

Вывод :

В этой части я попытался объяснить вам, что такое Reactjs, основные основные концепции, такие как Virtual DOM, JSX, State && props,

в Часть 2 мы попробуем начать программировать