Sergey Kluchkovsky kaineer

План занятия

Создаем страницу, например /page4
На страницу помещаем два компонента
В каждом компоненте рендерим один текстовый инпут
Изменение текста в одном инпуте должно приводить к немедленному изменению текста в другом и наоборот

$ npm install -SE react-redux @reduxjs/toolkit

// src/slices/color.js

Предположим, компонент будет называться LikeButton

src/
 components/

Общее замечание: надо привыкать раскладывать компоненты по отдельным каталогам и файлам

const body
- НЕ НАДО называть компоненты именами существующих тегов. Именно для этого их обычно называют с БОЛЬШОЙ буквы
- Тег body как правило НЕ заменяют компонентом, просто потому, что первый же компонент находится внутри body

	//
	import { useState, useEffect } from 'react';
	import { useSelector, useDispatch } from 'react-redux';
	import { NewTask } from './NewTask'
	import { TaskList } from './TaskList'
	import { TodosSlice } from '../../slices/todo';

	export const Todos = () => {
	const {
	selectors: { getTasks },

	//
	import { createSlice } from '@reduxjs/toolkit'

	const localStorageKey = 'todos/items';

	const initialState = () => {
	try {
	const storageTasks = JSON.parse(
	localStorage.getItem(localStorageKey));
	return { tasks: storageTasks }

	import { useEffect, useState, useRef } from 'react';
	import { useParams } from 'react-router-dom'

	import classes from './page-user.module.css'

	const InputRow = ({ id, title, value, setValue }) => {
	return (
	<div className={ classes.row }>
	<label htmlFor={ id }>{ title }</label>
	<input

	import { useEffect, useState } from 'react';
	import { useParams } from 'react-router-dom'

	import classes from './page-user.module.css'

	export const PageUser = () => {
	const { id } = useParams();
	const [ user, setUser ] = useState({});

	useEffect(() => {

	import classes from './page.module.css'
	import { useRef, useState } from 'react'

	export const PageFetch = () => {
	const urlRef = useRef("");
	const resultRef = useRef("");
	const bodyRef = useRef("{}");
	const [method, setMethod] = useState("GET");

	const hasBody = ["POST", "PUT"].includes(method);