YakovSPb · December 27, 2020 19:32
diff --git a/react.js b/react.js
 React
 ==============

 Компонент - это самостоятельная часть приложения (функция)в, содежит часть логики , описывает свой вид. Можно использовать много раз.
 Компонент - это функция, которая принимается Props и возращает разметку jsx.
 Компоненты называются с большой буквы.
 Селектор - это фукнция, которая принимает на вход state и возращает какой-то значение
 SPA - single page application. Одна страница с небольшим html, куда приходит много JS

 Настройка окружения
 ===============
 1. Установка глобально
 npm i -g create-react-app
 2. Установка проекта
 npm create-react-app my-app
 или 
 npx create-react-app my-app

 npm start - запуск сервера
 npm test - тестирование приложения
 npm build - сборка проекта

 3. В папке src оставляем только index.js

 4. В папке public только index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <title>React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
 </html>


 Создание приложения
 ======
 В папке src создаем папку components

 1) Создаем файл js, например, App.js
 2) Вверху импортируем реакт
 import React from 'react'
 3) в нем экспортируем в низу файла
 export default App
 4) Там где используем компонент вставляем
 import Article from './Article';

 5. Получается
 import React from 'react';

 const Header = () => {
 	return (
    <header className = "header">
      <img src='https://i.pinimg.com/736x/06/ef/81/06ef81f3672dbb43c7bc580bb36c14dc.jpg' />
    </header>
 		)
 }

 export default  Header;

 Подключение стилей
 =================
 1) Создаем отдельный файл css по названию компонента
 2) в Header.js пишем import './Header.css'
 3) чтобы css работал только в компоненте нужно называть Header.module.csss


 import s from './Navbar.module.css';

    <nav className ={s.nav}>


 4. Если нужно два стиля, типа.item.active{color: gold;}
 
 <div className={`${s.item} ${s.active}}>Profile</div>
 или 
 <div className={s.dialog + ' ' + s.active}>Yakov</div>


 Props - параметр компонента
 ========
 1. Добавляем пропс
 const Post = (props) => {
 	return (
    {props.message}
    )
 }
 2. При выводе компонента добавляем аргумент
 <Post message='Hi, how are you?' />


 Меню, ссылки, route
 =============
 1. Установить
 npm i react-router-dom -save
 2. импортируем
 import {BrowserRouter, Route} from 'react-router-dom';
 3. Там где меню пишем
  	<BrowserRouter>
    <div className='app-wrapper'>
      <Header />
      <Navbar />
      <div className ='app-wrapper-content'>
      	<Route path='/dialogs' component={Dialogs} />
      	<Route path='/profile' component={Profile}/>
      </div>
    </div>
    </BrowserRouter>
 4. В нав пишем
 <NavLink to='/profile'>Profile<NavLink>

  и подключам модуль
 import {NavLink} from 'react-router-dom';

 5. активная ссылка
 <NavLink to='/profile' activeClassName={s.activeLink}>Profile</NavLink>

 6. exact добавляем, если нужно точное совпадения пути
   <Route exact path='/dialogs' component={Dialogs} />



 Массивы Map
 =================
 1. создаем  массив с шаблоном компонентом
 let dialogsElements = dialogsData.map(e => <DialogItem name={e.name} id={e.id} />);
 2. вставляем 
 				<div className={s.dialogsItems}>
 					{dialogsElements}
 				</div>

 3. В src создаем папку redux и в нем файл state.js, в него сохраняем данные по страницам
 let state = {
 	profilePage: {
 		posts: [
 			{id: 1, message: 'Hi, how are you', count: 12},
 			{id: 2, message: 'It\'s my first post', count: 11},
 		],
 		dialogs: [
 			{id: 1, name: 'Yakov'},
 		],
 	}
 	messagesPage: {
 		messages: [
 			{id: 1, message: 'Hi'},
 		]
 	}
 }

 export default state;

 и передаем props до нужного уровня


    <App state={state} />

 Там где ройты передаем props так
      	<Route path='/profile' render={ () => <Profile state={props.state.profilePage} / > } />


 onClick, ref, VirtualDOM
 ====================
 Обращаемся к дом элементу(не виртуальному)
 1) создаем привязку
 <textarea ref={newPostElement}></textarea>
 <button onClick={ () =>  { addPost }>Add post</button>
 2) Создаем ссылку
 	let newPostElement = React.createRef();
 3) Вставляем ссылку в функцию
 	let addPost = () => {
 			 let text = newPostElement.current.value;
 			 alert(text)
 	}


 Прокидываем callback через props
 ======================
 1. Создаем функцию в state.js и экспортируем ее
 export let addPost = (postMessage) => {
 	let newPost = {
 		id: 5,
 		message: postMessage,
 		count: 0
 	}
 	state.profilePage.post.push(newPost);
 }
 2. импортируем в index.js
 import {addPost} from './redux/state';



 Добавление поста на стену, ререндинг дома
 ==================

 1. на странице index.js все оборачиваем в функцию renderEntireTree и вызваем
 let renderEntireTree = () => {
 ReactDOM.render(
  <React.StrictMode>
   <BrowserRouter>
    	<App state={state} addPost={addPost} />
    </BrowserRouter>
  </React.StrictMode>,  document.getElementById('root')
 );
 }

 renderEntireTree();

 2. Создаем файл render.js
 туда переносим

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {addPost} from './redux/state';
 import {BrowserRouter, Route} from 'react-router-dom';



 export let renderEntireTree = (state) => {
 ReactDOM.render(
   <BrowserRouter>
    	<App state={state} addPost={addPost} />
    </BrowserRouter>, document.getElementById('root')
 );
 }




 3. В index.js оставляем

 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import {renderEntireTree} from "./render";

 renderEntireTree();

 // If you want to start measuring performance in your app, pass a function
 // to log results (for example: reportWebVitals(console.log))
 // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
 reportWebVitals();


 ==================
 store - это хранилище даннных. ООП объект. К state обращаемся через store
 State(состояние) в React - это объект простого JS, позволяющий отслеживать данные компонента.
 Все значения в state меняются через редюсер, в редюсер приходит action и state меняется

 =================
 dispatch(action) - универсальный метод для изменения чего-либо
 Мы диспачем какие-либо действия из UI и эти действия преобразуют state
 UI пинает BLL(бизнес логику) через диспатч акшинов
 BLL(бизнес логику) - это redux
 UI (user interface, react) - взаимодействует с пльзователем и с бизнесом (BLL)
 thunk - это функция, которая делает ассинхронную задачу, и которая умеет диспачить обычные action, санку можно тоже задиcпачить и store ее запустит

 props
 ===========
 props - это объект, которые передает в компоненту данные

 action
 ===========
 action - это объект, у которого обязательно есть свойство-тип


 Все начинается с файла index.js


 1. Оборачиваем вса в index.js в функцию и вызываем ее

 let rerenderEntireTree = (state) => {
 	ReactDOM.render(
 		<React.StrictMode>
 		<BrowserRouter>
 			<App state={state} dispatch={store.dispatch.bind(store)} />
 		</BrowserRouter>
 		</React.StrictMode>,  document.getElementById('root')
 		);
 }

 rerenderEntireTree(store.getState());

 2. Один раз оборачивем в BrowserRouter, чтобы ссылки работали

 3. компонент это функция, а тег компонента и есть вызов этой функции

 4. Мы отрисовываем компоненту, через атрибуты передеаем пропсы
 Через атрибуты значения и залезают внутрь объекта пропс

 5. В state передаем объекты либо примитивы
 в dispatch передаем callbackи (методы)
 <App state={state} dispatch={store.dispatch.bind(store)} />

 6. Глобальной компонентой <BrowserRouter> вызываем только один раз
 Внутри App.js настраиваем роуты
 Роуты - это компоненты, которые следят за урлом
 Когда будет совподать урл вызовет колбэк render
 <Route exact path='/dialogs' render={ () => <Dialogs  state={props.state.dialogsPage} /> } />

 7. Чтобы происходила смена урлов без прегазгрузки мы используем ссылки NavLink
 компонент NavLink меняет урл без перезагрузки
 	<NavLink to='/profile' activeClassName={s.activeLink}>Profile</NavLink>

 8. Начало приложения начинается с формирования state, отталкиваясь от UI(макета)
 При общении с заказчиком формируешь state, узнавая какая кнопка за что отвечает



 9. reducer - это функция, которая принимает старый state и action и возвращает новый state или старый если action не подошел
 thunk - это функция, которая делает ассинхронную задачу и которая умеет диспачить обычные экшене, и санки тоже можно диспачить

 10. Redux - это библиотека
 redux создает store

 установка
 =====
 npm i redux --save

 1. Создаем файл redux/redux.store.js
 import {createStore} from "redux";

 let store = createStore();


 Контайнерная компонента - 
 это обертка для компонента, чтобы общаться со store.
 Она рисует другую компоненту и знабжает данными.

 Функциональная компонента
 Презентанционная компонента - принимает пропсы и возращает jsx и все. Рисует разметку.
 ==================

 Контекст
 ==================
 const MyContext = React.createContext(defaultValue)
 Оборачиваем компоненты
 <MyContext.Provider value={store}

 Обращаемся
 <MyContext.Consumer>
 {value => }
 <MyContext.Consumer>


 Есть еще библиотека react-redux
 =========
 Прячет детали redux
 1. Установка
 npm i react-redux --save

 import {Provider} from 'react-redux'



 Interface - это то что снаружи и что видно, с чем взаимодействует пользователь.
 ======================



 Axios
 =======
 npm i axios --save

 import * as axios from 'axios'



 Запрос к серверу!
 =====
 При запросе к серверу код сохранять в api/api.js



 Redirect
 ===========
 1. 
 import {Redirect} from 'react-router-dom';
 2.
 if(!props.isAuth) return <Redirect to={"/login"} />;


 HOC (хок) - это функция, которая принимает на входе компонент, а
 возращает другой компонент
 ==============
 	
 react
	React
	==============

	Компонент - это самостоятельная часть приложения (функция)в, содежит часть логики , описывает свой вид. Можно использовать много раз.
	Компонент - это функция, которая принимается Props и возращает разметку jsx.
	Компоненты называются с большой буквы.
	Селектор - это фукнция, которая принимает на вход state и возращает какой-то значение
	SPA - single page application. Одна страница с небольшим html, куда приходит много JS

	Настройка окружения
	===============
	1. Установка глобально
	npm i -g create-react-app
	2. Установка проекта
	npm create-react-app my-app
	или
	npx create-react-app my-app

	npm start - запуск сервера
	npm test - тестирование приложения
	npm build - сборка проекта

	3. В папке src оставляем только index.js

	4. В папке public только index.html
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<title>React App</title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>


	Создание приложения
	======
	В папке src создаем папку components

	1) Создаем файл js, например, App.js
	2) Вверху импортируем реакт
	import React from 'react'
	3) в нем экспортируем в низу файла
	export default App
	4) Там где используем компонент вставляем
	import Article from './Article';

	5. Получается
	import React from 'react';

	const Header = () => {
	return (
	<header className = "header">
	<img src='https://i.pinimg.com/736x/06/ef/81/06ef81f3672dbb43c7bc580bb36c14dc.jpg' />
	</header>
	)
	}

	export default Header;

	Подключение стилей
	=================
	1) Создаем отдельный файл css по названию компонента
	2) в Header.js пишем import './Header.css'
	3) чтобы css работал только в компоненте нужно называть Header.module.csss


	import s from './Navbar.module.css';

	<nav className ={s.nav}>


	4. Если нужно два стиля, типа.item.active{color: gold;}

	<div className={`${s.item} ${s.active}}>Profile</div>
	или
	<div className={s.dialog + ' ' + s.active}>Yakov</div>


	Props - параметр компонента
	========
	1. Добавляем пропс
	const Post = (props) => {
	return (
	{props.message}
	)
	}
	2. При выводе компонента добавляем аргумент
	<Post message='Hi, how are you?' />


	Меню, ссылки, route
	=============
	1. Установить
	npm i react-router-dom -save
	2. импортируем
	import {BrowserRouter, Route} from 'react-router-dom';
	3. Там где меню пишем
	<BrowserRouter>
	<div className='app-wrapper'>
	<Header />
	<Navbar />
	<div className ='app-wrapper-content'>
	<Route path='/dialogs' component={Dialogs} />
	<Route path='/profile' component={Profile}/>
	</div>
	</div>
	</BrowserRouter>
	4. В нав пишем
	<NavLink to='/profile'>Profile<NavLink>

	и подключам модуль
	import {NavLink} from 'react-router-dom';

	5. активная ссылка
	<NavLink to='/profile' activeClassName={s.activeLink}>Profile</NavLink>

	6. exact добавляем, если нужно точное совпадения пути
	<Route exact path='/dialogs' component={Dialogs} />



	Массивы Map
	=================
	1. создаем массив с шаблоном компонентом
	let dialogsElements = dialogsData.map(e => <DialogItem name={e.name} id={e.id} />);
	2. вставляем
	<div className={s.dialogsItems}>
	{dialogsElements}
	</div>

	3. В src создаем папку redux и в нем файл state.js, в него сохраняем данные по страницам
	let state = {
	profilePage: {
	posts: [
	{id: 1, message: 'Hi, how are you', count: 12},
	{id: 2, message: 'It\'s my first post', count: 11},
	],
	dialogs: [
	{id: 1, name: 'Yakov'},
	],
	}
	messagesPage: {
	messages: [
	{id: 1, message: 'Hi'},
	]
	}
	}

	export default state;

	и передаем props до нужного уровня


	<App state={state} />

	Там где ройты передаем props так
	<Route path='/profile' render={ () => <Profile state={props.state.profilePage} / > } />


	onClick, ref, VirtualDOM
	====================
	Обращаемся к дом элементу(не виртуальному)
	1) создаем привязку
	<textarea ref={newPostElement}></textarea>
	<button onClick={ () => { addPost }>Add post</button>
	2) Создаем ссылку
	let newPostElement = React.createRef();
	3) Вставляем ссылку в функцию
	let addPost = () => {
	let text = newPostElement.current.value;
	alert(text)
	}


	Прокидываем callback через props
	======================
	1. Создаем функцию в state.js и экспортируем ее
	export let addPost = (postMessage) => {
	let newPost = {
	id: 5,
	message: postMessage,
	count: 0
	}
	state.profilePage.post.push(newPost);
	}
	2. импортируем в index.js
	import {addPost} from './redux/state';



	Добавление поста на стену, ререндинг дома
	==================

	1. на странице index.js все оборачиваем в функцию renderEntireTree и вызваем
	let renderEntireTree = () => {
	ReactDOM.render(
	<React.StrictMode>
	<BrowserRouter>
	<App state={state} addPost={addPost} />
	</BrowserRouter>
	</React.StrictMode>, document.getElementById('root')
	);
	}

	renderEntireTree();

	2. Создаем файл render.js
	туда переносим

	import React from 'react';
	import ReactDOM from 'react-dom';
	import './index.css';
	import App from './App';
	import reportWebVitals from './reportWebVitals';
	import {addPost} from './redux/state';
	import {BrowserRouter, Route} from 'react-router-dom';



	export let renderEntireTree = (state) => {
	ReactDOM.render(
	<BrowserRouter>
	<App state={state} addPost={addPost} />
	</BrowserRouter>, document.getElementById('root')
	);
	}




	3. В index.js оставляем

	import React from 'react';
	import ReactDOM from 'react-dom';
	import './index.css';
	import App from './App';
	import reportWebVitals from './reportWebVitals';
	import {renderEntireTree} from "./render";

	renderEntireTree();

	// If you want to start measuring performance in your app, pass a function
	// to log results (for example: reportWebVitals(console.log))
	// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
	reportWebVitals();


	==================
	store - это хранилище даннных. ООП объект. К state обращаемся через store
	State(состояние) в React - это объект простого JS, позволяющий отслеживать данные компонента.
	Все значения в state меняются через редюсер, в редюсер приходит action и state меняется

	=================
	dispatch(action) - универсальный метод для изменения чего-либо
	Мы диспачем какие-либо действия из UI и эти действия преобразуют state
	UI пинает BLL(бизнес логику) через диспатч акшинов
	BLL(бизнес логику) - это redux
	UI (user interface, react) - взаимодействует с пльзователем и с бизнесом (BLL)
	thunk - это функция, которая делает ассинхронную задачу, и которая умеет диспачить обычные action, санку можно тоже задиcпачить и store ее запустит

	props
	===========
	props - это объект, которые передает в компоненту данные

	action
	===========
	action - это объект, у которого обязательно есть свойство-тип


	Все начинается с файла index.js


	1. Оборачиваем вса в index.js в функцию и вызываем ее

	let rerenderEntireTree = (state) => {
	ReactDOM.render(
	<React.StrictMode>
	<BrowserRouter>
	<App state={state} dispatch={store.dispatch.bind(store)} />
	</BrowserRouter>
	</React.StrictMode>, document.getElementById('root')
	);
	}

	rerenderEntireTree(store.getState());

	2. Один раз оборачивем в BrowserRouter, чтобы ссылки работали

	3. компонент это функция, а тег компонента и есть вызов этой функции

	4. Мы отрисовываем компоненту, через атрибуты передеаем пропсы
	Через атрибуты значения и залезают внутрь объекта пропс

	5. В state передаем объекты либо примитивы
	в dispatch передаем callbackи (методы)
	<App state={state} dispatch={store.dispatch.bind(store)} />

	6. Глобальной компонентой <BrowserRouter> вызываем только один раз
	Внутри App.js настраиваем роуты
	Роуты - это компоненты, которые следят за урлом
	Когда будет совподать урл вызовет колбэк render
	<Route exact path='/dialogs' render={ () => <Dialogs state={props.state.dialogsPage} /> } />

	7. Чтобы происходила смена урлов без прегазгрузки мы используем ссылки NavLink
	компонент NavLink меняет урл без перезагрузки
	<NavLink to='/profile' activeClassName={s.activeLink}>Profile</NavLink>

	8. Начало приложения начинается с формирования state, отталкиваясь от UI(макета)
	При общении с заказчиком формируешь state, узнавая какая кнопка за что отвечает



	9. reducer - это функция, которая принимает старый state и action и возвращает новый state или старый если action не подошел
	thunk - это функция, которая делает ассинхронную задачу и которая умеет диспачить обычные экшене, и санки тоже можно диспачить

	10. Redux - это библиотека
	redux создает store

	установка
	=====
	npm i redux --save

	1. Создаем файл redux/redux.store.js
	import {createStore} from "redux";

	let store = createStore();


	Контайнерная компонента -
	это обертка для компонента, чтобы общаться со store.
	Она рисует другую компоненту и знабжает данными.

	Функциональная компонента
	Презентанционная компонента - принимает пропсы и возращает jsx и все. Рисует разметку.
	==================

	Контекст
	==================
	const MyContext = React.createContext(defaultValue)
	Оборачиваем компоненты
	<MyContext.Provider value={store}

	Обращаемся
	<MyContext.Consumer>
	{value => }
	<MyContext.Consumer>


	Есть еще библиотека react-redux
	=========
	Прячет детали redux
	1. Установка
	npm i react-redux --save

	import {Provider} from 'react-redux'



	Interface - это то что снаружи и что видно, с чем взаимодействует пользователь.
	======================



	Axios
	=======
	npm i axios --save

	import * as axios from 'axios'



	Запрос к серверу!
	=====
	При запросе к серверу код сохранять в api/api.js



	Redirect
	===========
	1.
	import {Redirect} from 'react-router-dom';
	2.
	if(!props.isAuth) return <Redirect to={"/login"} />;


	HOC (хок) - это функция, которая принимает на входе компонент, а
	возращает другой компонент
	==============

	react