Scribd
Upload
27 views

React Codes

The document discusses how to create a React app using create-react-app and import React Router. It also shows examples of fetching data from an API using fetch, axios, and async/await. It demonstrates using useState and useEffect hooks to manage component state and data fetching. The last section contains CSS code for styling a header component.

Uploaded by

zhusia
Copyright
© © All Rights Reserved
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
27 views

React Codes

The document discusses how to create a React app using create-react-app and import React Router. It also shows examples of fetching data from an API using fetch, axios, and async/await. It demonstrates using useState and useEffect hooks to manage component state and data fetching. The last section contains CSS code for styling a header component.

Uploaded by

zhusia
Copyright
© © All Rights Reserved
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
You are on page 1/ 6

npx create-react-app

npm i react-router-dom

fetch-метод отправки запросов на сервер (не нужно скачивать)

fetch('https://fakestoreapi.com/products')

.then(res=>res.json())

.then(json=>console.log(json))

axios - метод отправки запросов на сервер (нужно скачивать)

npm i axios

axios('https://fakestoreapi.com/products')

.then(result=>console.log(result))

async/await const getData = async() => {

const data = await axios('https://fakestoreapi.com/products')

console.log(data)

getData()

useEffect, useState

useEffect = помогает отрабатывать

useState = переменная глобального состояния

import React, { useEffect, useState } from 'react'

const [products, setProducts] = useState([])

products - принести

setProducts = получить
console.log(products)

const Home = () => {

const [products, setProducts] = useState([])

useEffect(() => {

const getData = async () => {

const { data } = await axios('https://fakestoreapi.com/products')

setProducts(data)

getData()

}, [])

console.log(products)

return (

<div className='cards'>

products.map((el, idx)=>(

<Card key={idx} name={el.title} img = {el.image} price={el.price}/>


))

</div>

mixin

// .header__wrapper {

// display: flex;

// padding: 25px;

// align-items: center;

// }

// .header__link {

// font-weight: 400;

// font-size: 14px;

// line-height: 150%;
// align-items: center;

// color: #343030;

// margin-left: 48px;

// padding: 38px 0;

// }

// .header__search input {

// text-align: center;

// height: 48px;

// width: 295px;

// border: 1px solid #E1E1E1;

// margin-left: 111px;

// padding: 14px 60px 14px 16px;

// }

// .header__search input::placeholder {

// font-family: 'Merriweather';

// font-style: normal;

// font-weight: 400;

// font-size: 14px;

// line-height: 150%;

// display: flex;

// align-items: center;
// color: #9F9F9F;

// }

// .header__search input:focus {

// outline: none;

// }

// .header__btn {

// height: 48px;

// background: #403432;

// border-radius: 0px;

// width: 122px;

// font-family: 'Merriweather';

// font-style: normal;

// font-weight: 700;

// font-size: 14px;

// line-height: 150%;

// color: #FFFFFF;

// padding: 13px 35px;

// }

// .header__btn:hover {

// background-color: #776763;

// border: none;
// }

You might also like