Привет мир!
В сегодняшней повестке дня я расскажу о другом проекте на основе React.js. На этот раз мы будем делать веб-сайт для отслеживания COVID-19. Короче говоря, этот веб-сайт использует Coronavirus API от Mathdroid, а затем переделывает весь веб-сайт в причудливую карточку с использованием Chart.js и Material UI.
Вот пример готового проекта из учебника, которому я следовал:
Этот проект будет в основном представлять собой интерфейсную работу по проектированию пользовательского интерфейса, так что будьте готовы к большому количеству разметки JSX-кода!
Установка зависимостей
Вот список зависимостей, которые вам понадобятся:
- Node.js: вам нужно будет использовать диспетчер пакетов Node,
npm, чтобы создать приложение React. - Axios: Помните Axios из нашего проекта CRUD? Axios используется для отправки HTTP-запросов с внешнего интерфейса.
react-chartjs-2: По сути, это оболочка React для Chart.js, которая предоставляет простые, понятные и привлекательные диаграммы JavaScript на основе HTML5 для вашего веб-сайта.react-countup: оболочка компонента React вокруг CountUp.js, которая используется для создания анимации, отображающей числовые данные.classnames: простая утилита для условного соединения имен классов вместе.
Чтобы установить эти зависимости, сначала загрузите Node.js. Вы можете скачать его через Chocolatey, популярный менеджер пакетов для Windows.
choco install nodejs.install
Затем создайте каталог вашего проекта. Вы можете назвать это как угодно; Я назову его coronatracker. Запустите mkdir coronatracker и cd coronatracker. Как только вы окажетесь в каталоге вашего проекта, инициализируйте приложение React, используя:
npx create-react-app ./
Запись create-react-app ./ означает, что вы, по сути, инициализируете приложение React в текущем каталоге. Если вы не создали свой каталог coronatracker, вы можете сразу же запустить npx create-react-app coronatracker и сделать две вещи одной командой.
После этого вы можете установить модули Node, используя следующее:
node install axios react-chartjs-2 react-countup classnames
Это загрузит упомянутые зависимости и сохранит их в файле node_modules вашего проекта.
Теперь, поскольку мы собираемся начать все с нуля, вам придется удалить все внутри папки src. Для этого просто запустите следующую команду в корневом каталоге:
rmdir src /s`
Теперь заново создайте каталог src, и мы можем начать программировать!
Создание приложения
Во-первых, нам нужно создать файл index.js. Под капотом create-react-app используется Webpack с html-webpack-plugin. Конфигурация в Webpack указывает, что точка входа приложения находится в src/index.js. Поэтому первым файлом, который читает React.js, является index.js, а затем следуют другие модули.
источник/index.js
Теперь давайте создадим наш файл index.js:
import React from 'react';
import ReactDom from 'react-dom';
import App from './App';
ReactDom.render(<App />, document.getElementById('root));
Код в последней строке — это код ReactDOM.render(), который имеет следующую структуру:
ReactDOM.render(element, container[callback])
Запуск приведенного выше кода отобразит элемент React в DOM в предоставленном контейнере и вернет ссылку на компонент (или null для компонентов без состояния). В нашем случае мы будем отображать компонент App внутри идентификатора root нашей HTML-страницы.
источник/App.js
В index.js мы визуализировали компонент App в root. Теперь мы создадим фактический компонент App, используя следующий код:
import React, { Component } from 'react';
class App extends Component {
render(){
return(
<h1>COVID-19</h1>
)
}
}
export default App;
Как видите, мы создали простой компонент без состояния, который будет отображать COVID-19. Затем мы экспортируем наш компонент, чтобы его можно было использовать в других файлах.
Для следующего шага создайте два новых каталога: components и api. Внутри папки components создайте три новые папки с именами cards, charts и countrypicker. Не беспокойтесь о том, чем заполнить эти папки. Мы доберемся до этого в ближайшее время!
API/index.js
Теперь мы собираемся создать еще один файл index.js, который отвечает за отправку HTTP-запросов на URL-адрес API с помощью Axios. Мы создадим три разных метода:
- Извлечение данных: просто извлеките данные о подтвержденных, выздоровевших и смертельных случаях с последней обновленной датой.
- Извлекать ежедневные данные: этот метод будет извлекать данные об общем количестве подтвержденных случаев и числе погибших.
- Выборка стран: этот метод вернет список доступных стран.
Код для этого запроса API следующий:
import axios from 'axios';
const url = 'https://covid19.mathdro.id/api';
export const fetchData = async (country) => {
let changeableurl = url;
if(country){
changeableurl = `${url}/countries/${country}`
}
try{
const{ data: {confirmed, recovered, deaths, lastUpdate} } = await axios.get(changeableurl);
return{ confirmed, recovered, deaths, lastUpdate}'
}
catch(error){
console.log(error);
}
};
export const fetchDailyData = async () => {
try{
const {data} = await axios.get(`${url}/daily`);
return data.map(({confirmed, deaths, reportDate: date}) => (
{
confirmed: confirmed.total,
deaths: deaths.total,
date
}));
}
catch(error){
return error;
}
};
export const fetchCountries = async () => {
try{
const {data: {countries}} = await axios.get(`${url}/countries`);
return countries.map((country) => country.name);
}
catch(error){
return error
}
};
Начнем с первой функции, fetchData. Здесь мы создаем асинхронную функцию, которая принимает country в качестве параметра. Затем мы создаем переменную с именем changeableurl, которая имеет значение URL-адреса нашего API. Причина, по которой он изменчив, заключается в том, что его можно настроить в соответствии со страной, которую мы хотим просмотреть. Например, если вы хотите просмотреть данные о коронавирусе в Индонезии, вы можете запустить https://covid19.mathdro.id/api/countries/indonesia.
Далее параметр country будет помещен внутрь условного оператора. Помимо следования учебнику, я понятия не имею, почему писатель написал это именно так. Если бы я написал это, это было бы так:
export const fetchData = async (country) => {
try{
const { data: {confirmed, recovered, deaths, lastUpdate}} = await axios.get(`${url}/countries/${country}`);
}
Это интересно. Я отчитаюсь о том, что произошло.
Вернемся к fetchData, остальные действия основаны на обещаниях, основанных на результатах.
fetchDailyData будет получать общее количество подтвержденных случаев и количество смертей по всему миру. Поскольку выбирать не нужно, мы создадим асинхронную функцию без каких-либо параметров. Здесь мы отправляем запрос Axios GET на http://covid19.mathdro.id/api/daily. (Теперь я попытался отправить запрос GET на этот URL-адрес, но он опубликовал случаи только в Китае. Я вернусь к этому позже).
Последняя функция не имела особого смысла. Я попытался просмотреть URL-адрес API, но получил 404. Может быть, я подожду и посмотрю, как появится проект.
Вывод
Вот и все на сегодня, друзья! Теперь я нашел новый способ наслаждаться учебными пособиями: создавать их быстро, но четко документировать; убедитесь, что я знаю причину каждой строки кода. Это более увлекательно, так как это больше подход к активному обучению, чем бездумный ввод кода. Возможно, это сработало, когда я не понимал ключевых слов, связанных с веб-разработкой. Но теперь, когда у меня есть некоторое представление, я должен быть в состоянии погрузиться глубже в код, написанный несколькими другими людьми.
