Создание приложения на 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/[email protected]/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.
-
Создано 21.09.2020 10:09:55
-
Михаил Русаков
Комментарии (0):
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.