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

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

178118

В этой статье вы познакомитесь с 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 (
      
        
          
          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}
      
    
    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
         {
            this.setState({ activePlace: index });
          }}
        >
          {PLACES.map((place, index) => (
            {place.name}
          ))}

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

			npm install --save bootswatch

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

			import "bootswatch/journal/bootstrap.css";

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

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

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

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

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