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 за фотографию моста Золотые Ворота, использованной в этом посте!