Фреймворк, основанный на реакции, называется Next.js. Он предоставляет возможность создавать привлекательные веб-приложения для нескольких платформ, включая Windows, Linux и Mac. Если вы новичок в React и хотите узнать больше об экосистеме React, вы должны быть знакомы с фреймворком Next.js.
Давайте начнем с краткого обзора Next.js.
Основой Next.js являются React, Webpack и Babel. Это фантастический инструмент для разработки веб-приложений, хорошо известный своим рендерингом на стороне сервера. Zeit является создателем Next.js. Разработчики, уже знакомые с HTML, CSS, Java Script и React, могут быстро освоить next.js.
Основные качества:
- Горячая перезагрузка кода: при сохранении изменений кода приложение автоматически перезагружается.
- Автоматическое разделение кода: эта функция связывает и обслуживает каждую страницу с каждым импортом, найденным в коде. Это означает, что дополнительный код никогда не загружается на страницу.
- Совместимость с экосистемами JavaScript, Node и React.
- Перед передачей HTML клиенту можно просто отобразить компонент реакции на сервере.
- Styled-JSX: Styled-JSX позволяет напрямую вставлять CSS в код JavaScript.
Пример:
function Home() {
return (
‹div className="container"›
‹p›Hello Geeks‹/p›
‹style jsx›{`< br /> .container {
margin: 50px;
}
p {
color: blue;
}
`}‹/style›
‹/div›
)
экспортировать главную страницу по умолчанию
Шаги по установке и запуску приложения Next.js:
- Шаг 1. Для установки next.js требуются npm и node.js. Вы можете установить node.js отсюда. Подтвердите установку, выполнив эту команду на терминале.
node -v npm -v
- Шаг 2. Теперь создайте папку для своего проекта на рабочем столе, перейдите к папке через редактор кода и выполните следующую команду на терминале.
npm init -y npm install --save next react react-dom
- После этого шага у нас установлены все зависимости в нашей системе. Теперь добавьте следующий скрипт в файл package.json.
{
«скрипты»: {
«dev»: «далее»,
«build»: «следующая сборка»,
«start»: «следующий запуск»
}
- Для запуска приложения в браузере используйте команду
npm start
в терминале. - Шаг 3. Добавьте файл index.js в папку страницы и добавьте в него следующий код.
импортировать React из 'реагировать';
импортировать ссылку из 'следующая/ссылка';
класс экспорта по умолчанию extends React.Component {
render() {
return ( {
// Это Jsx содержит HTML
// код в Javascript }
‹div›
‹h1›Hello Geeks‹/h1›
{
// Это Styled-jsx содержит
// CSS-код на Javascript}< br /> ‹style jsx›{`
a{
color:grey;
text-decoration:none;
}
`}‹/style›
}
‹/div›
)
}
}
Шаг 4. Теперь запустите приложение, запустив npm start.