#js #статья

Всем привет, давно меня тут не было :D

Да, знаю что пропал, мой проёб, но ничего не мог поделать.

Ладно, сегодня мы поговорим про реакт, а именно редакс, а именно как правильно с ним работать. Эта статья больше для продвинутых, но всё же советую прочесть всем, может что-то запомните.

В общем, сегодня мы рассмотрим 3 способа работы с редаксом:

- HOC
- Hooks ( здесь будут подвиды )

И для начала сделаем какой-то user-reducer:

let initialState = {
users: [
{id: 0, name: "Dima"},
{id: 1, name: "Alex"},
{id: 2, name: "Maks"},
]
}

export const usersReducer = (state = initialState, action) => {
switch (action.type) {
case "SET_USERS":
return {
users: [...state.users, action.users]
}
}
return state;
}

export const userActions = {
setUsers: (users) => ({type: "SET_USERS", users})
}


export const setUsersThunkCreator = () => {
return async (dispatch) => {
let data = await clientApi.getAlbums()
console.log(data)
dispatch(userActions.setUsers(data))
}
}


Начнём с HOC.

HOC - Hight Order Component.

В чём суть? Суть в том что мы создаём контейнерную компоненту.

ДЕМО:

const User = props => {...}

export const UserContainer = props => <User />

Потом мы это добро оборачиваем в connect.

Я не буду полностью расписывать connect, mapDispatchToProps+mapStateToProps, ибо у меня ограничение по символам ( в инете есть статьи, как это работает )

Скажу так, что этот метод я юзал когда только начинал работать с редаксом и даже юзал HOC при тестовом задании на работу, работодатель не зачмырил подход :D

Но как бы, слишком много получается кода.. тем более, на дворе 2021 год, есть хуки, и как бы, приоритетней юзать их, ИМХО!

Теперь затронем хуки.

Как я говорил ранее, тут будут подвиды.

1) Hooks from redux + react-redux
2) Hooks from react

Начнём с обычного redux'a + react-redux'a.

В чём как бы суть?

Изначально мы создаём redux-store, combineReducers и т.д., потом создаём редьюсеры, там actionCreators, initialState и трали-вали, затем нам надо юзнать данные в компоненте. Как это сделать без хока? Легко!

import {useSelector} from "react-redux";
const Users = props => {
let users = useSelector(state => state.user.users)
return(
<>
{users.map(user => <User {...props} />)}
</>
)
}

Поясняю:
Мы юзаем хук useSelector из react-redux, чтобы получить данные нашего initialState, то есть да, мы без всяких там HOC и т.д., просто взяли и достучались до наших данных.

А что если нам нужно что-то диспатчить? Та без проблем.

import {useDispatch} from "react-redux";
const Users = props => {
let dispatch = useDispatch()
const setUsers = () => dispatch(setUsersThunkCreator())
return(
<>
</>
)
}

А теперь рассмотрим вариант от разработчиков react.

import {useReducer} from "react";

let [state, dispatch] = useReducer(usersReducer, [])

const setUsers = () => {
dispatch({
type: "SET_USERS",
payload: []
})
}

const Users = props => {
return(
<>
{state.users.map(user => <User {...props} />)}
</>
)
}

В чём разница? Разница в том, что useReducer используют для мелких приложений, где нет какой-то ебанутой архитектуры и так далее, но если у вас всё же огромный проект, то юзайте вариант от react-redux.

Надеюсь, что теперь стало понятно, почему юзать хуки более приоритетней ( ибо это меньше кода!! )

Но, а остаётся ли компонент(-а) чистым(-ой) - загадка:D

Ну, а на этом всё! Всем здоровья, счастья и бобра!

#css

Всем шалом! Я знаю что тут есть как начинающие верстаки, так и профи. Но сегодня я решил посвятить пост новичкам. Ниже я прикреплю шпору по разным css-border'ам. Надеюсь, когда-то это вам поможет :3

#статья

Всем привет и сегодня я вам расскажу, как заливать реакт проекты на гитбхаб.

Дело в том, что там не так всё просто, как с обычным html,css,js. У вас не получится просто взять, перетащить файлы в репу и получить сайт на хостинге.

В чём дело? Я конечно могу ошибаться, но дело в том, что когда мы пишем на реакте, то мы как бы не прогоняем через babel весь свой код ( он прогоняется в браузере ) и из-за этого, гитхаб попросту не будет понимать, что за хуйню мы ему подкинули туда.

Так, с теорией закончили, начнём практиковаться.

Начать стоит с того, что нужно правильно создать реакт приложение, ибо если мы создали его через npm create-react-app name - то залив его на хостинг, мы получим не работающий реакт-проект, он вам покажет различные скриптовые команды, по типу:

- npm run start
- npm run build

Что же делать? Тут аж два варианта:

- npx create-react-app name
- npm init react-app name

Данными командами, мы всё так же создаём наше обычное реакт приложение, но как бы мы ему говорим, что ты будешь инициализирован под хостинги.

И да, вам достаточно написать одну из тех двух команд.

Дальше, мы идём в github и создаём репозиторий, после написания названия проекта - у вас будет страница со многими командами, и вот тут попрошу вас её не закрывать, ибо она вам ещё понадобиться.

Далее, приступаем к пакетам.

Да, нам понадобиться один пакет - gh-pages.

Установка:

npm i gh-pages --save-dev

И да, на сколько мне известно, писать зависимость ( --save-dev ) тут обязательно, ибо так он установится у вас как обычный пакет и работать ничего не будет :(

Далее идём в наш package.json.

На первой строке, перед name добавляем новое ключ-значение:

"homepage": "http://yourgithubname.github.io/react-repo-name"

Вот пример с моим проектом:

"homepage": "http://aquiwer.github.io/react-game"

Потом листаем чуть ниже и видим "noscripts":{...}

Здесь нам тоже надо добавить две команды:

"predeploy": "npm run build",
"deploy": "gh-pages -d build"

То есть:

"noscripts": {
"predeploy": "npm run build",
"deploy": "gh-pages -d build",
...
}

Затем, в терминале пишем:

- git init
- git remote add origin (тут будет ваша ссылка)
- git add .
- git commit -m "First commit"
- npm run deploy ( если не сработало, напишите gh-pages -d build )
- git push -u origin master

Теперь заходите в свой репозиторий -> настройки и ищите там свою ссылочку на проект, немного ждите ( в зависимости от размеров проекта - будет разное время ожидания ) и бам, вы залили свой проект на гитхаб!

На первый раз может показаться что это сложно, но советую вам позаливать пару проектов, тестовых, чтобы набить руку и потом уже очень быстро всё делать. А на этом всё, увидимся в следующей статейке -)

Всем бобра и позитива!

Сегодня я продолжаю топить тему react и мне пришла в голову идея выкладывать какие-то готовые решения, которые возможно вам помогут.

Сегодня мы свяжем хук useState() + модальное окно.

Начнём с того, что делается это всё очень просто, но даже на этот случай умудрились написать целую библиотеку.. которая к тому же не поддерживается typenoscript, и надо самому добавлять в .d.ts.

Ну ладно, это не главная проблема и предлагаю начать мутить наше изобретение.

Для начала я создам компонент(-у) с модальным окном.

export const ModalWindow = () => {
return(
<div>
<h1>Like this post!</h1>
</div>
);
}

( Ой как надеюсь, что телега не переебала табы )

Окей, какая-то простая модалка у нас есть, мы не будем заморачиваться со стилями, ибо нам важен сам алгоритм, а не вёрстка.

Теперь перейдём к компоненту(-е), в которой нужно вызывать модалку.

export const AnotherComponent = () => {
const [modalWindow, setModalWindow] = useState(false);
const openWindow = () => {
setModalWindow(true)
}
const closeWindow = () =>{
setModalWindow(false)
}
return (
<div>
{
modalWindow && <ModalWindow closeWindow={closeWindow}/>
}
</div>
);
};

Ну как-то так, мы берём хук useState, присваиваем буллевое значение, и если оно равно true - модалка открывается. Самим состоянием хука мы управляем через две функции, openWindow && closeWindow.

Функцию, которая закрывает модалку мы передаём как пропс в нашу модалку, там мы повесим её(функцию), допустим на крестик, который закрывает окно.

export const ModalWindow = ({closeWindow}) => {
return(
<div>
<button onClick={closeWindow}>&times;</button>
</div>
);
}

На этом всё, вот так легко вы можете реализовать модалку, без лишних либ. Конечно, можно много чего намутить, анимации, закрытие по нажатию на пустое место и т.д., но это уже всё ваша фантазия, и реализовать это тоже не так уж и сложно ;)

А на этом всё, надеюсь вам зашло такое, дальше буду думать, чтоб ещё такого намутить ^_^

Всем покедава.

Ну что же, всем привет. Я знаю что долго не писал о чём-то, но на то была причина - я устроился на работу фронтенд разработчиком. Вот уже 2.1 месяца(месяцев/месяц) херачу, но не суть.

Давайте ближе к сути поста - я хочу рассказать, чё вас вообще может ждать на работе и к чему стоит готовиться.

Первое, что не относится к кодингу так жёстко - это моральная подготовка.

Если вы джун, так ещё и с первым опытом работы - вам пиздец как тяжело будет первое время, то, что вы писали сами - будет казаться вам полной хуетой, по сравнению с тем, что творится на проде. Дело в том, что на проде вы помимо кодинга будете делать ещё и другие процессы, которые не связанны с кодингом. Надо научиться расставлять приоритет задач, уметь оценивать их и быть готовым к тому - что у вас нихуя не получится без помощи сеньёра :D

Второе, что хочу подметить - это то, что возможно вы будете фиксить баги.

О да блять, это то, с чего вы любите порофлить. Вот у меня на работе был кейс, когда мне дали стори ( разработать алгоритм ) и баг. Стори я закрыл быстрее, нежели баг - почему? Ибо вы в душе не ебёте, что там написано, ибо на больших продах юзаются сторонние либы, которые вы возможно не знаете, да и баги попадаются порой такие, что ахуеть можно. Тут надо уметь понимать, как работает код, но без опыта работы вам это будет даваться очень хуево, имхо.

Но, у этого всего есть и плюсы - после 999 пофикшеных багов, вы будете ощущать себя королём блять всей разработки, ибо рылись в чужом дерьме, и помимо этого - заставили это работать.

И вот очень важную вещь я вынес для себя - то, что вы знаете язык, даёт вам не особо сильную корочку, ибо важно понимать хотя бы на базовом уровне, как может работать чужой код, а ещё, когда вы клоните с гита проект, и смотрите, что там юзаются санки+саги, 444 редьюсеров, лодаши, хуяши и так далее - вы понимаете, что вы в реальной жопе ;D Со временем вы конечно всё понимаете, и привыкаете, но это со временем.

Что же я хочу донести в этом посте:
- учите язык хорошо, ибо зная его - вы все равно будете в жопе, а если не знать его - то вообще пиздец
- будьте морально готовы к выгораниям, эмоциональным срывам
- научитесь оценивать задачи ( что не всегда легко )
- будьте готовы к тому, что изначально вы будете нубом в проекте и это норм

Если у вас есть темы, которые вы бы хотели поднять, связанные с моей работой - пишите, расскажу что и как. Могу рассказать про компанию, чё делаем, чё курим ;D

А на этом всё, всем пока, а я пошёл дальше баг фиксить ( ебись оно конём 🐎).

Привет ещё раз. В прошлом посте я сказал, что можете задавать какие-то вопросы, аля темы, и я отвечу на них в виде поста. И вот один человек написал:

" Какие ты проекты делал для портфолио ? И делал ли их вообще ? "

Штош, приступим.

Отвечу сразу - да, делал.

В мои проекты входили:

- одна соц.сеть( фронт )
- что-то по типу автосалона ( фронт и бэк )
- приложение для кафешки ( фронт )
- улучшенная версия туду-приложения ( фронт )

Это пожалуй самые большие проекты, которые я писал, ибо в большинстве случаев не было бэкенда, а учить я его начал только в крайнем пет проекты ( автосалон ), после него меня взяли на работу.

Но, есть ли смысл вообще от этого?

Несомненно есть, но зачастую, люди, которые ищут джуна(именно джуна, ибо мидлов и сеньёров ' отсеивают ' по опыту работы), понимают, что половину он взял из инета, ибо попросту сам не додумался бы до таких решений - и это нормально, поэтому он и джун.

Что же тогда делать и как они проверяют человека на работоспособность? - зависит от компании.

Есть несколько вариантов:

- Тестовое задание - это самое лёгкое, что может быть, ибо вы зачастую делаете его не вовремя собеса, а сами, опираясь на инет и советы других разрабов.

- Проверка вовремя собеса - вот это уже сложнее, именно этот вариант был у меня. Изначально меня гоняли по теории, но когда поняли что нет смысла, ибо я на всё отвечал быстро и чётко, перешли к алгоритмическим задачам, их было 3. Какие точно - я не помню, помню только что одна была на каррирование, но её я решил быстро.

- Может быть сразу то и то :D

Делаем выводы:

Иметь проекты на гите нужно, но не надейтесь на них на все 100%, будьте готовы к тому, что вас возможно захотят протестить онлайн, для этого советую проходить codewars и смотреть другие собесы, дабы знать лучше теорию.

На этом всё, если есть ещё вопросы - пишите, звоните, всё расскажу, всем пока 🏃🏼‍♂️