Вступление
Что такое React?
React-популярная библиотека JavaScript Frontend, открытые Facebook. Это позволяет вам создавать и повторно использовать элементы пользовательского интерфейса. React был рожден из -за необходимости решить проблему того, что Dom Brower Dom был медленным. Он знаменит и в основном используется по множеству причин.
Зачем использовать React?
Многоразовые компоненты – React основан на компонентах, что означает, что компоненты являются строительными блоками реагирования пользовательского интерфейса. Компонент описывает, как выглядит меньший раздел пользовательского интерфейса и можно многоразовать. Сложные применения могут быть построены путем гнездования компонентов в других компонентах.
Спа – Еще одна важная вещь в React – это то, что это одно страница приложения (SPA). Это означает, что React не получает совершенно новую веб-страницу, когда пользователю нужно отображать другое представление, он просто переписывает текущую веб-страницу с любыми новыми данными, извлеченными с сервера бэкэнд.
Быстрый рендеринг с виртуальным DOM – Обновление DOM обычно является узким местом, когда дело доходит до веб -производительности. React использует виртуальный DOM; Дом хранится в памяти. Любые изменения представления сначала отражаются на виртуальном DOM, тогда сравнивается предыдущее и текущее состояние виртуального DOM, и к DOM применяются только необходимые изменения. Это главная причина, по которой React’s Высокая производительность Анкет
Основные цели этой статьи –
- Поймите, как реагирует html в UI.
- Поймите, как использовать JSX.
- Понять компоненты реагирования, состояния, реквизиты и методы жизненного цикла.
- Создайте приложение React (видео) с нуля.
Начиная –
Во -первых, перейдите к терминалу и тип –
npx create-react-app videos
Эта инструкция создает шаблон приложения React с именем видео для запуска вашего приложения на Localhost: 3000 в вашем браузере, в вашем типе терминала-
cd videos npm start
Вот как это будет выглядеть в браузере-
Уборка –
Откройте папку SRC и удалите следующие файлы – app.test.js, logo.svg, setuptests.js Удалить все в файле app.js и index.js.
Теперь, когда мы настроили проект и очистили ненужные файлы, мы можем приступить к пониманию React.
В файле index.js, место после контента-
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; ReactDOM.render(, document.querySelector('#root'));
Линии 1 и 2: импорт библиотеки React и React-Dom. Модуль React используется для записи HTML-кода в JavaScript (JSX), а React-Dom используется для выполнения функции рендеринга, которая отобразит содержимое на странице. Строка 3: импорт компонента приложения. Строка 4: Рендеринг приложение в контейнере, который имеет идентификатор корня.
Метод Reactdom.Render – Этот метод делает подключение к компоненту приложения к DOM браузера. Первый параметр, который он требует, – это компонент React для рендеринга, а второй магический параметр – это то, как мы указываем, где в файле public/index.html нам нужно подключить компонент. Вы найдете Элемент с идентификатором, root в public/index.html. Это Элемент – это узел контейнера React. Когда функция render () сначала вызывается, весь узел контейнера заменяется компонентом приложения.
Теперь мы будем писать наш компонент приложения (перейдите в файл app.js), но до этого давайте поймем основы –
JSX – React может поддерживать операторы, используя JSX (JavaScript XML), который позволяет использовать HTML -подобные операторы для создания элементов пользовательского интерфейса (компонентов) в JavaScript. Вы найдете записи JSX намного проще в использовании, так как она очень похожа на то, как мы пишем HTML.
Компоненты – Как уже говорилось, React основан на компонентах, компоненты – это строительные блоки в React, а группа элементов составляют компонент. Обычно каждый будет компонент, чтобы определить, как выглядит панель навигации, вкладка контента выглядит, форма входа выглядит и т. Д. Это также помогает объединить как визуальные (элементы), так и логические (функции) аспекты секции пользовательского интерфейса.
Разбивая наш проект на компоненты –
В приложении будет 4 компонента.
- SearchBar (сверху)
- VideoDetail (слева)
- Видеолист (справа)
- VideoItem (элементы видеоолига)
Функциональные компоненты – Самый простой способ определить компонент – написать функцию JavaScript. в app.js –
import React from 'react';
function App(props) {
return ();
}
Эта функция является допустимым компонентом React, поскольку она принимает один аргумент объекта «реквизит» с данными и возвращает элементы, которые будут отображаться, когда компонент отображается. Мы называем такие компоненты «функциональными компонентами», потому что они являются буквально функциями JavaScript.
Компоненты на основе класса – При создании компонента React имя компонента должно начинаться с буквы верхнего регистра. Компонент должен включать реагирование расширения. Заявление компонента, это утверждение создает наследование для реагирования. Компонент и дает вашему компоненту доступ к React. Функции компонента. Компонент React должен, по крайней мере, иметь функцию render (). Функция render () возвращает элементы, которые будут отображаться, когда компонент отображается.
Чтобы представить компонент «компонент», используйте
Для нашего компонента приложения (app.js) это эквивалентно вышеуказанному функциональному компоненту.
import React from 'react';
class App extends React.Component {
render() {
return ();
}
}
Управление Государство В классе компоненты – Данные, связанные с конкретным компонентом, могут храниться в качестве «состояния». Состояние компонента может быть изменено только из этого конкретного компонента. Все переменные состояния попадают внутрь переменной класса, штат , как пары ключей. Реактируйте повторные ресурсы пользовательского интерфейса всякий раз, когда изменится состояние.
Изменение состояния-
- Не изменяйте состояние напрямую, так как это не будет повторно рендерировать компонент.
- Вместо этого используйте
setState ()Анкет Когда называется SetState (), React знает, что состояние изменилось, и снова вызывает метод render (), чтобы узнать, что должно быть на экране. Например,
state = {selectedVideo: null}
//Wrong
this.state.selectedVideo = 'Something'
//Correct
this.setState({ selectedVideo: 'Something' })
В рамках записей JSX мы также можем подключать регулярные выражения JavaScript, обернув их в брекеты (“{}”). Например –
{ 2 + 5 * 8 }
Current Selected Video is : {this.state.selectedVideo}
Обратите внимание, что в первые дни состояние может использоваться только в компонентах класса, а не в функциональных компонентах. Вот почему функциональные компоненты также были известны как компоненты без сохранения состояния. Однако после введения React Hooks, состояние теперь можно использовать как в классовых, так и в функциональных компонентах. В этом проекте мы не используем React Hooks, поэтому мы будем использовать компоненты класса, если она требует переменной состояния, в противном случае мы используем простой функциональный компонент.
Реквизит Унаследовать свойства – Предположим, что пользователь выбрал какое -то видео, которое мы храним в этом. Выбранная переменная состояния. Чтобы отобразить это видео в нашем компоненте VideoDetail, мы должны передать информацию выбранного видео в компонент VideoDetail. Реквизиты или свойства позволяют нам передавать данные из родительских компонентов в детские компоненты. Мы можем передать значение «реквизита» отдельному компоненту, передавая его аналогичным тому, как мы делаем для атрибута HTML.
видео это определенная опора здесь и содержит данные SelectedVideo. Тогда мы можем передавать данные с реквизитами, как мы даем аргумент в пользу функции:
const VideoDetail = (props) => {
// code
}
И, наконец, мы используем DOT обозначения для доступа к данным опоры и используем их как «props.video»
В компонентах класса мы можем получить доступ к свойствам как this.props.video
Обратите внимание, что элементы JSX являются просто объектами JavaScript. Это означает, что реквизит и дети элемента JSX могут быть чем угодно, что вы можете разместить в переменной JavaScript – это могут быть строки, переменные состояния, другие компоненты или даже функции. Вы увидите в проекте, как мы можем передать разные вещи в качестве реквизита компонентам.
Методы жизненного цикла – Жизненный цикл экземпляра компонента React содержит три этапа. Монтаж – когда он создается и вставляется в DOM. Обновление – когда оно обновляется или повторно разрешено из -за изменения значений состояния. Uncinting – когда он удаляется из DOM. Каждая из этих фаз жизненного цикла включает в себя выполнение набора методов жизненного цикла.
1. ComponentDidMount () – называется сразу после установки компонента и может использоваться для выполнения инициализации, которые потребуют на месте узлов DOM. Здесь мы можем выполнять такие задачи, как получение данных из API.
2. ComponentDidupDate () – Компонент будет обновляться/повторно разрешать всякий раз, когда изменяется какая-либо из его реквизита или значений состояния. ComponentDidupDate () вызывается сразу после обновления компонента. Его можно использовать для реализации любой логики для выполнения после повторного использования.
Есть и другие методы жизненного цикла, которые я не буду объяснять в этой статье. Мы будем использовать только ComponentDidMount () в этом проекте.
в порядке!!
Теперь, когда мы убрали это с дороги, наконец -то пришло время промокнуть ноги!
Важно – Мы будем использовать семантический пользовательский интерфейс для компонентов стиля. (Semantic-это структура разработки, которая помогает создать красивые, отзывчивые макеты с использованием HTML.) Для этого добавьте эту линию внутрь головы в public/index.html –
< Ссылка Href />
Структура папки проекта –
Кроме того, обратите внимание, что цель этой статьи – в первую очередь сосредоточиться на концепциях React. Поэтому, пожалуйста, не стесняйтесь игнорировать нерелевантные темы.
index.js -`
import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; ReactDOM.render(, document.querySelector('#root'));
apis/youtube.js
import axios from 'axios';
// create your youtube api key and place it here
const KEY = YOUR_API_KEY;
// setting up base instance in which you can define a URL and
// any other configuration elements.
// and exporting as default.
export default axios.create({
baseURL: 'https://www.googleapis.com/youtube/v3',
params: {
part: 'snippet',
maxResults: 5,
key: KEY
}
});
// we can import this instance from other files and no longer need to write
// whole URL everytime we call API
Videoitem.js
import './VideoItem.css';
import React from 'react';
// takes props video object and onVideoSelect function
// we call onVideoSelect when user clicks the video
// What does a VideoItem Component contains?
// yepp, Video Thumbnail and Video title
const VideoItem = ({ video, onVideoSelect }) => {
return (
onVideoSelect(video)} className="item video-item">
{video.snippet.title}
);
}
export default VideoItem;
Videoitem.css
.video-item{
display: flex !important;
align-items: center !important;
cursor: pointer;
}
.video-item.item img{
max-width: 180px;
}
Videolist.js
import React from 'react';
import VideoItem from './VideoItem';
// takes videos (video array) and onVideoSelect function
// What does a VideoList contain?
// yepp, List of Video (specifically VideoItems)
// So we iterate over videos array and make a VideoItem for each
// Note We are passing video and OnVideoSelect as props to VideoItem
const VideoList = ({ videos, onVideoSelect }) => {
const renderedList = videos.map((video) => {
return VideoDetail.js
import React from 'react';
// videoDetail takes the selectedVideo and displays its info.
const VideoDetail = ({ video }) => {
if (!video) {
return Loading...;
}
//This url is for fetching selectedVideo
const videoSrc = `https://www.youtube.com/embed/${video.id.videoId}`;
return (
{video.snippet.title}
{video.snippet.description}
);
}
export default VideoDetail;
Searchbar.js
import React from 'react';
// state variable "term" stores what user types in searchBar
class SearchBar extends React.Component {
state = { term: '' };
// this sets the "term" to what user types in. (in sync)
onInputChange = (e) => {
this.setState({ term: e.target.value });
}
// it is called when user submits the "term"
// which in turn calls the onTermSubmit() function passed as its prop
onSearchBarSubmit = (e) => {
e.preventDefault();
this.props.onTermSubmit(this.state.term);
}
render() {
return (
);
}
}
export default SearchBar;
App.js
import React from 'react';
import SearchBar from './SearchBar';
import VideoList from './VideoList';
import youtube from '../apis/youtube';
import VideoDetail from './VideoDetail';
class App extends React.Component {
state = { videos: [], selectedVideo: null };
// videos - array of videos based on term that user passed in searchbar (initally empty)
// selectedVideo - video selected to display on left
// this lifecycle method is called when App component gets mounted
componentDidMount() {
this.onTermSubmit('dev.to');
}
// Note that here 'dev.to' is initial term for which videos will be searched
// It is random
// This function is the one that accepts the term and fetches videos
// and set "videos" state variable to fetched videos and
// selectedVideo to the first video of videos
onTermSubmit = async (term) => {
const response = await youtube.get('/search', {
params: {
q: term
}
});
this.setState({ videos: response.data.items, selectedVideo: response.data.items[0] });
}
onVideoSelect = (video) => {
this.setState({ selectedVideo: video });
};
render() {
return (
Вывод
В этой статье мы выучили основные концепции Reactjs и как эти концепции применяются в реальном проекте. Теперь, когда у вас есть базовое понимание React, вы можете перейти к более продвинутым темам, таким как крючки, Redux и т. Д.
Спасибо за чтение
Это мой первый пост на Dev. Надеюсь, вам это понравится и не было ошеломляющим. Если вам понравилась статья, пожалуйста, ❤. Счастливого кодирования 😊.
Оригинал: “https://dev.to/jaskaran/fundamentals-of-react-build-a-video-app-24j8”