React - один из самых популярных веб-фреймворков. Его популярность неуклонно растет в течение многих лет, впервые пройдя Angular в опросе разработчиков Stack Overflow 2019.
В этом посте вы узнаете, как создать собственный веб-сайт на React всего за несколько минут. Если вы хотите узнать больше после прохождения этого руководства, ознакомьтесь с курсом Beginning React, который я только что создал на Next Tech, чтобы еще больше улучшить свои навыки React.
А пока давайте перейдем непосредственно к созданию веб-сайта с помощью React!
Предпосылки
Для выполнения этих шагов вам потребуется установить Node Package Manager (npm). Если он еще не установлен, перейдите на https://www.npmjs.com/get-npm, чтобы загрузить и установить npm.
Это также установит
npx
, который мы будем использовать для запускаcreate-react-app
.
Создать приложение React
Create React App - отличный способ быстро запустить и запустить сайт React. Приложение Create React было создано Facebook (той же компанией, которая создала React!). В своих документах они описывают это как:
Create React App - это официально поддерживаемый способ создания одностраничных приложений React. Он предлагает современную настройку сборки без какой-либо конфигурации.
Знание, что Create React App поддерживается создателями React, является огромным плюсом. Давайте воспользуемся этим, чтобы начать работу с нашим сайтом!
Выполните следующую команду, чтобы создать свой сайт:
npx create-react-app hello-react
Обратите внимание, что выполнение этой команды может занять несколько минут.
Просмотр веб-сайта React
Затем выполните следующие команды, чтобы запустить сервер разработки React:
cd hello-react npm start
На этом этапе должна открыться вкладка браузера, показывающая ваш сайт React. Если это не так, посетите http: // localhost: 3000 в своем любимом браузере, чтобы увидеть свой сайт React!
Обновление сайта
Теперь давайте внесем изменения, чтобы обновить сайт. Откройте файл hello-react / src / App.js, затем замените строку:
Edit <code>src/App.js</code> and save to reload.
с участием:
My first React website!
Если вы откроете веб-страницу снова, вы увидите, что она обновилась, и вам не нужно обновлять страницу! Живая перезагрузка - одна из замечательных функций, которые Create React App настраивает за вас.
Создание компонента React
Затем мы создадим новый компонент React. Сначала создайте в папке src папку с именем components. Затем создайте файл с именем HomepageImage.js в папке src / components. Этот файл будет содержать наш новый компонент изображения домашней страницы.
Мы создадим этот компонент, добавив следующий код в файл HomepageImage.js:
Затем в App.js замените
<img src={logo} className=”App-logo” alt=”logo” />
с участием
<HomepageImage />
Нам также необходимо импортировать компонент в верхнюю часть App.js, добавив следующий код в верхнюю часть файла:
import HomepageImage from './components/HomepageImage'
Поскольку мы удалили изображение логотипа React, вы также можете удалить этот импорт для логотипа:
import logo from './logo.svg';
Окончательный файл App.js должен выглядеть так:
Теперь снова откройте http: // localhost: 3000 в своем браузере. Если все работает, вы должны увидеть следующую страницу:
Поздравляем с созданием вашего первого веб-сайта на React 🎉!
Следующие шаги
Это руководство было кратким введением в создание веб-страниц с помощью React. Если вы хотите лучше понять React и с его помощью создавать отличные сайты, ознакомьтесь с курсом, который я только что выпустил, который учит React!
Вы создали сайт на React? Не стесняйтесь поделиться своим URL-адресом или ссылкой на свой проект на GitHub в комментариях ниже, чтобы продемонстрировать это!
Спасибо за чтение,
Эндрю, инженер-программист @ Next Tech
Особая благодарность Maarten van den Heuvel за фотографию моста Золотые Ворота, использованной в этом посте!