<MyRusakov.ru />

Программирование на JavaScript с Нуля до Гуру 2.0

Программирование на JavaScript с Нуля до Гуру 2.0

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

Дополнительно, почти к каждому уроку идут упражнения.

Помимо самого курса Вас ждёт ещё 5 бесплатных ценных Бонусов: «Библиотека jQuery», «Защита JavaScript-кода от копирования», «Решение упражнений из курса», «HTML для начинающих» и «CSS для начинающих».

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Создание приложения на React

Создание приложения на React

Библитотека React нужна для разработки SPA (Single Page Application) приложений. SPA приложение - это одностраничный сайт, на котором не происходит перезагрузка страницы, когда пользователь нажимает на ссылки или кнопки. Незаметно меняется только нужный фрагмент кода страницы. Примером SPA может служить Gmail-почта или социальные сети.

В написании скриптов на JS применяется два подхода: на чистом JavaScript или с использованием фреймворков. В чем разница? При написании программы на чистом JavaScript, принято выносить JS код в отдельный файл, оставляя в теле страницы только HTML код. Любое взаимодействие JS с элементами страницы должно происходить через селекторы, теги, классы или идентификаторы. Во фреймворках картина противоположная - HTML и JS идут вперемешку.

При разработке SPA второй подход считается более подходящим и удобным для дальнейшей поддержки кода. Вы одновременно будете видеть HTML код и навешенные на него JS события. Весь код будет поделен на отдельные компоненты, например header, footer, navigation и.тд. Можно сказать, что сайт на React разрабатывается по отдельным компонентам. Если на сайте будет реализован слайдер, значит обязательно будет компонент slider.

React работает на новой версии JavaScript - ES6, где появились классы. Но браузеры понимают ES5, поэтому приложения разрабатываются на ES6, а затем компилируются в понятную для браузеров версию ES5.

Как подключить React?

Можно подключить React вручную, указав путь до Javascript файлов на удаленном сервере.

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>

Первое приложение на React


1) Создадим блок, в котором будет работать React

<div id="content"></div>

2) Укажем, что результат работы будет выводиться в ранее созданном блоке.

Существует объект ReactDom, у которого есть метод render. Метод render принимает два параметра, первым параметре передается имя класса (компонент), а вторым параметром - ссылка на элемент, внутри которого выводится наш элемент. Заголовок Hello, world выводится в блоке с id="content".

ReactDOM.render(<App />, document.getElementById('content')

3) Создадим класс App. Имя тега должно совпадать с именем класса.

Называть класс можно любым именем и начинаться оно должно обязательно с заглавной буквы. Здесь есть статья про классы. Созданный класс наследует component от React. Это значит, что классы в React называют компонентами. Компоненты - это независимые друг от друга кирпичики, из которых и состоит наш сайт. Каждому компоненту будет соответствовать свой класс. Также компоненты можно вкладывать друг в друга. Например два компонента logo и nav могут быть вложены в компонент header. Вообщем структура сайта состоит из более мелких под компонентов, вложенных в более крупные компоненты. Каждому из которых в React будет выделен отдельный класс.

В каждом компоненте обязательно должен быть метод render, который возвращает результат работы компонента. В примере ниже, мы видим, что компонент App вернул результат - вывел на страницу содержимое тега h1 (Hello, world!). Обратите внимание, что теги h1 написаны без кавычек, что конечно выглядит непривычно. У такого смешения, когда HTML теги пишутся прямо в JavaScript коде, есть название - JSX.

<script type="text/babel">
    class App extends React.Component {
        render() {
        return <h1>Hello world!</h1>
        }
    }

    ReactDOM.render(<App />, document.getElementById('root'))
</script>

Физически произошло следующее, компонент App записался в блок div. Только что, мы создали простое приложение на React.

Заключение

Использование библиотеки React полностью оправдано при создании сложных и динамичных веб-приложений. Данная библиотека специально создавалась для разработки пользовательских интерфейсов, основанных на компонентах. Это значит, что любое приложение будет состоять из различных компонентов. Такая технология позволяет легко переиспользовать разработанные компоненты и на других проектах. React принадлежит компании Facebook, которая очень хорошо его поддерживает. А это значит, что не нужно жалеть времени на изучение этой технологии. Сейчас React находится на пике своего развития, а стоящий за его спиной такой гигант, не даст ему зачахнуть. В этом видеокурсе, вы найдете все, что нужно знать про React. После прохождения курса, сможете создавать крутые приложения на React.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.