Создания приложения на React (Гоша Дударь)

Использовать буду хуки

 - загружаю библиотеку глобально

Ввожу create-react-app и название папки youtube. Жду пока create-react-app сгенирирует приложение, а yarn установит все зависимости.

Yarn – аналог npm  от facebook. Для React логично использовать yarn

Для установки yarn прописываю

yarn add node-sass react-router-dom boostrap axios – устанавливаю зависимости

удаление папки гит

 узнать версию

Работа над компанентами

Компонент –каждый блок на сайте который содержит html css колд и имеет различный функционал

В Index.js есть такая штука

 

Чтобы её передать сюда нужно в конце App.js  прописать export default App;

 

import React from 'react';

import Info from './components/info'; - запись для подключения компонентов

import Forms from './components/form'; - название могут быть другими

import Weather from './components/weather';

 

// create companent

class App extends React.Component {

render() {

return (// возвращает только первый родительский компонент, поэтому такая фишка

<div>

<Info/> - запись для подключения компонентов

<Forms/>

<Weather/>

</div> // всё это трансформируется в js благодаря bable

);

}

}

 

export default App;

 

return – возвращает только первый найденный элемент, поэтому создаётся общий родитель и в него помещаются остальные элементы.

По правилу хорошего тона основной компонент отдельно от других и они в отдельной папке

Наглядный пример кода в компонентах. В остальных тоже самое

import React from 'react';

 

class Info extends React.Component {

render() {

return (

<div>

<h2>Погодное приложение</h2>

<p>Узнайте погоду в вашем городе</p>

</div>

);

}

}

 

export default Info; - для работы нужно его экспортировать

 

Работа с API

Для API понадобится OpenWeatherMap

API для погоды: https://openweathermap.org/

1) Регистрируюсь на сайте

2)  Send  and copy Key

3) Post in App.js

const API_KEY = 'ce5848c584fdd9f6c907e3b467244568';

4)  finded Weath API

5) Ссылка для API погоды: api.openweathermap.org/data/2.5/weather?q=Kiev,ua&appid=ВАШ_КЛЮЧ&units=metric

После запроса получу json

 

Создаю метод для вытаскивания данных из json в компоненте App

gettingWeather = async () => {

const api_url = await

fetch(`http://api.openweathermap.org/data/2.5/weather?q=Kiev,ua&appid=${API_KEY}&units=metric`);

const data = await api_url.json();

console.log(data);

}

Создание формы получения данных от пользователя и работа со свойствами

Из fetch(`http://api.openweathermap.org/data/2.5/weather?q=Kiev ,ua &appid=${API_KEY}&units=metric`); удалю ua – код города,выносить чисто на названии

 

В форме подшаманил

import React from 'react';

 

class Form extends React.Component {

render() {

return (

<form>

<input type='text' name='city' placeholder='Город'/>

<button>Get Weather</button>

</form>

);

}

}

 

export default Form;

 

<input/> = <input></input> не знал что так можно закрывать тег

 

Свойства – оч.простая штука. передача данных в компонент(переменные /методы/ и т.п)

Как передать свойства?

<Forms weatherMethod={ this. gettingWeather}/>

weatherMethod – передаю переменную в компонент Form со значением this. gettingWeather

Теперь в компаненте Form я могу обращаться к методу gettingWeather и работать с ним

Для срабатывания метода при нажати нужно добавить обработчик событий onSubmit

<form onSubmit – вызывается тогда когда идёт нажатие на кнопку в форме>

Указываю что буду вызывать

Props- свойства которые передаются в данный компонент к ним же обращаемся и обращаюсь к тому свойству которое передаю

<form onSubmit={ this. props.weatherMethod}>

 

Сделаю чтобы страница не обнавлялась при запросе, а то данные исчезают

gettingWeather = async (e) => {

e.preventDefault(); - отменил стандартное поведение

После если нажать на Get Weather и провалюсь в ноцоль

Теперь сделаю для любого горада

const city = e.target.elements.city.value;

e.target –тот объект с которым я сейчас работаю, т.к метод вызывается в form я и работаю с форм.обращаюсь ко всем элементам формы.далее обращаюсь к конкретному полю по имени name.и берём его значение

И вывел переменную в fetch

import React from 'react';

import Info from './components/info';

import Forms from './components/form';

import Weather from './components/weather';

 

const API_KEY = 'ce5848c584fdd9f6c907e3b467244568';

// create companent

class App extends React.Component {

 

gettingWeather = async (e) => {

e.preventDefault();

const city = e.target.elements.city.value;

const api_url = await

fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`);

const data = await api_url.json();

console.log(data);

}

render() {

return (// возвращает только первый родительский компонент, поэтому такая фишка

<div>

<Info/>

<Forms weatherMethod={ this. gettingWeather}/>

<Weather/>

</div> // всё это трансформируется в js благодаря bable

);

}

}

export default App;

 

import React from 'react';

class Form extends React.Component {

render() {

return (

<form onSubmit={ this. props.weatherMethod}>

<input type='text' name='city' placeholder='Город'/>

<button>Get Weather</button>

</form>

);

}

}

export default Form;

Вывод погодной информации в компоненте Weather

Нужно иметь некую переменную/объект куда буду сохранять все данные

Для этобо есть специальные объект. Выьираю нужные данные. И прописываю в App

state = {

temp: undefined,

city: undefined,

country: undefined,

sunrise: undefined,

sunset: undefined,

error: undefined

}

 

class App extends React.Component {

 

state = {

temp: undefined,

city: undefined,

country: undefined,

sunrise: undefined,

sunset: undefined,

error: undefined

}

 

gettingWeather = async (e) => {

e.preventDefault();

const city = e.target.elements.city.value;

const api_url = await

fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${API_KEY}&units=metric`);

const data = await api_url.json();

console.log(data);

 

 

this. setState({ присваиванию нужные значение

temp: data.main.temp, и т.д

});

 – буду использовать this т.к {state} находиться в этом классе

} метод setState – позваляет установить state

Теперь предаём эти компоненты в Weather при помощи средств

<Weather

temp= { this. state.temp}

name= { this. state.name}

country= { this. state.country}

country= { this. state.sunrise}

country= { this. state.sunset}

error= { this. state.error}

/>

Еслии мы их предаёт, то в компаненте Weather можем их принимать

 

class Weather extends React.Component { render() { return ( <div> { this. props.city} </div> ); } } Если ввести город и нажать Get Weather, то получу данные

Изначально всё будет пусто т.к   state = { temp: undefined, city: undefined, country: undefined, sunrise: undefined, sunset: undefined, error: undefined }

Условие.