Пишем полноценное приложение на React с нуля за час

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

178118
Обложка поста react-basic-weather-app

В этой статье вы познакомитесь с React — библиотекой для создания пользовательских интерфейсов. React появился в 2013 году и достаточно быстро стал популярным среди разработчиков. Сегодня в работе над веб-приложениями его используют Facebook, Instagram, Trello, AirBnb, PayPal. С помощью этой статьи мы сможем написать приложение прогноза погоды: от установки с помощью create-react-app (проект на GitHub) до подключения API и стилей bootswatch.

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

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

Этот материал был написан для воркшопа Open Source Dev Garage, прошедшего в рамках конференции разработчиков F8 2017. Чтобы лучше разобраться в том, как написать это приложение, посмотрите 48-минутное видео или следуйте письменным инструкциям в этом руководстве.

Intro to React Workshop on Vimeo
vimeo.com

Просмотрев семинар или изучив руководство, вы создадите простое приложение прогноза погоды:

Итак, приступим.

Создайте ваше первое приложение

Прежде всего вам понадобится node.js и редактор кода, например, Atom.

Откроем терминал и установим create-react-app:

			npm install -g create-react-app
		

Начнем создавать наше приложение прогноза погоды:

			create-react-app weather
		

Данной командой мы установим набор инструментов, которые помогут создать наше React-приложение. По завершении установки мы сможем запустить приложение командами:

			cd weather
npm start
		

Новое приложение автоматически откроется в браузере!

Свойства и компоненты

Давайте взглянем на приложение, которое create-react-app создал автоматически. В редакторе кода откроем weather/src/App.js:

			class App extends Component {
  render() {
    return (
      
logo

Welcome to React

To get started, edit src/App.js and save to reload.

); } }

Наше приложение состоит из одного компонента, где функция render() является его главной составляющей. Напишите какой-нибудь текст, сохраните изменения и посмотрите, как приложение автоматически применит их!

Теперь создадим новый компонент WeatherDisplay. Так как функция render() — это «сердце» компонента, то именно она определяет, что будет отображено. Для начала создадим тег с каким-нибудь текстом внутри:

			class WeatherDisplay extends Component {
  render() {
    return (
      

Displaying some Weather!

); } }

Изменим компонент App, чтобы отобразить наш WeatherDisplay:

			class App extends Component {
  render() {
    return (
      
); } }

Как видите, мы передали данные, которые обозначили переменной zip, в компонент WeatherDisplay. Они называются свойствами (props). Мы можем модифицировать наш компонент для отображения передаваемых данных:

			class WeatherDisplay extends Component {
  render() {
    return (
      

Displaying weather for city {this.props.zip}

); } }

Где-нибудь в начале файла добавим несколько городов, для которых мы хотели бы отобразить погоду:

			const PLACES = [
  { name: "Palo Alto", zip: "94303" },
  { name: "San Jose", zip: "94088" },
  { name: "Santa Cruz", zip: "95062" },
  { name: "Honolulu", zip: "96803" }
];
		

Обновим render() в компоненте App, в котором, перебирая массив PLACES, создадим тег button для каждого города:

			return (
  
{PLACES.map((place, index) => ( ))}
);

Из массива данных мы создадим набор элементов button и назначим свойство key для каждого, чтобы React знал последовательность элементов в массиве.

Здесь также есть обработчик событий onClick, который при нажатии будет выводить сообщение в консоль браузера. Открыв панель разработчика в браузере, вы можете увидеть логи событий. Ваше приложение должно выглядеть так:

На этом этапе файл App.js должен выглядеть так.

Состояние

Мы хотим, чтобы в приложении была возможность переключаться между местами, поэтому мы можем использовать состояние (state) для хранения данных в компоненте App.

Сначала давайте добавим функцию-конструктор, в которой будет использоваться super(), а затем установим начальное состояние this.state:

			constructor() {
  super();
  this.state = {
    activePlace: 0,
  };
}
		

Функция render() может брать данные из this.state при составлении пользовательского интерфейса. Для этого мы можем использовать метод setState компонента React, который меняет состояние и перезапускает функцию render(), чтобы изменить пользовательский интерфейс.

Применим this.state и this.setState в нашем компоненте App:

			class App extends Component {
  constructor() {
    super();
    this.state = {
      activePlace: 0,
    };
  }
  render() {
    const activePlace = this.state.activePlace;
    return (
      
{PLACES.map((place, index) => ( ))}
); } }

На этом этапе файл App.js должен выглядеть так.

Жизненный цикл компонентов и выборка данных

Иногда нам нужно добавить императивный код (React-код обычно декларативен), который вызывается в определенное время жизни компонента. Методы жизненного цикла позволяют нам написать дополнительный код как раз для таких случаев.

В этом примере мы хотим вызвать API, когда компонент загрузится на экране, для этого добавим код в componentDidMount. Обновим компонент WeatherDisplay:

			class WeatherDisplay extends Component {
  constructor() {
    super();
    this.state = {
      weatherData: null
    };
  }
  componentDidMount() {
    const zip = this.props.zip;
    const URL = "http://api.openweathermap.org/data/2.5/weather?q=" +
      zip +
      "&appid=b1b35bba8b434a28a0be2a3e1071ae5b&units=imperial";
    fetch(URL).then(res => res.json()).then(json => {
      this.setState({ weatherData: json });
    });
  }
  render() {
    const weatherData = this.state.weatherData;
    if (!weatherData) return 
Loading
; return
{JSON.stringify(weatherData)}
; } }

Улучшим вывод render() для красивого вывода данных:

			const weather = weatherData.weather[0];
const iconUrl = "http://openweathermap.org/img/w/" + weather.icon + ".png";
return (
  

{weather.main} in {weatherData.name} {weatherData.description}

Current: {weatherData.main.temp}°

High: {weatherData.main.temp_max}°

Low: {weatherData.main.temp_min}°

Wind Speed: {weatherData.wind.speed} mi/hr

);

На этом этапе файл App.js должен выглядеть так.

Установка компонентов

Наше приложение всё еще выглядит не очень красиво. Можно исправить это, добавив className (из стилей CSS) в свойства div или установив соответствующую библиотеку с помощью npm.

Bootstrap — популярный набор инструментов для стилизации пользовательского интерфейса в HTML и CSS. Установим его вместе с react-bootstrap, который предоставляет компоненты React для bootstrap:

			npm install --save bootstrap react-bootstrap
		

Импортируем стили из bootstrap в начале файла:

			import "bootstrap/dist/css/bootstrap.css";
		

Далее импортируем из react-bootstrap компоненты, которые мы хотим использовать. Их можно найти на сайте react-bootstrap:

			import { Navbar, NavItem, Nav, Grid, Row, Col } from "react-bootstrap";
		

Заменим теги в компоненте App, чтобы вывести компоненты bootstrap:

			
React Simple Weather App

Select a city

Теперь наше приложение выглядит привлекательнее, но будет здорово, если мы добавим что-то от себя. Для этого установим bootswatch:

			npm install --save bootswatch
		

Выберите подходящее оформление на сайте bootswatch и установите его, заменив bootstrap. В нашем примере мы используем тему journal:

			import "bootswatch/journal/bootstrap.css";
		

Окончательный вид нашего приложения:

Окончательный вариант App.js.

Развертывание (дополнительный материал)

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

Одним из таких сервисов является Netlify, особенно в случае, когда вы хотите использовать механизм “непрерывного развертывания”.

Полезные материалы для изучения React и дальнейшей работы с ним

  • React Native: используйте React для создания мобильных приложений.
  • Redux: инструмент для управления данными в больших приложениях.
  • Relay: библиотека для связи компонентов React и данных GraphQL.
  • Jest: фреймфорк для тестирования JS-кода.
  • Flow: инструмент для статической проверки типов.
Следите за новыми постами по любимым темам

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

JavaScript
Для начинающих
Веб-разработка
Обучение программированию
F8 2017
React
Фронтенд
178118
Что думаете?
2 комментария
Сначала интересные
Аватар пользователя mukuch account
Compiled with problems:X ERROR in ./src/App.js 124:37-41 export 'Grid' (imported as 'Grid') was not found in 'react-bootstrap'
Аватар пользователя Alex Morgul
mukuch account, Grid переименован в Container. Поменяй в импорте и разметке и все заработает
Курсы
набор еще идетонлайн7590₽
набор еще идетонлайнбесплатно
набор еще идетонлайнбесплатно
набор еще идетонлайн2790₽
Все курсы