Базовый React с JavaScript

Начните писать с React

Вы можете создать элемент напрямую, используя DOM API. Для этого вам нужно получить корневой элемент и установить внутренний HTML, вот и все. См. пример ниже.

document.getElementById('root').innerHTML = `
  <div>
    Hello World!
  </div>
`;

Или вы можете использовать API React. Мы собираемся следовать этой системе в этой статье.

Для этого вам нужно добавить React DOM Renderer. Внутри этого вы должны добавить два параметра. Один из них — элемент React Create, а другой — корневой элемент HTML. Следуйте приведенному ниже коду.

ReactDOM.render(
  React.createElement(),
  document.getElementById(),
);

Внутри React Create Element вы должны вставить три параметра. Первый параметр — это имя тега HTML или имя элемента. Второй параметр — это параметр стиля CSS. И третий параметр — основной параметр контента.

ReactDOM.render(
  React.createElement(
    'tagname',
    'style',
    'Insert, what do you want to see in the output!',
  ),
  document.getElementById(),
);

После добавления всех параметров в методе «Создать элемент» вам необходимо добавить конкретное имя идентификатора элемента, например root. Давайте посмотрим на пример ниже.

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
  ),
  document.getElementById('root'),
);

Хорошо выглядит. Давайте попробуем это. Смотрите результат в CodePen.

Здесь есть альтернативный метод. Вы можете напрямую вставить HTML вместо React.createElement. Давайте посмотрим на пример ниже. Если вам интересно, то вы можете увидеть вывод в CodePan.

ReactDOM.render(
  <div>Hello World!</div>,
  document.getElementById('root'),
);

Метод React DOM Renderer — это основной метод API в приложении React.

Давайте вкладывать элементы React!

Давайте вставим вложенный элемент внутрь React Create Element. Внутри 1-го элемента Create вы можете вставить еще один для вложения. Не понял? Посмотрим…

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
    React.createElement(
      'pre',
      null,
      new Date().toLocaleTimeString(),
    ),
  ),
  document.getElementById('root'),
);

Второй элемент Create будет добавлять статическое время. Вы можете запустить это, обновляя каждую секунду. Для этого необходимо добавить setInterval API веб-таймера. Прежде чем сделать это, вам нужно создать функцию. После этого вы должны установить интервальный таймер на функцию. Давайте посмотрим на пример ниже. Или, если вам интересно, вы можете увидеть вывод в CodePan.

const time = () => {
  ReactDOM.render(
    React.createElement(
      'div',
      null,
      'Hello World!',
      React.createElement(
        'pre',
        null,
        new Date().toLocaleTimeString(),
      ),
    ),
    document.getElementById('root'),
  );
}
setInterval(time, 1000);

Вау! Вы создали часы ⏰ с помощью React.js! Ура!!!

JSX

const element = <h1>Hello, world!</h1>;

Это может звучать смешно. Но у React действительно есть синтаксис тега JSX, который не является строкой или тегом HTML. JSX выглядит как HTML, но браузер его не понимает. Если вы пишете JSX внутри документа HTML, это может показать некоторую ошибку. Посмотрите на пример ниже.

Вы можете заметить, что в некоторых случаях HTML5 не требует закрывающего тега. (например, ‹img›, ‹br›, ‹hr› и т. д.) Но JSX должен иметь закрывающий тег. (например, ‹img /›, ‹br /›, ‹hr /› и т. д.) В противном случае вы можете столкнуться с некоторыми ошибками.

Создание компонентов с использованием классов

Вы можете создавать любые компоненты React, используя синтаксис класса JavaScript. Для этого выполните простые шаги, которые приведены ниже.

Во-первых, вам нужно определить класс, который расширяет React.Component.

class Button extends React.Component {}

Вы также определили как минимум метод экземпляра с именем render внутри определенного вами класса. Он вернет элемент, который представляет вывод.

class Header extends React.Component {
  // The 'render' method
  render() {
    return (
      <h1>I am learning React!</h1>
    );
  }
}

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

ReactDOM.render(
  <Header />,
  document.getElementById('root'),
);

Давайте посмотрим полный и доработанный пример кода в CodePen.

Создание компонентов с помощью функций

Вы также можете создавать функциональные компоненты с помощью React. Вы можете создавать как нормальные, так и стрелочные функциональные компоненты. Это полностью зависит от вас.

ES6 / ES2015 или более поздние версии поддерживаются следующим образом:

const Header = () => {
  return (
    <h1>I am learning React!</h1>
  );
}
ReactDOM.render(
  <Header />,
  document.getElementById('root'),
);

Для старых браузеров:

function Header() {
  return (
    <h1>I am learning React!</h1>
  );
}
ReactDOM.render(
  <Header />,
  document.getElementById('root'),
);

React — это не фреймворк

Кто-то думает, что React — это фреймворк, что совершенно неверно. React — это всего лишь небольшая библиотека на JavaScript. С другой стороны, Angular — это фреймворк, в котором многие решения уже приняты за пользователей, тогда как разработчики React должны принимать свои решения.

Вам больше не нужен Flux

Если вы учитесь React, или ваше приложение небольшое, и вам не нужно глобальное состояние, или у вас нет проблем с отслеживанием изменений состояния в вашем приложении, то не используйте Redux или какой-либо другой Flux реализации, скорее это усложнит ваше приложение.

Гит

Git необходим каждому разработчику для хранения проектов в решениях. Например, GitHub, Bitbucket и GitLab. Вот еще несколько навыков, которые должны быть частью вашей повседневной жизни, в том числе:

Отслеживание изменений с добавлением, фиксацией, отправкой и извлечением
Стратегии ветвления и слияния
Обработка конфликтов слияния

Узел + нпм

Node.js может стать неожиданностью для многих. Зачем вам нужно знать, как работать с Node, чтобы стать клиентским разработчиком React? Хотя вы можете добавить React в любой HTML-файл, существует множество других пакетов, которые позволят вам расширить библиотеку React.
Что ж, разработчики React должны иметь четкое представление о реестре npm. Это место, где разработчики программного обеспечения могут получить программное обеспечение, которое поможет им в создании программного обеспечения. Звучит смешно, но на самом деле npm — это облачное хранилище для пакетов, которые мы называем зависимостями.

Требуется хорошее знание JS

Первое, что вам нужно знать перед изучением React, — это JavaScript.
Действительно, самое замечательное в React — это то, что это всего лишь библиотека JavaScript. Таким образом, чем больше вы знаете о JavaScript, тем лучше вы будете писать приложения с помощью React.
Вы должны освоить и освоить основы JavaScript. Вы будете намного продуктивнее с React.

Базовый React с JavaScript — Часть 1