{"time":1708448977303,"blocks":[{"id":"aXjxLOd-qg","type":"paragraph","data":{"text":"В этой статье вы познакомитесь с React — библиотекой для создания пользовательских интерфейсов. React появился в 2013 году и достаточно быстро стал популярным среди разработчиков. Сегодня в работе над веб-приложениями его используют Facebook, Instagram, Trello, AirBnb, PayPal. С помощью этой статьи мы сможем написать приложение прогноза погоды: от установки с помощью create-react-app (проект на GitHub) до подключения API и стилей bootswatch."}},{"id":"VjWW1QvmCs","type":"paragraph","data":{"text":"Прим. перев. Если вы начинаете изучение React, вам также стоит прочитать наш материал, в котором разработчик делится советами по использованию этой библиотеки."}},{"id":"a39deca9-6448-4311-9a50-d7b7b3ae17dc","type":"banner-blank","data":{}},{"id":"eOBh3jwxMS","type":"paragraph","data":{"text":"Этот материал был написан для воркшопа Open Source Dev Garage, прошедшего в рамках конференции разработчиков F8 2017. Чтобы лучше разобраться в том, как написать это приложение, посмотрите 48-минутное видео или следуйте письменным инструкциям в этом руководстве."}},{"id":"Z_vi2DEbyu","type":"embed","data":{"link":"https://vimeo.com/213710634"}},{"id":"mAHUt5zLF8","type":"paragraph","data":{"text":"Просмотрев семинар или изучив руководство, вы создадите простое приложение прогноза погоды:"}},{"id":"-BBI7XjyqI","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":37110,"url":"https://media.tproger.ru/uploads/2017/04/Final.png"},"stretched":false,"withBackground":false,"withBorder":false,"width":2126,"height":1434,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2017/04/Final.png","alt":"Пишем полноценное приложение на React с нуля за час 1","dimensions":{"width":2126,"height":1434},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/VdgsAfZTkyDRLijp01fJbIOcP0MfKDsneTFCBpA6d68/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/bndxBqu3nLpZYsIkdZG6rbBGczGXov0gbS2uHrn2kTk/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/hPCgHZ6l1uN0BFYrD6hGtKF8cqP1viJx_osWgWg7VR0/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/koKg4qstB6E2rPF8KmU1OCbMSKh3UYlgeguH66gOY_0/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/Tc9D3HcFcPg2NSc0RvdWknsmqlG_MJSBywLTKjGr53I/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/Z3U_VPH8EBIVCQm7H98fP-nKON82d6iBoJbkZdRaHWE/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/dlArmPp12T5DV9TIuhWardjrrMtQzuMyH7E9_iWe9pI/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/bOgjY5QluNuV3EwZabyyur6gwAPZB6MwCEtOEeWY3lQ/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"GkWTdtnkea","type":"paragraph","data":{"text":"Итак, приступим."}},{"id":"8l25bsfA6X","type":"header2","data":{"text":"Создайте ваше первое приложение","level":2},"tunes":{}},{"id":"-SGRuqliQA","type":"paragraph","data":{"text":"Прежде всего вам понадобится node.js и редактор кода, например, Atom."}},{"id":"ejxyu8ENWv","type":"paragraph","data":{"text":"Откроем терминал и установим create-react-app:"}},{"id":"WN8uK30D1p","type":"code","data":{"code":"npm install -g create-react-app","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"Mq_0-1LZGY","type":"blockquote","data":{"text":"Примечание: Пользователям Linux или MacOS, возможно, потребуется дополнительно ввести команду sudo перед npm install -g.","author":"","authorJob":"","quoteMark":false,"withBorder":false,"fullWidth":false}},{"id":"Ve-N4aQHdn","type":"paragraph","data":{"text":"Начнем создавать наше приложение прогноза погоды:"}},{"id":"kWyVP49JmF","type":"code","data":{"code":"create-react-app weather","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"DfUM_cUCXe","type":"paragraph","data":{"text":"Данной командой мы установим набор инструментов, которые помогут создать наше React-приложение. По завершении установки мы сможем запустить приложение командами:"}},{"id":"00SgaLJCGO","type":"code","data":{"code":"cd weather\nnpm start","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"uVwG3ihMFA","type":"paragraph","data":{"text":"Новое приложение автоматически откроется в браузере!"}},{"id":"jBxHUxmMIO","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":37106,"url":"https://media.tproger.ru/uploads/2017/04/Init.png"},"stretched":false,"withBackground":false,"withBorder":false,"width":2126,"height":1434,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2017/04/Init.png","alt":"Пишем полноценное приложение на React с нуля за час 2","dimensions":{"width":2126,"height":1434},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/fVFDPyHUUiM4g8XLPPSTUqPLc2YAwKKq2YpEAf5tdj4/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Jbml0LnBuZw=","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/ntf3kkIKmGyu2lrGIpkvAgdR_YKLP0UPrq_jI1KYgt0/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Jbml0LnBuZw=","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/vHvCNThpbchfa_sYqtcCKFnpjln4k7h2llYTBNa03Ts/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Jbml0LnBuZw=","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/oqRuECvPbi_x3xlJhWsgjSUk6wxo_RQ8E0ZuZMY35LY/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Jbml0LnBuZw=","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/5QqD_xv9smbljEf0pPP2Eix_4TGNRPsowQYG0Z1Khh8/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Jbml0LnBuZw=","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/4YEVOG-xvbeiyo5SbIs8YWB0-RNOgv1JJtpgh1jtz4Y/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Jbml0LnBuZw=","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/khZjbuSEhkb290y1mk3KSlT2eSeflI8yuMc0Ig-Oiz4/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Jbml0LnBuZw=","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/KkpNYOYzVe4_929ylbXdeZMZhEOeFf9pfUgCtgmZQY8/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Jbml0LnBuZw=","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"1YPNia9YG3","type":"header2","data":{"text":"Свойства и компоненты","level":2},"tunes":{}},{"id":"1YcKGn4fMs","type":"paragraph","data":{"text":"Давайте взглянем на приложение, которое create-react-app создал автоматически. В редакторе кода откроем weather/src/App.js:"}},{"id":"v3tcm9WI6v","type":"code","data":{"code":"class App extends Component {\n render() {\n return (\n <div className=\"App\">\n <div className=\"App-header\">\n <img src={logo} className=\"App-logo\" alt=\"logo\" />\n <h2>Welcome to React</h2>\n </div>\n <p className=\"App-intro\">\n To get started, edit <code>src/App.js</code> and save to reload.\n </p>\n </div>\n );\n }\n}","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"B1Te2yZItT","type":"paragraph","data":{"text":"Наше приложение состоит из одного компонента, где функция render() является его главной составляющей. Напишите какой-нибудь текст, сохраните изменения и посмотрите, как приложение автоматически применит их!"}},{"id":"x_GZYo3YOf","type":"paragraph","data":{"text":"Теперь создадим новый компонент WeatherDisplay. Так как функция render() — это «сердце» компонента, то именно она определяет, что будет отображено. Для начала создадим тег с каким-нибудь текстом внутри:"}},{"id":"kxCmW0wJza","type":"code","data":{"code":"class WeatherDisplay extends Component {\n render() {\n return (\n <h1>Displaying some Weather!</h1>\n );\n }\n}","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"wrb-WhRYzj","type":"paragraph","data":{"text":"Изменим компонент App, чтобы отобразить наш WeatherDisplay:"}},{"id":"uCEu-m7iEQ","type":"code","data":{"code":"class App extends Component {\n render() {\n return (\n <div className=\"App\">\n <WeatherDisplay zip={\"12345\"} />\n </div>\n );\n }\n}","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"ItH3lLTNPs","type":"paragraph","data":{"text":"Как видите, мы передали данные, которые обозначили переменной zip, в компонент WeatherDisplay. Они называются свойствами (props). Мы можем модифицировать наш компонент для отображения передаваемых данных:"}},{"id":"P3Hl5t6RUC","type":"code","data":{"code":"class WeatherDisplay extends Component {\n render() {\n return (\n <h1>Displaying weather for city {this.props.zip}</h1>\n );\n }\n}\n","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"23NHm5pOzs","type":"paragraph","data":{"text":"Где-нибудь в начале файла добавим несколько городов, для которых мы хотели бы отобразить погоду:"}},{"id":"AyCV_orwS3","type":"code","data":{"code":"const PLACES = [\n { name: \"Palo Alto\", zip: \"94303\" },\n { name: \"San Jose\", zip: \"94088\" },\n { name: \"Santa Cruz\", zip: \"95062\" },\n { name: \"Honolulu\", zip: \"96803\" }\n];","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"dVL5pfZwEK","type":"paragraph","data":{"text":"Обновим render() в компоненте App, в котором, перебирая массив PLACES, создадим тег button для каждого города:"}},{"id":"DDSTFUVE81","type":"code","data":{"code":"return (\n <div className=\"App\">\n <WeatherDisplay zip={\"12345\"} />\n {PLACES.map((place, index) => (\n <button\n key={index}\n onClick={() => {\n console.log('Clicked index '+index);\n }}\n >\n {place.name}\n </button>\n ))}\n </div>\n);","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"iG9aagT0br","type":"paragraph","data":{"text":"Из массива данных мы создадим набор элементов button и назначим свойство key для каждого, чтобы React знал последовательность элементов в массиве."}},{"id":"2Qc0C3zMQf","type":"paragraph","data":{"text":"Здесь также есть обработчик событий onClick, который при нажатии будет выводить сообщение в консоль браузера. Открыв панель разработчика в браузере, вы можете увидеть логи событий. Ваше приложение должно выглядеть так:"}},{"id":"AiQ7oIfyoJ","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":37107,"url":"https://media.tproger.ru/uploads/2017/04/Props.png"},"stretched":false,"withBackground":false,"withBorder":false,"width":2126,"height":1434,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2017/04/Props.png","alt":"Пишем полноценное приложение на React с нуля за час 3","dimensions":{"width":2126,"height":1434},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/RC-e6-EUBL4J02Na9zRr0bXBX-ztdjk8QbpEIEq6EN0/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Qcm9wcy5wbmc","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/aVB6xsLJbGZB7DTMTufzMMqk9L7d9KqmoECIU53HKvo/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Qcm9wcy5wbmc","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/aOqWVN7ZS_eZnCTA5AinKoqXI7qCL9tdRLz1as9RWYA/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Qcm9wcy5wbmc","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/c5t5dGZrMIlMuFpSxskqzcS-8UxFD-4oFOLgGVBb22Q/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Qcm9wcy5wbmc","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/Ce0OnT31wkqL2ftI_j9gocOpTkdl8zKjERms6QUtIdw/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Qcm9wcy5wbmc","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/UhZ0ErdBk9Qsn5lW1gvlIsJJbAd17h3eA-Z6a017t4A/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Qcm9wcy5wbmc","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/K-lm5o4GeLS9pwYDzxS1pb1L8fI9mQVC5j2ccHqyaNQ/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Qcm9wcy5wbmc","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/7GiRm9e3Ihsbqc1VcnAyZABS0nXjld_8c4tFpy6dva0/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Qcm9wcy5wbmc","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"es9I2aCU2c","type":"paragraph","data":{"text":"На этом этапе файл App.js должен выглядеть так."}},{"id":"_BS4ulVy7H","type":"header2","data":{"text":"Состояние","level":2},"tunes":{}},{"id":"A4A9mW_msG","type":"paragraph","data":{"text":"Мы хотим, чтобы в приложении была возможность переключаться между местами, поэтому мы можем использовать состояние (state) для хранения данных в компоненте App."}},{"id":"46f07002-e617-4a79-8ce0-defe74d9da25","type":"banner-blank","data":{}},{"id":"JHf_rqosGc","type":"paragraph","data":{"text":"Сначала давайте добавим функцию-конструктор, в которой будет использоваться super(), а затем установим начальное состояние this.state:"}},{"id":"eePo2YYE9h","type":"code","data":{"code":"constructor() {\n super();\n this.state = {\n activePlace: 0,\n };\n}","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"04IPv7dxYx","type":"paragraph","data":{"text":"Функция render() может брать данные из this.state при составлении пользовательского интерфейса. Для этого мы можем использовать метод setState компонента React, который меняет состояние и перезапускает функцию render(), чтобы изменить пользовательский интерфейс."}},{"id":"KklniUwohI","type":"paragraph","data":{"text":"Применим this.state и this.setState в нашем компоненте App:"}},{"id":"Sn3gUobFVz","type":"code","data":{"code":"class App extends Component {\n constructor() {\n super();\n this.state = {\n activePlace: 0,\n };\n }\n render() {\n const activePlace = this.state.activePlace;\n return (\n <div className=\"App\">\n {PLACES.map((place, index) => (\n <button\n key={index}\n onClick={() => {\n this.setState({ activePlace: index });\n }}\n >\n {place.name}\n </button>\n ))}\n <WeatherDisplay\n key={activePlace}\n zip={PLACES[activePlace].zip}\n />\n </div>\n );\n }\n}","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"QQPebEt9pV","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":37108,"url":"https://media.tproger.ru/uploads/2017/04/State.png"},"stretched":false,"withBackground":false,"withBorder":false,"width":2126,"height":1434,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2017/04/State.png","alt":"Пишем полноценное приложение на React с нуля за час 4","dimensions":{"width":2126,"height":1434},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/5M3uWdcEYLbGmDAnHRc_rEdxfd5LHwm3FSLxjro8c_M/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9TdGF0ZS5wbmc","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/jE2rMFpefhuxVf864y4UiS_TLsJps2Fi_QxEwoRH02M/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9TdGF0ZS5wbmc","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/Nabq3gO_FmTQvYuaD9FAwuo6FibqjiPcupXNMjch0sk/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9TdGF0ZS5wbmc","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/gZ4Djeq-3xdCoBjJEhMjme4z7WOQTeoK8RmigqxxsyY/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9TdGF0ZS5wbmc","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/szpwBokMVjyNDeUmsCtyX7rCKZEa91xCdHraeKurOOk/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9TdGF0ZS5wbmc","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/H5pIIv-ujwsRyNyRAL6ArRPPnOROoPU4xsmgWQKVykk/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9TdGF0ZS5wbmc","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/fR0Mrr5VPVucHAqQXmTLCPasbaiu1VABzeS3dt5MTV4/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9TdGF0ZS5wbmc","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/IC3ZXrz1fNsBbOJsX-Hs-9a34FK-imTGPQLk0gLVyJE/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9TdGF0ZS5wbmc","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"znktoBVGDh","type":"paragraph","data":{"text":"На этом этапе файл App.js должен выглядеть так."}},{"id":"jWjRaXjUj5","type":"header2","data":{"text":"Жизненный цикл компонентов и выборка данных","level":2},"tunes":{}},{"id":"7Jb9YyqbRW","type":"paragraph","data":{"text":"Иногда нам нужно добавить императивный код (React-код обычно декларативен), который вызывается в определенное время жизни компонента. Методы жизненного цикла позволяют нам написать дополнительный код как раз для таких случаев."}},{"id":"keuU0wR7MV","type":"paragraph","data":{"text":"В этом примере мы хотим вызвать API, когда компонент загрузится на экране, для этого добавим код в componentDidMount. Обновим компонент WeatherDisplay:"}},{"id":"xfjJbVBwa4","type":"code","data":{"code":"class WeatherDisplay extends Component {\n constructor() {\n super();\n this.state = {\n weatherData: null\n };\n }\n componentDidMount() {\n const zip = this.props.zip;\n const URL = \"http://api.openweathermap.org/data/2.5/weather?q=\" +\n zip +\n \"&appid=b1b35bba8b434a28a0be2a3e1071ae5b&units=imperial\";\n fetch(URL).then(res => res.json()).then(json => {\n this.setState({ weatherData: json });\n });\n }\n render() {\n const weatherData = this.state.weatherData;\n if (!weatherData) return <div>Loading</div>;\n return <div>{JSON.stringify(weatherData)}</div>;\n }\n}","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"Tf9ox23kvu","type":"paragraph","data":{"text":"Улучшим вывод render() для красивого вывода данных:"}},{"id":"udtKhfVS_9","type":"code","data":{"code":"const weather = weatherData.weather[0];\nconst iconUrl = \"http://openweathermap.org/img/w/\" + weather.icon + \".png\";\nreturn (\n <div>\n <h1>\n {weather.main} in {weatherData.name}\n <img src={iconUrl} alt={weatherData.description} />\n </h1>\n <p>Current: {weatherData.main.temp}°</p>\n <p>High: {weatherData.main.temp_max}°</p>\n <p>Low: {weatherData.main.temp_min}°</p>\n <p>Wind Speed: {weatherData.wind.speed} mi/hr</p>\n </div>\n);","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"9rM1Y_XBl-","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":37109,"url":"https://media.tproger.ru/uploads/2017/04/DataLoad.png"},"stretched":false,"withBackground":false,"withBorder":false,"width":2326,"height":1578,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2017/04/DataLoad.png","alt":"Пишем полноценное приложение на React с нуля за час 5","dimensions":{"width":2326,"height":1578},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/Kbf3nqcfcr8tusvm7zX6QLACyxN1_K_4-ne83ickTcY/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9EYXRhTG9hZC5wbmc","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/Q790W8PSzl87gAjRoUzwR7k5-wRuewhbejevkddeQUA/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9EYXRhTG9hZC5wbmc","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/aeccluuICukKn1pUhMn2Ern0ttyptR8kwS9fCKH6gS4/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9EYXRhTG9hZC5wbmc","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/7u0RlixHhQPElL5vW7BpFpMFseV8GWLP6vC1K9_Q0Hw/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9EYXRhTG9hZC5wbmc","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/ce_cq3_3qzi0mJN3mng5eMDJse0HMHNhq9iFrvCEJ6M/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9EYXRhTG9hZC5wbmc","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/CPceASM2z_57xn51do-SSTFRYmUzm1euugkJclToAxs/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9EYXRhTG9hZC5wbmc","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/-BS1mFQqV6zxXrcy3IoV5_03sKku7RLAb9dmFv8pgxs/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9EYXRhTG9hZC5wbmc","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/C1aVScQYBUYVi42WgF0dU9s8RhNsp4vTgEvX0LI-95Q/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9EYXRhTG9hZC5wbmc","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"dlreLfMw1p","type":"paragraph","data":{"text":"На этом этапе файл App.js должен выглядеть так."}},{"id":"b-QL4UN6Mo","type":"header2","data":{"text":"Установка компонентов","level":2},"tunes":{}},{"id":"9p8B-pRgOT","type":"paragraph","data":{"text":"Наше приложение всё еще выглядит не очень красиво. Можно исправить это, добавив className (из стилей CSS) в свойства div или установив соответствующую библиотеку с помощью npm."}},{"id":"qVkJFv3kYY","type":"paragraph","data":{"text":"Bootstrap — популярный набор инструментов для стилизации пользовательского интерфейса в HTML и CSS. Установим его вместе с react-bootstrap, который предоставляет компоненты React для bootstrap:"}},{"id":"ptZe4Sjs_l","type":"code","data":{"code":"npm install --save bootstrap react-bootstrap","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"OWNzGbE_h9","type":"paragraph","data":{"text":"Импортируем стили из bootstrap в начале файла:"}},{"id":"XuhwVVXVKi","type":"code","data":{"code":"import \"bootstrap/dist/css/bootstrap.css\";","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"CUZUy3wZ27","type":"paragraph","data":{"text":"Далее импортируем из react-bootstrap компоненты, которые мы хотим использовать. Их можно найти на сайте react-bootstrap:"}},{"id":"ewMHy9Medw","type":"code","data":{"code":"import { Navbar, NavItem, Nav, Grid, Row, Col } from \"react-bootstrap\";","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"aVg7eHx6Os","type":"paragraph","data":{"text":"Заменим теги в компоненте App, чтобы вывести компоненты bootstrap:"}},{"id":"TcL4asljqA","type":"code","data":{"code":"<div>\n <Navbar>\n <Navbar.Header>\n <Navbar.Brand>\n React Simple Weather App\n </Navbar.Brand>\n </Navbar.Header>\n </Navbar>\n <Grid>\n <Row>\n <Col md={4} sm={4}>\n <h3>Select a city</h3>\n <Nav\n bsStyle=\"pills\"\n stacked\n activeKey={activePlace}\n onSelect={index => {\n this.setState({ activePlace: index });\n }}\n >\n {PLACES.map((place, index) => (\n <NavItem key={index} eventKey={index}>{place.name}</NavItem>\n ))}\n </Nav>\n </Col>\n <Col md={8} sm={8}>\n <WeatherDisplay key={activePlace} zip={PLACES[activePlace].zip} />\n </Col>\n </Row>\n </Grid>\n</div>\n","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"UBLR5FEF2f","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":37112,"url":"https://media.tproger.ru/uploads/2017/04/Bootstrap.png"},"stretched":false,"withBackground":false,"withBorder":false,"width":2126,"height":1434,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2017/04/Bootstrap.png","alt":"Пишем полноценное приложение на React с нуля за час 6","dimensions":{"width":2126,"height":1434},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/WK9B-4zsP0ImF_ZtIyxizeWdtUCM6xdhXPL6TA6M7NU/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Cb290c3RyYXAucG5n","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/-_dcGWUV7bn3yL1gNtZj1oED1OhB1ee4m5R2z8_bP7E/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Cb290c3RyYXAucG5n","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/-AB4q63L8CjMgpOzcS6H196F4_d8VUNDMqD6Dk3c9NA/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Cb290c3RyYXAucG5n","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/Bm-XasZt1LVz0MqFW6VlHswo_f_QTLsAZ8w8Rnfg6os/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Cb290c3RyYXAucG5n","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/ageBkfAXDvM_eCZZTsBHoe2-WuQp_luF8gojRhU1gcE/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Cb290c3RyYXAucG5n","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/XIv-jK_9IcplKX3mZkHJh6WYftfe0Bc1SsqVTLvYQvk/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Cb290c3RyYXAucG5n","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/720s0ojo98BWjLJtS7W7gTlBYP8sLr-udn6gyJsmtyU/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Cb290c3RyYXAucG5n","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/v7oqyjr1HB9O737L_40TOgZvh_r6PY3eXzITEOkWaRQ/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9Cb290c3RyYXAucG5n","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"neUS60mbtI","type":"paragraph","data":{"text":"Теперь наше приложение выглядит привлекательнее, но будет здорово, если мы добавим что-то от себя. Для этого установим bootswatch:"}},{"id":"04kBsQxg5m","type":"code","data":{"code":"npm install --save bootswatch","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"vpGUFBdyKB","type":"paragraph","data":{"text":"Выберите подходящее оформление на сайте bootswatch и установите его, заменив bootstrap. В нашем примере мы используем тему journal:"}},{"id":"NA2flKzsEf","type":"code","data":{"code":"import \"bootswatch/journal/bootstrap.css\";","language":"javascript","lineNumbers":false,"startLineNumber":1,"stretched":false}},{"id":"HGlR_eJ45m","type":"paragraph","data":{"text":"Окончательный вид нашего приложения:"}},{"id":"yHp1O1sGtH","type":"image","data":{"alt":"","title":"","caption":"","file":{"id":37110,"url":"https://media.tproger.ru/uploads/2017/04/Final.png"},"stretched":false,"withBackground":false,"withBorder":false,"width":2126,"height":1434,"optimizedFile":{"original":"https://media.tproger.ru/uploads/2017/04/Final.png","alt":"Пишем полноценное приложение на React с нуля за час 7","dimensions":{"width":2126,"height":1434},"additionalSizes":{"srcSet":[{"url":"https://tproger.ru/signed_image/VdgsAfZTkyDRLijp01fJbIOcP0MfKDsneTFCBpA6d68/rs:fill:766:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":766},{"url":"https://tproger.ru/signed_image/bndxBqu3nLpZYsIkdZG6rbBGczGXov0gbS2uHrn2kTk/rs:fill:1532:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":1532},{"url":"https://tproger.ru/signed_image/hPCgHZ6l1uN0BFYrD6hGtKF8cqP1viJx_osWgWg7VR0/rs:fill:686:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":686},{"url":"https://tproger.ru/signed_image/koKg4qstB6E2rPF8KmU1OCbMSKh3UYlgeguH66gOY_0/rs:fill:1372:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":1372},{"url":"https://tproger.ru/signed_image/Tc9D3HcFcPg2NSc0RvdWknsmqlG_MJSBywLTKjGr53I/rs:fill:636:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":636},{"url":"https://tproger.ru/signed_image/Z3U_VPH8EBIVCQm7H98fP-nKON82d6iBoJbkZdRaHWE/rs:fill:1272:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":1272},{"url":"https://tproger.ru/signed_image/dlArmPp12T5DV9TIuhWardjrrMtQzuMyH7E9_iWe9pI/rs:fill:466:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":466},{"url":"https://tproger.ru/signed_image/bOgjY5QluNuV3EwZabyyur6gwAPZB6MwCEtOEeWY3lQ/rs:fill:932:0:true/cb:vimg_2/f:webp/aHR0cHM6Ly9tZWRpYS50cHJvZ2VyLnJ1L3VwbG9hZHMvMjAxNy8wNC9GaW5hbC5wbmc","dpr":1,"width":932}],"sizes":[{"media":"(min-width: 1441px)","size":"766px"},{"media":"(min-width: 1281px)","size":"686px"},{"media":"(min-width: 1281px)","size":"766px"},{"media":"(min-width: 961px)","size":"766px"},{"media":"(min-width: 671px)","size":"636px"},{"media":"(min-width: 500px)","size":"466px"}]}}}},{"id":"SQgTuaWYUB","type":"paragraph","data":{"text":"Окончательный вариант App.js."}},{"id":"d_LMj9UIBv","type":"header2","data":{"text":"Развертывание (дополнительный материал)","level":2},"tunes":{}},{"id":"swFruW7t8d","type":"paragraph","data":{"text":"Прежде всего опубликуйте ваш код на Github, затем перейдите в ваш репозиторий и откройте файл ReadMe, в котором вы найдете инструкцию по развертыванию приложения на различных популярных сервисах."}},{"id":"5edu3eowlK","type":"paragraph","data":{"text":"Одним из таких сервисов является Netlify, особенно в случае, когда вы хотите использовать механизм “непрерывного развертывания”."}},{"id":"VWIwDT4Z5p","type":"header2","data":{"text":"Полезные материалы для изучения React и дальнейшей работы с ним","level":2},"tunes":{}},{"id":"V9QRYB8DKT","type":"list","data":{"style":"unordered","items":["React Native: используйте React для создания мобильных приложений.","Redux: инструмент для управления данными в больших приложениях.","Relay: библиотека для связи компонентов React и данных GraphQL.","Jest: фреймфорк для тестирования JS-кода.","Flow: инструмент для статической проверки типов."]}}],"version":"2.25.0"}

Ошибка в настройках сайта