Что такое маршрутизация в react

Маршрутизация

В React имеется своя система маршрутизации, которая позволяет сопоставлять запросы к приложению с определенными компонентами. Ключевым звеном в работе маршрутизации является модуль react-router, который содержит основной функционал по работе с маршрутизацией. Однако если мы собираемся работать в браузере, то нам также надо использовать модуль react-router-dom, а также history

Итак, определим в проекте следующий файл index.html :

Аналогичный пример с использованием классов-компонентов:

Прежде всего для работы с маршрутами необходимо добавить ссылки на модули react-router-dom, react-router и history:

В системе маршрутизации каждый маршрут сопоставляется с определенным компонентом, поэтому для примера я определил три однотипных компонента: Main, About и NotFound.

В начале для работы с маршрутами также получаем ряд объектов, которые потребуются для определения маршрутов:

const Router = ReactRouterDOM.BrowserRouter; const Route = ReactRouterDOM.Route; const Routes = ReactRouterDOM.Routes;

Здесь определены три объекта из модуля react-router-dom.

Router определяет набор маршрутов и, когда к приложению, приходит запрос, то Router выполняет сопоставление запроса с маршрутами. И если какой-то маршрут совпадает с URL запроса, то этот маршрут выбирается для обработки запроса.

И также для выбора маршрута определен объект Routes . Он содержит набор маршрутов и позволяет выбрать первый попавшийся маршрут и его использовать для обработки.

Каждый маршрут представляет объект Route . Он имеет ряд атрибутов. В частности, здесь для маршрута устанавливаются два атрибута:

• path : шаблон адреса, с которым будет сопоставляться запрошенный адрес URL
• element — тот компонент, который отвечает за обработку запроса по этому маршруту

Например, первый маршрут выступает в качестве корневого. Он сопоставляется с адресом «/» и обрабатывается компонентом Main:

Второй маршрут будет сопоставляться с адресом «/about», а обрабатываться он будет компонентом About.

Особо следует выделить третий маршрут:

Путь в виде звездочки — «*» указывает, что этот маршрут будет сопоставляться со всеми адресами URL, которые не соответствуют предыдущим маршрутам. И он будет обрабатываться компонентом NotFound. Таким образом мы можем задать обработку при обращении к несуществующим ресурсам в приложении.

При работе с маршрутами следует учитывать, что мы не сможем просто кинуть страницу index.html в браузер, и у нас все заработает, как в прошлых статьях. Чтобы система маршрутизации заработала, нам надо разместить файл index.html на веб-сервере. В качестве веб-сервера можно использовать любой понравивший веб-сервер (Apache, IIS, Ngnix и т.д.) или обращаться к данной html-странице в рамках веб-приложения. В данном же случае я буду использовать Node.js как самый демократичный и распространенный вариант.

Итак, напишем небольшое приложение Node.js для запуска html-страницы index.html. Для этого добавим в тут же папку, где находится файл index.html , новый файл app.js со следующим кодом:

const http = require("http"); const fs = require("fs"); http.createServer(function(request, response)< fs.readFile("index.html", function(error, data)< response.end(data); >); >).listen(3000, function()< console.log("Server started at 3000"); >);

В начале файла подключаются модули http (для запуска веб-сервера и обработки входящих запросов) и fs (для считывания файла index.html из файловой системы).

Далее создаем собственно веб-сервер с помощью функции http.createServer() . В качестве параметра она принимает функцию, которая будет запускаться для обработки каждого приходящего на сервер запроса. И эта функция имеет два параметра: request — объект, который хранит все данные запроса, и response — объект, который позволяет определить нам ответ на запрос.

В данном случае у нас предельно простая ситуация — нам надо просто отправить статический файл index.html . Для этого с помощью функции fs.readFile() считываем из файловой системы запрошенный файл и с помощью метода response.end() отправляем считанный данные пользователю.

И в конце функция listen() запускает созданный веб-сервер на 3000-м порту, и после этого мы сможем обращаться к приложению по адресу «http://localhost:3000».

Теперь запустим приложение. Для этого откроем командную строку/терминал и перейдем с помощью команды cd к папке проекта. Затем запустим приложение с помощью команды

node app

После запуска сервера обратимся в браузере по адресу http://localhost:3000/ , и по умолчанию сработает маршрут «/», который обрабатывается компонентом Main:

Обратимся теперь по адресу http://localhost:3000/about :

Этот запрос будет обрабатываться компонентом About, так как он отвечает за обработку маршрута, который совпадает с запросом «/about».

Запросы по всем другим адресам, которые не соответствуют предыдущим маршрутам, будут обрабатываться компонентом NotFound.

С помощью атрибута element объекта Route также можно без применения классов динамически определить содержимое компонента, который будет обрабатывать маршрут:

  > /> About> /> Contacts)> /> > />  

Сопоставление запроса с маршрутом

При определении маршрутов следует учитывать, что действует точное сопоставление с шаблоном, который указан в свойстве path элемента Route. Например, возьмем второй маршрут:

About> />

Данный маршрут соответствует запросам:

• http://localhost:3000/about
• http://localhost:3000/about/

React — навигация и маршрутизация

Чтобы начать React Routing, нам нужно установить React Router, выполнив эту команду в окне терминала:

npm install --save react-router-dom 

После завершения установки изменим файл App.js для поддержки маршрутизации React:

import React, < Component >from 'react'; import './App.css'; import Layout from '../components/Layout/Layout'; import Home from '../components/Home/Home'; import < BrowserRouter, Switch, Route >from 'react-router-dom'; class App extends Component < render() < return (    />   ); > > export default App; 

Чтобы маршрутизация работала, центральный компонент нашего приложения должен находиться внутри компонента BrowserRouter . Наш центральный компонент — это компонент Layout , и мы упаковываем его в компонент BroswerRouter . Вы можете сделать это другим способом внутри файла index.js , заключив компонент в функцию ReactDOM.render() . В любом случае, вы получите тот же результат.

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

Наконец, компонент Route — это тот компонент, который будет перенаправлять пользователя с одного компонента на другой. На данный момент у нас есть только компонент Home , и он будет обслуживаться по пути «/».

Если мы перейдем к localhost:3000 , мы увидим тот же результат, что и раньше, но с той разницей, что для предоставления наших компонентов используется маршрутизация.

Меню навигации

Теперь, когда маршрутизация настроена, давайте создадим меню навигации.

Внутри папки компонентов создайте новую папку и назовите ее «Навигация». Внутри создайте два файла : Navigation.js и Navigation.css :

Мы собираемся использовать элемент навигации Bootstrap для создания нашей собственной навигации. Перед созданием компонента давайте установим еще одну библиотеку, в которой React должен объединить навигацию Bootstrap с навигацией React-Router:

npm install --save react-router-bootstrap

Теперь изменим файл Navigation.js :

import React from 'react'; import './Navigation.css'; import < Col, Navbar, Nav, NavItem >from 'react-bootstrap'; import < NavLink >from 'react-router-dom'; import < LinkContainer >from 'react-router-bootstrap'; const navigation = (props) => < return ( >    exact >Account-Owner        ) > export default navigation; 

Описание кода меню навигации

Как вы могли заметить из оператора импорта, компоненты Navbar , Nav и NavItem являются компонентами Bootstrap, которые существуют, чтобы помочь нам создать визуальную часть нашего компонента навигации. Но для работы маршрутизации нам нужно использовать компонент NavLink , который является компонентом react-router-dom . С помощью компонента NavLink мы можем переходить по точному пути, и, кроме того, он реализует стили для активных ссылок внутри меню навигации.

Теперь нам нужно обратить внимание на компонент NavItem . Это компонент Bootstrap для создания единого элемента навигации. И, как мы уже знаем, для работы маршрутизации нам нужно использовать компонент NavLink , а не NavItem . Замена NavItem на компонент NavLink не поможет, потому что визуальная часть навигации будет искажена. Таким образом, решение состоит в том, чтобы использовать компонент LinkContainer из библиотеки react-router-bootstrap , которую мы уже установили. Этот компонент полностью имитирует компонент NavLink, что позволяет нам без проблем использовать эту навигацию.

В качестве продолжения нам нужно сначала изменить файл Navigation.css :

div a.active, ul li.active

И чтобы включить этот компонент навигации в компонент Layout :

import React from 'react'; import < Grid, Row >from 'react-bootstrap'; import Navigation from '../Navigation/Navigation'; const layout = (props) => < return (    ) > export default layout; 

В результате мы можем увидеть наше меню навигации:

​​Создание компонента «Не найдено»

Мы собираемся добавить еще одну функцию, чтобы завершить эту часть сообщения. Каждый раз, когда пользователь вводит несуществующий URL-адрес, приложение перенаправляет его или ее на компонент не найден (404).

Во-первых, давайте создадим новую папку внутри папки компонентов и назовем ее ErrorPages. Внутри создайте новую папку с именем NotFound. Там создайте два новых файла NotFound.js и NotFound.css :

Теперь изменим файл NotFound.js :

import React from 'react'; import './NotFound.css' const notFound = (props) => < return ( 
> "404 SORRY COULDN'T FIND IT. "
 ) > export default notFound; 

Мы создали функциональный компонент, который возвращает некоторый JSX-код внутри блока return() . JSX — это синтаксическое расширение JavaScript. Рекомендуется использовать его с React, чтобы описать, как должен выглядеть пользовательский интерфейс. Хотя он может напоминать вам язык шаблонов, он использует всю мощь JavaScript.

Затем нам нужно изменить файл NotFound.css :

.notFound

Наконец, давайте изменим файл App.js :

import NotFound from '../components/ErrorPages/NotFound/NotFound'; 

Благодаря этому изменению всякий раз, когда пользователь вводит несуществующий URL-адрес, наше приложение будет отображать компонент NotFound (даже если мы введем localhost: 3000/404)

Заключение

Мы успешно завершили навигационную часть серии.

Прочитав этот пост, вы узнали:

• Как настроить React-Routing
• Способ создания компонента навигации
• Как использовать библиотеку React-Router-Bootstrap для объединения Bootstrap и навигации React-Router
• Способ создания компонента 404

Спасибо, что прочитали статью, и я надеюсь, что вы нашли в ней что-то полезное.

В следующей части серии мы узнаем, как подготовить HTTP-репозиторий с помощью Axios и Redux.

Маршрутизация в React Router: как она работает и почему ее выбирают разработчики

React Router — решение для переключения и маршрутизации страниц React. Библиотека появилась еще в 2014 году и стала одним из первых популярных проектов с открытым исходным кодом на основе React. Рассказываем про ключевую концепцию библиотеки и разбираем, почему разработчики выбирают именно ее для организации маршрутизации. Бонусом — напишем небольшое приложение c использованием хуков useLocation и useNavigate , и увидим, как на практике работает маршрутизация через React Router.

• Декларативная маршрутизация
• Подготовка окружения
• Настройка маршрутов
• Настройка вложенных маршрутов в React Router v6
• Хук useLocation
• Хук useNavigate
• Другие хуки

Этот подробный гайд больше подходит для тех, кто уже немного знает основы React. Если вы еще не разобрались с ним, советуем перед прочтением статьи пройти большой курс по React на Хекслете.

Фронтенд-разработчик — с нуля до трудоустройства за 10 месяцев

• Постоянная поддержка от наставника и учебного центра
• Помощь с трудоустройством
• Готовое портфолио к концу обучения
• Практика с первого урока

Вы получите именно те инструменты и навыки, которые позволят вам найти работу

Декларативная маршрутизация

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

Конечно, любой маршрутизатор хорош настолько, насколько хороша его библиотека. React Router в шестой версии предоставляет множество мощных функций для упрощения задач маршрутизации и является предпочтительным решением для маршрутизации React.

Что делает React Router лучшим по сравнению с другими библиотеками маршрутизации:

• Декларативное определение маршрута (с использованием JSX внутри компонентов React)
• Отраслевой стандарт
• Библиотека предлагает множество примеров кода и обширное онлайн-руководство
• React Router предоставляет возможность использования хуков и функциональных компонентов.

Текущая версия React Router v6 внесла ряд ключевых изменений по сравнению с предыдущей версией v5:

• Компонент был переименован в
• Хук useRoutes() заменяет react-router-config для определения маршрутов как простых объектов
• Каждый дочерний компонент должен быть , что может нарушить некоторые предыдущие методы организации и составления маршрутов.

В нашей статье все примеры будут построены c использованием React Router именно шестой версии.

Подготовка окружения

Прежде чем мы приступим к практике, необходимо подготовить рабочее окружение.

Для создания веб-приложений нам нужен react-router-dom , который включает в себя все, что есть в react-router , и добавляет несколько специфичных для DOM API компонентов, включая и .

Создадим проект с помощью Create React App и установим react-router-dom :

npx create-react-app my-app cd my-app npm i react-router-dom 

Кроме того, установим lorem-ipsum для генерации текста-заполнителя lorem ipsum для страниц.

npm i lorem-ipsum

Теперь пакеты react-router-dom и lorem-ipsum можно увидеть в package.json в качестве зависимостей.

Настройка маршрутов

Router — это компонент верхнего уровня с отслеживанием состояния, который заставляет работать все остальные компоненты навигации и хуки. В React Router есть BrowserRouter , HashRouter , StaticRouter , NativeRouter и MemoryRouter . Для веб-приложений обычно используется BrowserRouter . Приложение должно иметь один , который обертывает один или несколько .

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

можно определить либо как объект, либо элемент Route. Если это объект, он имеет форму < path, element >. Если это элемент Route, компонент имеет вид . Когда указанный путь path соответствует текущему URL-адресу, то отображается компонент, указанный в качестве элемента element . В нашем приложении мы будем использовать именно element .

Подготовим несколько страниц, для которых будем настраивать маршрутизацию:

// src/Components/Pages.jsx import  loremIpsum > from 'lorem-ipsum'; const BuildPage = (index) => ( <> h3>Page index>h3> div> Page index> content:  loremIpsum( count: 5 >)> div>  ); export const PageOne = () => BuildPage(1); export const PageTwo = () => BuildPage(2); 

В src/App.js создадим два маршрута:

// App.jsx import  BrowserRouter, Routes, Route > from 'react-router-dom'; import  PageOne, PageTwo > from './Components/Pages'; function App()  return ( BrowserRouter> Routes> Route path="one" element=PageOne />> /> Route path="two" element=PageTwo />> /> Routes> BrowserRouter> ); > export default App; 

В этом коде и используются для определения маршрутизатора.

В приложении есть два . Когда URL-адрес соответствует пути one , приложение показывает компонент PageOne . Когда URL-адрес соответствует пути two , приложение показывает компонент PageTwo .

Запустим приложение, выполнив команду npm start .

http://localhost:3000/one показывает PageOne

http://localhost:3000/two показывает PageTwo

Приложение работает для путей one и two . Однако http://localhost:3000 ничего не показывает, как и любые недействительные URL-адреса, такие как http://localhost:3000/anything .

Эту проблему можно решить с помощью подстановочного пути:

// App.jsx import  BrowserRouter, Routes, Route > from 'react-router-dom'; import  PageOne, PageTwo > from './Components/Pages'; function App()  return ( BrowserRouter> Routes> /* подстановочный путь */> Route path="*" element=PageOne />> /> Route path="two" element=PageTwo />> /> Routes> BrowserRouter> ); > export default App; 

Теперь http://localhost:3000/two показывает PageTwo . Во всех остальных случаях будет отображаться PageOne . Порядок указания маршрутов не имеет значения, так как React Router 6 выбирает в первую очередь наиболее точное совпадение.

Настройка вложенных маршрутов в React Router v6

Два маршрута в приведенном выше примере работают, как мы и ожидали. Однако вводить URL-адрес в адресной строке браузера неудобно. Мы хотели бы иметь возможность навигации по ссылке, которая называется .

Создадим главную страницу, которая будет содержать ссылки на соответствующие страницы src/MainPage.js .

// src/MainPage.js import  Link > from 'react-router-dom'; export const MainPage = () => ( nav> ul> li> Link to="/one">Page OneLink> li> li> Link to="/two">Page TwoLink> li> ul> nav> ); 

Добавим главную страницу в наше приложение и отметим эту страницу как индексный маршрут, который является дочерним маршрутом без пути.

import  BrowserRouter, Routes, Route, > from 'react-router-dom'; import  PageOne, PageTwo > from './Components/Pages'; import MainPage from './Components/MainPage'; const App = () =>  return ( BrowserRouter> Routes> Route path="/" element=MainPage/> > /> Route path="one" element=PageOne />> /> Route path="two" element=PageTwo />> /> Routes> BrowserRouter> ); > export default App; 

Теперь, когда URL-адрес соответствует «/» , приложение будет показывать MainPage: MainPage .

Нажав на ссылку Page One , мы перейдем на PageOne . Нажав на ссылку Page Two , мы перейдем на PageTwo .

Однако внутри PageOne или PageTwo мы не можем использовать ссылки для навигации. Чтобы решить эту проблему, создадим компонент в MainPage . Он позволяет отображать вложенный пользовательский интерфейс при отображении дочерних маршрутов. Таким образом, при клике на ‘one’ будет отображаться компонент PageOne , а при клике на ‘two’ — PageTwo .

Это src/MainPage.js с Outlet :

import React from 'react'; import  Link, Outlet > from 'react-router-dom'; const MainPage = () =>  return ( <> nav> ul> li> Link to='/one'>Page OneLink> li> li> Link to='/two'>Page TwoLink> li> ul> nav> hr /> Outlet />  ) >; 

вызывает вложенные маршруты, где у каждого могут быть свои дочерние маршруты, занимающие часть URL-адреса. Вложенные маршруты обычно описывают через относительные ссылки.

Вот модифицированный src/App.jsx :

import  BrowserRouter, Routes, Route > from 'react-router-dom'; import  PageOne, PageTwo > from './Components/Pages'; import MainPage from './Components/MainPage'; const App = () =>  return ( BrowserRouter> Routes> Route path="/" element=MainPage />> > Route index element=div>No page is selected.div> > /> Route path="one" element=PageOne />> /> Route path="two" element=PageTwo />> /> Route> Routes> BrowserRouter> ); > 

http://localhost:3000/ теперь выглядит так:

А так http://localhost:3000/one :

Хук useLocation

Местоположение — это объект, который представляет местоположение URL. Он основан на объекте браузера window.location .

Хук useLocation возвращает объект текущего местоположения.

import React,  useEffect > from 'react'; import  Link, Outlet, useLocation > from 'react-router-dom'; const MainPage = () =>  const location = useLocation(); useEffect(() =>  console.log('Current location is ', location); >, [location]); return ( <> nav> ul> li> Link to="/one">Page OneLink> li> li> Link to="/two">Page TwoLink> li> ul> nav> hr /> Outlet />  ); >; 

В переменную location мы сохраняем местоположение, которое генерируется хуком useLocation . Внутри хука useEffect мы будем выводить текущее местоположение при каждом изменении параметра location .

Если URL-адрес http://localhost:3000/ , то консоль регистрирует:

Если URL-адрес http://localhost:3000/one , то консоль регистрирует:

Когда URL-адрес http://localhost:3000/anything , то тут консоль регистрирует:

Хук useNavigate

Хук useNavigate возвращает функцию, которую можно использовать для программной навигации. Заменим все в нашем приложении на в src/MainPage.js :

import React,  useEffect > from 'react'; import  Outlet, useLocation, useNavigate > from 'react-router-dom'; const MainPage = () =>  const location = useLocation(); const navigate = useNavigate(); useEffect(() =>  console.log('Current location is ', location); >, [location]); return ( <> nav> ul> li> button onClick=() => navigate('one',  replace: false >)>> Page One button> li> li> button onClick=() => navigate('two',  replace: false >)>> Page Two button> li> ul> nav> hr /> Outlet />  ) >; 

Теперь запустим наше приложение и убедимся, что кнопки работают аналогично ссылкам.

Хук useNavigate может принимать:

1. Либо значение To с необязательным вторым аргументом < replace, state >, как это работает и в
2. Либо дельта-число, чтобы войти в стек истории. Например, навигация (-1) по своей сути аналогична нажатию кнопки «Назад».

Другие хуки

Мы показали, как использовать useLocation и useNavigate . При этом в библиотеке есть и другие хуки — например, useParams или useRoutes . С ними можно ознакомиться в официальной документации React Router .

Статья является адаптированным переводом команды Хекслета материалов из следующих источников: 1 и 2 .

Профессия «Фронтенд-разработчик»

• Изучите востребованные JavaScript и TypeScript
• Научитесь создавать пользовательские интерфейсы сайтов и приложений
• Освойте самый популярный фреймворк JavaScript — React
• Познакомьтесь с языками веб-разработки HTML и CSS

Полное руководство по React Router v6. Часть 1 — Основы React Router

React Router — самая популярная библиотека маршрутизации в React, но разобраться в некоторых из более сложных функций может быть немного сложно. В этой серии статей рассмотрим все, что вам нужно знать о React Router, чтобы вы могли с легкостью использовать даже самые продвинутые функции.

1. Основы React Router (рассматривается в этой статье)
2. Продвинутые определения маршрутов
3. Управление навигацией
4. Подробно о роутерах

Основы React Router

1. Настроить роутер
2. Прописать свои маршруты
3. Управлять навигацией

Настройка роутера

Настройка роутера является самым простым шагом. Все, что вам нужно сделать, это импортировать конкретный роутер, который вам нужен ( BrowserRouter для веба и NativeRouter для мобильных устройств) и обернуть все ваше приложение в этот роутер.

import React from "react" import ReactDOM from "react-dom/client" import App from "./App" import < BrowserRouter >from "react-router-dom" const root = ReactDOM.createRoot(document.getElementById("root")) root.render(     )
Как правило, вы импортируете свой маршрутизатор в файле index.js вашего приложения, и он будет оборачивать компонент App . Роутер работает так же, как контекст в React, и предоставляет всю необходимую информацию вашему приложению, чтобы вы могли выполнять маршрутизацию и использовать все пользовательские хуки из React Router.
Определение маршрутов
Следующим шагом в React Router является определение ваших маршрутов. Обычно это делается на верхнем уровне приложения, например в компоненте App , но это можно сделать в любом месте.
import < Route, Routes >from "react-router-dom" import < Home >from "./Home" import < BookList >from "./BookList" export function App() < return ( > /> > /> ) >
Определить маршруты так же просто, как определить компонент Route для каждого маршрута в приложении, а затем поместить все эти компоненты Route в один компонент Routes . Всякий раз, когда ваш URL-адрес изменяется, React Router будет просматривать маршруты, определенные в вашем компоненте Routes , и он будет отображать содержимое в пропсе element роута Route , который имеет path , соответствующий URL-адресу. В приведенном выше примере, если бы наш URL-адрес был /books , то отображался бы компонент BookList . Преимущество React Router заключается в том, что при переходе между страницами он обновляет только содержимое внутри вашего компонента Routes . Весь остальной контент на вашей странице останется прежним, что повысит производительность и удобство использования.
Управление навигацией
SolidJS. Быстрый старт






2 месяца назад · 7 мин. на чтение
Как быстро начать использовать SolidJS
SolidJS — это легковесная JavaScript библиотека для создания пользовательских интерфейсов. Он предоставляет модель реактивного программирования, которая позволяет разработчикам создавать динамические и эффективные приложения. В этом кратком руководстве мы рассмотрим ключевые понятия и функции SolidJS и узнаем, как начать создавать веб-приложения с использованием SolidJS.
Что такое SolidJS?
SolidJS — это декларативная UI библиотека, которая позволяет разработчикам создавать высокопроизводительные веб-приложения с помощью JavaScript. Он следует принципам реактивного программирования, когда компоненты пользовательского интерфейса реагируют на изменения в данных и автоматически обновляются. SolidJS вдохновлен такими библиотеками, как React и Svelte, но нацелен на предоставление более простой и эффективной модели программирования.
Установка SolidJS
Чтобы начать работу с SolidJS, вы можете включить библиотеку в свой проект с помощью менеджера пакетов, такого как npm или yarn. Откройте терминал и выполните следующую команду:
npm install solid-js
После завершения установки вы можете импортировать SolidJS в свой проект:
import < createSignal >from "solid-js";
Пример Hello World
Давайте начнем с создания простого примера «Hello World» с использованием SolidJS. В этом примере мы отобразим приветственное сообщение на экране.
import < createSignal, render >from "solid-js"; function App() < const [message, setMessage] = createSignal("Hello, World!"); return ( 
  setMessage("Hello, SolidJS!")>> Update Message 
 ); > render(() => , document.getElementById("app"));
В приведенном выше коде мы определяем функциональный компонент под названием App . Внутри компонента мы используем функцию createSignal для создания реактивного сигнала, называемого message . Сигнал message содержит приветственное сообщение, и мы инициализируем его значением Hello, World! . В коде JSX мы можем получить доступ к значению сигнала message с помощью message() . Это позволяет пользовательскому интерфейсу реагировать на изменения сигнала и динамически обновляться. Обработчик событий onClick кнопки обновляет значение сигнала message на Hello, SolidJS! при нажатии. Это изменение запускает повторную визуализацию компонента, и обновленное сообщение отображается на экране. Наконец, мы используем функцию render для рендеринга компонента App и монтируем его к элементу DOM с идентификатором app .
Компоненты и JSX в SolidJS
В SolidJS компоненты пользовательского интерфейса определяются как функции, возвращающие элементы JSX. JSX — это расширение синтаксиса для JavaScript, которое позволяет писать HTML-подобный код в коде JavaScript. Он обеспечивает краткий и выразительный способ описания структуры и содержимого пользовательского интерфейса. Ниже приведен пример простого компонента, который визуализирует кнопку:
import < createSignal >from "solid-js"; function Button(props) < const [count, setCount] = createSignal(0); return ( setCount(count() + 1)>> () ); >
Сигналы и реактивное программирование
Сигналы лежат в основе модели реактивного программирования SolidJS. Они представляют собой реактивные значения, которые можно считывать и обновлять. Сигналы создаются с помощью функции createSignal , которая возвращает пару значений: текущее значение сигнала и функцию для обновления значения.
import < createSignal >from "solid-js"; const [count, setCount] = createSignal(0);
Чтобы прочитать текущее значение сигнала, мы вызываем сигнал как функцию:
console.log(count()); // Output: 0
Чтобы обновить значение сигнала, вызываем функцию обновления с новым значением:
setCount(10); console.log(count()); // Output: 10
Сигналы можно использовать в компонентах для создания динамических пользовательских интерфейсов, которые реагируют на изменения в данных. При обновлении сигнала все компоненты, зависящие от этого сигнала, автоматически перерисовываются.
Условный рендеринг
SolidJS предоставляет несколько компонентов потока управления для условного рендеринга. Компонент Show используется для условной визуализации части представления на основе условия.
import < Show >from 'solid-js'; function App() < // . return ( 
 0>> 
Count is greater than 0
  
 ); >
В этом примере компонент используется для условной визуализации элемента только в том случае, если переменная состояния count больше 0 . Если условие выполнено, будет визуализирован элемент ; в противном случае он будет скрыт.
Списки и итерации
SolidJS предоставляет компонент для итерации массивов и рендеринга списка элементов. Давайте изменим наш компонент App , чтобы отобразить список элементов на основе массива данных.
Рефы (Refs) ссылки в SolidJS
Ссылки позволяют получать доступ к базовым элементам DOM в компонентах SolidJS и взаимодействовать с ними. Вы можете думать о ссылках как о способе получения ссылки на определенный элемент, аналогично использованию getElementById в традиционном JavaScript. SolidJS предоставляет два способа работы с рефами: с помощью переменной напрямую или с помощью функции обратного вызова.
Ссылка на основе переменной
import < createSignal, onMount >from "solid-js"; function App() < let myButton; onMount(() =>< console.log(myButton); >); return ( > Click me ); >
В приведенном выше коде мы определяем переменную myButton и передаем ее в проп ref элемента button . Мы используем функцию onMount для регистрации переменной myButton после того, как компонент смонтирован и подключен к DOM. Получив доступ к переменной myButton , мы можем выполнять действия или получать информацию об элементе button .
Ссылка на основе функции обратного вызова
import < createSignal >from "solid-js"; function App() < const [myButton, setMyButton] = createSignal(null); const handleButtonClick = () =>< console.log(myButton()); >; return ( 
 onClick=> Click me 
 ); >
В этом примере мы используем функцию обратного вызова для установки ref . Функция setMyButton вызывается со ссылкой на элемент, когда компонент визуализируется и подключается к модели DOM. Затем мы можем получить доступ к ссылке на элемент в функции handleButtonClick .
Стилизация компонента
SolidJS предоставляет различные подходы к стилизации компонентов. Вы можете использовать встроенные (inline) стили, классы CSS или библиотеки CSS-in-JS для стилизации компонентов SolidJS.
Встроенные стили (inline)
function App() < const [color, setColor] = createSignal("red"); return ( 
`> onClick= setColor("blue")> > Change Color 
 ); >
В приведенном выше примере используется проп style для определения встроенных стилей для элемента button . Значением свойства style является строка, содержащая пары CSS свойство-значение. Мы можем динамически обновлять стиль, передавая вычисленное значение в прпо style .
CSS классы
function App() < const [isActive, setIsActive] = createSignal(false); return ( 
 > onClick= setIsActive(!isActive())> > Toggle Active 
 ); >
В этом примере мы условно применяем CSS-класс active к элементу button на основе значения сигнала isActive . Если isActive имеет значение true , применяется класс active ; В противном случае класс не применяется.
Обработка ошибок
Обработка ошибок является важным аспектом любого приложения, и SolidJS предоставляет функции для корректной обработки ошибок. Компонент позволяет перехватывать и обрабатывать ошибки, возникающие в его дочерних компонентах.
import < ErrorBoundary >from 'solid-js'; function ErrorComponent() < throw new Error('Something went wrong!'); >function App() < return ( 
My App
 Error occurred! Please try again.
>>  

import < createEffect, createSignal >from 'solid-js'; function fetchData() < return new Promise(resolve => < setTimeout(() =>< resolve('Data loaded!'); >, 2000); >); > function App() < const [data, setData] = createSignal(''); const [loading, setLoading] = createSignal(true); createEffect(async () =>< setLoading(true); const result = await fetchData(); setData(result); setLoading(false); >); return ( 
Loading.
 >> Loading.