Scribd
Upload
40 views6 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd
40 views6 pages

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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as RTF, PDF, TXT or read online on Scribd

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