Изучение основ React Native
Всем привет, здесь я расскажу обо всех основах, необходимых для начала работы с React Native.
Я собираюсь разделить его на несколько частей. Первая часть будет объяснять JSX.
А другой объяснит остальные понятия. Так что следите за обновлениями.
Если вы новичок в разработке приложений React Native, вы можете прочитать руководство для начинающих. Чтобы настроить среду React Native с приложением Hello world.
Теперь здесь мы собираемся изучить основы, необходимые для React Native.
Итак, приступайте.
React Native в основном использует библиотеку React.js. А React.js — это библиотека, которую иногда называют фреймворком, который в основном используется во фронтенд-веб-разработке.
Существует 80+ бесплатных ресурсов для веб-дизайнеров и веб-разработчиков для изучения веб-разработки, а также Руководство для начинающих веб-разработчиков.
Поэтому вам нужно изучить React.js, чтобы стать экспертом в React Native.
Что есть в React.js?
JSX, компоненты, реквизиты, состояние, жизненный цикл и события.
Не напрягайтесь, если вы незнакомы с ними. Я собираюсь объяснить все здесь.
Начать работу с JSX
Во-первых, мы собираемся написать программу Hello World в React.
И вот оно,
import React from 'react';
import ReactDOM from 'react-dom';
const hello = <h1>Hello World!</h1>;
ReactDOM.render(hello, document.getElementById('root'));
Что это? Давайте объясним подробно.
Мы импортировали React и ReactDOM.
Что такое ReactDOM? ReactDOM предоставляет специальные методы DOM, такие как render(), createPortal() и т. д.
И после этого,
const hello = <h1>Hello World</h1>;
Это JSX.
JSX позволяет нам писать JavaScript и HTML вместе. Согласно w3schools, JSX означает JavaScript XML.
Поясню еще на одном примере.
import React from 'react';
import ReactDOM from 'react-dom';
const place = 'Mumbai';
const feature = <h1>Hello, {place}.</h1>;
ReactDOM.render( feature, document.getElementById('root') );
//Output: Hello, Mumbai.
Здесь мы определяем такое место, как Мумбаи, как константу.
И затем мы вызываем его внутри JSX. Затем мы визуализируем его с помощью ReactDOM. С помощью JSX мы можем обращаться к переменным, выражениям с помощью фигурных скобок.
Привет, Нитин! А как насчет document.getElementById(‘root’). Вы не объяснили.
Да мой друг. Здесь мы обращаемся к элементу по идентификатору, известному как root.
Если вы настроили среду React.js, перейдите в общую папку => index.html
И внутри этого вы можете видеть
<div id="root"></div>
Таким образом, все, что вы кодируете в своем приложении React, будет отображаться в один div с корневым идентификатором.
Вот и все.
Нашли эту статью полезной? Подпишитесь на меня (Нитин Шарма) на Medium и ознакомьтесь с моими самыми популярными статьями ниже! Пожалуйста 👏 поделитесь этой статьей!
Если вам нравится моя работа и вы хотите ее поддержать, вы можете купить мне чашечку кофе!
Вот 2-я часть.
3-я часть.
А вот и 4-я часть.
Спасибо :)
