YakovSPb/react.js

## 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