├── lesson-12-questions └── questions │ ├── src │ ├── styles │ │ └── utilities │ │ │ ├── index.js │ │ │ └── Position.js │ ├── components │ │ └── PostsSearch │ │ │ ├── PostsSearchForm │ │ │ └── post-search-form.module.scss │ │ │ └── posts-search.module.scss │ ├── shared │ │ └── components │ │ │ ├── TextField │ │ │ └── text-field.module.scss │ │ │ ├── SubmitButton │ │ │ ├── submit-button.module.scss │ │ │ └── SubmitButton.jsx │ │ │ ├── Loader │ │ │ └── Loader.jsx │ │ │ └── ColorPicker │ │ │ └── ColorPicker.module.scss │ ├── setupTests.js │ ├── App.test.js │ └── index.js │ └── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── lesson-3-styling-components ├── sass-scss-example │ ├── src │ │ ├── shared │ │ │ └── styled │ │ │ │ ├── _common.scss │ │ │ │ ├── _variables.scss │ │ │ │ ├── style.scss │ │ │ │ └── _mixins.scss │ │ ├── App.css │ │ ├── components │ │ │ ├── Footer │ │ │ │ ├── footer.scss │ │ │ │ └── Footer.jsx │ │ │ └── Button │ │ │ │ └── button.scss │ │ └── index.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png ├── src │ ├── App.css │ ├── components │ │ ├── Footer │ │ │ ├── footer.css │ │ │ └── Footer.jsx │ │ └── Button │ │ │ └── button.css │ └── index.js ├── react-icons-example │ ├── src │ │ ├── App.css │ │ ├── components │ │ │ ├── Button │ │ │ │ └── button.css │ │ │ └── Footer │ │ │ │ ├── footer.css │ │ │ │ └── Footer.jsx │ │ └── index.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png ├── css-scss-modules-example │ ├── src │ │ ├── App.css │ │ ├── App.scss │ │ ├── components │ │ │ ├── Footer │ │ │ │ ├── footer.css │ │ │ │ └── Footer.jsx │ │ │ └── Button │ │ │ │ └── Button.module.css │ │ └── index.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png ├── inline-style-example │ ├── src │ │ ├── App.css │ │ ├── components │ │ │ ├── Footer │ │ │ │ ├── footer.css │ │ │ │ └── Footer.jsx │ │ │ └── Button │ │ │ │ └── button.css │ │ └── index.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png └── styled-components-example │ ├── src │ ├── App.css │ ├── components │ │ ├── Footer │ │ │ ├── footer.css │ │ │ └── Footer.jsx │ │ └── Button │ │ │ └── button.css │ └── index.js │ └── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── lesson-13-redux ├── 1-redux-basic-example │ ├── src │ │ ├── shared │ │ │ ├── styles │ │ │ │ ├── _variables.scss │ │ │ │ ├── _common.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── style.scss │ │ │ │ ├── _fonts.scss │ │ │ │ └── _shared.scss │ │ │ └── components │ │ │ │ ├── TextField │ │ │ │ └── text-field.module.css │ │ │ │ ├── SubmitButton │ │ │ │ ├── submit-button.module.scss │ │ │ │ └── SubmitButton.jsx │ │ │ │ ├── Loader │ │ │ │ └── Loader.jsx │ │ │ │ └── PostList │ │ │ │ └── post-list.module.scss │ │ ├── pages │ │ │ ├── ProductPage │ │ │ │ ├── AddPage │ │ │ │ │ └── AddPage.jsx │ │ │ │ ├── ListPage │ │ │ │ │ └── ListPage.jsx │ │ │ │ └── SearchPage │ │ │ │ │ └── SearchPage.jsx │ │ │ ├── MyBooksPage │ │ │ │ └── MyBooksPage.jsx │ │ │ ├── HomePage │ │ │ │ └── HomePage.jsx │ │ │ └── PostsPage │ │ │ │ └── PostsPage.jsx │ │ ├── components │ │ │ ├── PostsSearch │ │ │ │ ├── PostsSearchForm │ │ │ │ │ ├── initialState.js │ │ │ │ │ ├── posts-search-form.module.scss │ │ │ │ │ └── fields.js │ │ │ │ └── posts-search.module.scss │ │ │ ├── Books │ │ │ │ └── FormAddBook │ │ │ │ │ ├── initialState.js │ │ │ │ │ └── form-add-book.module.scss │ │ │ └── Navbar │ │ │ │ └── navbar.module.scss │ │ ├── redux │ │ │ ├── types.js │ │ │ ├── selectors.js │ │ │ └── store.js │ │ └── App.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png └── Основи Redux.pptx ├── lesson-17-register-login ├── auth-example │ ├── src │ │ ├── shared │ │ │ ├── styles │ │ │ │ ├── _variables.scss │ │ │ │ ├── _common.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── style.scss │ │ │ │ ├── _fonts.scss │ │ │ │ └── _shared.scss │ │ │ └── components │ │ │ │ ├── SubmitButton │ │ │ │ ├── submit-button.module.scss │ │ │ │ └── SubmitButton.jsx │ │ │ │ ├── TextField │ │ │ │ └── text-field.module.css │ │ │ │ └── PostList │ │ │ │ └── post-list.module.scss │ │ ├── redux │ │ │ ├── auth │ │ │ │ └── auth-selectors.js │ │ │ └── filter │ │ │ │ ├── filter-selectors.js │ │ │ │ └── filter-actions.js │ │ ├── components │ │ │ ├── LoginForm │ │ │ │ └── initialState.js │ │ │ ├── Books │ │ │ │ └── FormAddBook │ │ │ │ │ ├── initialState.js │ │ │ │ │ └── form-add-book.module.scss │ │ │ ├── RegisterForm │ │ │ │ └── initialState.js │ │ │ └── Navbar │ │ │ │ ├── navbar.module.scss │ │ │ │ ├── NavbarMenu │ │ │ │ └── items.js │ │ │ │ └── NavbarAuth │ │ │ │ └── NavbarAuth.jsx │ │ ├── App.js │ │ └── pages │ │ │ └── MyBooksPage │ │ │ └── MyBooksPage.jsx │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png └── registration.pptx ├── lesson-18-register-login ├── auth-example │ ├── src │ │ ├── shared │ │ │ ├── styles │ │ │ │ ├── _variables.scss │ │ │ │ ├── _common.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── style.scss │ │ │ │ ├── _fonts.scss │ │ │ │ └── _shared.scss │ │ │ ├── components │ │ │ │ ├── SubmitButton │ │ │ │ │ ├── submit-button.module.scss │ │ │ │ │ └── SubmitButton.jsx │ │ │ │ ├── TextField │ │ │ │ │ └── text-field.module.css │ │ │ │ └── PostList │ │ │ │ │ └── post-list.module.scss │ │ │ └── hooks │ │ │ │ └── useAuth.js │ │ ├── redux │ │ │ ├── filter │ │ │ │ ├── filter-selectors.js │ │ │ │ └── filter-actions.js │ │ │ └── auth │ │ │ │ └── auth-selectors.js │ │ └── components │ │ │ ├── LoginForm │ │ │ └── initialState.js │ │ │ ├── Books │ │ │ └── FormAddBook │ │ │ │ ├── initialState.js │ │ │ │ └── form-add-book.module.scss │ │ │ ├── RegisterForm │ │ │ └── initialState.js │ │ │ └── Navbar │ │ │ ├── navbar.module.scss │ │ │ ├── NavbarMenu │ │ │ └── items.js │ │ │ └── NavbarAuth │ │ │ └── NavbarAuth.jsx │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png └── registration.pptx ├── lesson-10-react-router-dom └── react-router-1 │ ├── src │ ├── shared │ │ ├── styles │ │ │ ├── _variables.scss │ │ │ ├── _common.scss │ │ │ ├── _mixins.scss │ │ │ ├── style.scss │ │ │ ├── _fonts.scss │ │ │ └── _shared.scss │ │ └── components │ │ │ ├── TextField │ │ │ └── text-field.module.css │ │ │ ├── SubmitButton │ │ │ ├── submit-button.module.scss │ │ │ └── SubmitButton.jsx │ │ │ ├── Loader │ │ │ └── Loader.jsx │ │ │ └── PostList │ │ │ └── post-list.module.scss │ ├── pages │ │ ├── PostsPage │ │ │ └── PostsPage.jsx │ │ ├── ProductPage │ │ │ ├── AddPage │ │ │ │ └── AddPage.jsx │ │ │ ├── ListPage │ │ │ │ └── ListPage.jsx │ │ │ └── SearchPage │ │ │ │ └── SearchPage.jsx │ │ ├── MyBooksPage │ │ │ └── MyBooksPage.jsx │ │ └── HomePage │ │ │ └── HomePage.jsx │ └── components │ │ ├── PostsSearch │ │ ├── PostsSearchForm │ │ │ ├── initialState.js │ │ │ ├── posts-search-form.module.scss │ │ │ └── fields.js │ │ └── posts-search.module.scss │ │ ├── Books │ │ └── FormAddBook │ │ │ ├── initialState.js │ │ │ └── form-add-book.module.scss │ │ └── Navbar │ │ └── navbar.module.scss │ └── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── lesson-11-react-router-dom └── react-router-2 │ ├── src │ ├── shared │ │ ├── styles │ │ │ ├── _variables.scss │ │ │ ├── _common.scss │ │ │ ├── _mixins.scss │ │ │ ├── style.scss │ │ │ ├── _fonts.scss │ │ │ └── _shared.scss │ │ └── components │ │ │ ├── TextField │ │ │ └── text-field.module.css │ │ │ ├── SubmitButton │ │ │ ├── submit-button.module.scss │ │ │ └── SubmitButton.jsx │ │ │ ├── Loader │ │ │ └── Loader.jsx │ │ │ └── PostList │ │ │ └── post-list.module.scss │ ├── pages │ │ ├── ProductPage │ │ │ ├── AddPage │ │ │ │ └── AddPage.jsx │ │ │ ├── ListPage │ │ │ │ └── ListPage.jsx │ │ │ └── SearchPage │ │ │ │ └── SearchPage.jsx │ │ ├── MyBooksPage │ │ │ └── MyBooksPage.jsx │ │ ├── HomePage │ │ │ └── HomePage.jsx │ │ └── PostsPage │ │ │ └── PostsPage.jsx │ ├── components │ │ ├── PostsSearch │ │ │ ├── PostsSearchForm │ │ │ │ ├── initialState.js │ │ │ │ ├── posts-search-form.module.scss │ │ │ │ └── fields.js │ │ │ └── posts-search.module.scss │ │ ├── Books │ │ │ └── FormAddBook │ │ │ │ ├── initialState.js │ │ │ │ └── form-add-book.module.scss │ │ └── Navbar │ │ │ └── navbar.module.scss │ └── App.js │ └── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── lesson-15-async-redux ├── 01_async-redux-example │ ├── src │ │ ├── shared │ │ │ ├── styles │ │ │ │ ├── _variables.scss │ │ │ │ ├── _common.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── style.scss │ │ │ │ ├── _fonts.scss │ │ │ │ └── _shared.scss │ │ │ └── components │ │ │ │ ├── TextField │ │ │ │ └── text-field.module.css │ │ │ │ ├── SubmitButton │ │ │ │ ├── submit-button.module.scss │ │ │ │ └── SubmitButton.jsx │ │ │ │ └── Loader │ │ │ │ └── Loader.jsx │ │ ├── redux │ │ │ ├── filter │ │ │ │ ├── filter-selectors.js │ │ │ │ ├── filter-actions.js │ │ │ │ └── filter-reducer.js │ │ │ └── rootReducer.js │ │ ├── pages │ │ │ ├── ProductPage │ │ │ │ ├── AddPage │ │ │ │ │ └── AddPage.jsx │ │ │ │ ├── ListPage │ │ │ │ │ └── ListPage.jsx │ │ │ │ └── SearchPage │ │ │ │ │ └── SearchPage.jsx │ │ │ ├── MyBooksPage │ │ │ │ └── MyBooksPage.jsx │ │ │ ├── HomePage │ │ │ │ └── HomePage.jsx │ │ │ └── PostsPage │ │ │ │ └── PostsPage.jsx │ │ ├── components │ │ │ ├── PostsSearch │ │ │ │ ├── PostsSearchForm │ │ │ │ │ ├── initialState.js │ │ │ │ │ ├── posts-search-form.module.scss │ │ │ │ │ └── fields.js │ │ │ │ └── posts-search.module.scss │ │ │ ├── Books │ │ │ │ └── FormAddBook │ │ │ │ │ ├── initialState.js │ │ │ │ │ └── form-add-book.module.scss │ │ │ └── Navbar │ │ │ │ └── navbar.module.scss │ │ └── App.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png ├── 02_async-redux-createAsync-Thunk-createSlice │ ├── src │ │ ├── shared │ │ │ ├── styles │ │ │ │ ├── _variables.scss │ │ │ │ ├── _common.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── style.scss │ │ │ │ ├── _fonts.scss │ │ │ │ └── _shared.scss │ │ │ └── components │ │ │ │ ├── TextField │ │ │ │ └── text-field.module.css │ │ │ │ ├── SubmitButton │ │ │ │ ├── submit-button.module.scss │ │ │ │ └── SubmitButton.jsx │ │ │ │ └── Loader │ │ │ │ └── Loader.jsx │ │ ├── redux │ │ │ └── filter │ │ │ │ ├── filter-selectors.js │ │ │ │ ├── filter-actions.js │ │ │ │ └── filter-reducer.js │ │ ├── pages │ │ │ ├── ProductPage │ │ │ │ ├── AddPage │ │ │ │ │ └── AddPage.jsx │ │ │ │ ├── ListPage │ │ │ │ │ └── ListPage.jsx │ │ │ │ └── SearchPage │ │ │ │ │ └── SearchPage.jsx │ │ │ ├── MyBooksPage │ │ │ │ └── MyBooksPage.jsx │ │ │ ├── HomePage │ │ │ │ └── HomePage.jsx │ │ │ └── PostsPage │ │ │ │ └── PostsPage.jsx │ │ ├── components │ │ │ ├── PostsSearch │ │ │ │ ├── PostsSearchForm │ │ │ │ │ ├── initialState.js │ │ │ │ │ ├── posts-search-form.module.scss │ │ │ │ │ └── fields.js │ │ │ │ └── posts-search.module.scss │ │ │ ├── Books │ │ │ │ └── FormAddBook │ │ │ │ │ ├── initialState.js │ │ │ │ │ └── form-add-book.module.scss │ │ │ └── Navbar │ │ │ │ └── navbar.module.scss │ │ └── App.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png └── Async-Redux.pptx ├── lesson-2-children-defaultProps-PropTypes ├── default-props-proptypes-examples │ ├── src │ │ ├── components │ │ │ ├── TextField │ │ │ │ └── text-field.css │ │ │ ├── Footer │ │ │ │ ├── index.js │ │ │ │ ├── footer.css │ │ │ │ └── Footer.jsx │ │ │ ├── Header │ │ │ │ ├── header.css │ │ │ │ └── HeaderMenu │ │ │ │ │ └── HeaderMenuItem.jsx │ │ │ └── Button │ │ │ │ ├── button.css │ │ │ │ └── Button.jsx │ │ ├── App.css │ │ └── index.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png └── children-example │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png │ └── src │ ├── components │ ├── Button │ │ └── Button.jsx │ └── Card │ │ ├── card.css │ │ └── Card.jsx │ ├── setupTests.js │ ├── App.test.js │ └── index.js ├── lesson-14-redux-toolkit ├── 03_redux-persist-example │ ├── src │ │ ├── shared │ │ │ ├── styles │ │ │ │ ├── _variables.scss │ │ │ │ ├── _common.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── style.scss │ │ │ │ ├── _fonts.scss │ │ │ │ └── _shared.scss │ │ │ └── components │ │ │ │ ├── TextField │ │ │ │ └── text-field.module.css │ │ │ │ ├── SubmitButton │ │ │ │ ├── submit-button.module.scss │ │ │ │ └── SubmitButton.jsx │ │ │ │ └── Loader │ │ │ │ └── Loader.jsx │ │ ├── redux │ │ │ └── books │ │ │ │ ├── filter │ │ │ │ └── filter-selectors.js │ │ │ │ └── books-reducer.js │ │ ├── pages │ │ │ ├── ProductPage │ │ │ │ ├── AddPage │ │ │ │ │ └── AddPage.jsx │ │ │ │ ├── ListPage │ │ │ │ │ └── ListPage.jsx │ │ │ │ └── SearchPage │ │ │ │ │ └── SearchPage.jsx │ │ │ ├── MyBooksPage │ │ │ │ └── MyBooksPage.jsx │ │ │ ├── HomePage │ │ │ │ └── HomePage.jsx │ │ │ └── PostsPage │ │ │ │ └── PostsPage.jsx │ │ ├── components │ │ │ ├── PostsSearch │ │ │ │ ├── PostsSearchForm │ │ │ │ │ ├── initialState.js │ │ │ │ │ ├── posts-search-form.module.scss │ │ │ │ │ └── fields.js │ │ │ │ └── posts-search.module.scss │ │ │ ├── Books │ │ │ │ └── FormAddBook │ │ │ │ │ ├── initialState.js │ │ │ │ │ └── form-add-book.module.scss │ │ │ └── Navbar │ │ │ │ └── navbar.module.scss │ │ └── App.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png ├── 00-redux-combineReducers-example │ ├── src │ │ ├── redux │ │ │ ├── filter │ │ │ │ ├── filter-types.js │ │ │ │ ├── filter-selectors.js │ │ │ │ └── filter-actions.js │ │ │ ├── books │ │ │ │ └── books-types.js │ │ │ └── store.js │ │ ├── shared │ │ │ ├── styles │ │ │ │ ├── _variables.scss │ │ │ │ ├── _common.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── style.scss │ │ │ │ ├── _fonts.scss │ │ │ │ └── _shared.scss │ │ │ └── components │ │ │ │ ├── TextField │ │ │ │ └── text-field.module.css │ │ │ │ ├── SubmitButton │ │ │ │ ├── submit-button.module.scss │ │ │ │ └── SubmitButton.jsx │ │ │ │ └── Loader │ │ │ │ └── Loader.jsx │ │ ├── pages │ │ │ ├── ProductPage │ │ │ │ ├── AddPage │ │ │ │ │ └── AddPage.jsx │ │ │ │ ├── ListPage │ │ │ │ │ └── ListPage.jsx │ │ │ │ └── SearchPage │ │ │ │ │ └── SearchPage.jsx │ │ │ ├── MyBooksPage │ │ │ │ └── MyBooksPage.jsx │ │ │ ├── HomePage │ │ │ │ └── HomePage.jsx │ │ │ └── PostsPage │ │ │ │ └── PostsPage.jsx │ │ ├── components │ │ │ ├── PostsSearch │ │ │ │ ├── PostsSearchForm │ │ │ │ │ ├── initialState.js │ │ │ │ │ ├── posts-search-form.module.scss │ │ │ │ │ └── fields.js │ │ │ │ └── posts-search.module.scss │ │ │ ├── Books │ │ │ │ └── FormAddBook │ │ │ │ │ ├── initialState.js │ │ │ │ │ └── form-add-book.module.scss │ │ │ └── Navbar │ │ │ │ └── navbar.module.scss │ │ └── App.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png ├── 02_redux-toolkit-createSlice-example │ ├── src │ │ ├── shared │ │ │ ├── styles │ │ │ │ ├── _common.scss │ │ │ │ ├── _variables.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── style.scss │ │ │ │ ├── _fonts.scss │ │ │ │ └── _shared.scss │ │ │ └── components │ │ │ │ ├── TextField │ │ │ │ └── text-field.module.css │ │ │ │ ├── SubmitButton │ │ │ │ ├── submit-button.module.scss │ │ │ │ └── SubmitButton.jsx │ │ │ │ └── Loader │ │ │ │ └── Loader.jsx │ │ ├── redux │ │ │ └── filter │ │ │ │ └── filter-selectors.js │ │ ├── pages │ │ │ ├── ProductPage │ │ │ │ ├── AddPage │ │ │ │ │ └── AddPage.jsx │ │ │ │ ├── ListPage │ │ │ │ │ └── ListPage.jsx │ │ │ │ └── SearchPage │ │ │ │ │ └── SearchPage.jsx │ │ │ ├── MyBooksPage │ │ │ │ └── MyBooksPage.jsx │ │ │ ├── HomePage │ │ │ │ └── HomePage.jsx │ │ │ └── PostsPage │ │ │ │ └── PostsPage.jsx │ │ ├── components │ │ │ ├── PostsSearch │ │ │ │ ├── PostsSearchForm │ │ │ │ │ ├── initialState.js │ │ │ │ │ ├── posts-search-form.module.scss │ │ │ │ │ └── fields.js │ │ │ │ └── posts-search.module.scss │ │ │ ├── Books │ │ │ │ └── FormAddBook │ │ │ │ │ ├── initialState.js │ │ │ │ │ └── form-add-book.module.scss │ │ │ └── Navbar │ │ │ │ └── navbar.module.scss │ │ └── App.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png └── 01_redux-toolkit-creatAction-createReducer-example │ ├── src │ ├── shared │ │ ├── styles │ │ │ ├── _variables.scss │ │ │ ├── _common.scss │ │ │ ├── _mixins.scss │ │ │ ├── style.scss │ │ │ ├── _fonts.scss │ │ │ └── _shared.scss │ │ └── components │ │ │ ├── TextField │ │ │ └── text-field.module.css │ │ │ ├── SubmitButton │ │ │ ├── submit-button.module.scss │ │ │ └── SubmitButton.jsx │ │ │ └── Loader │ │ │ └── Loader.jsx │ ├── redux │ │ └── filter │ │ │ ├── filter-selectors.js │ │ │ ├── filter-actions.js │ │ │ └── filter-reducer.js │ ├── pages │ │ ├── ProductPage │ │ │ ├── AddPage │ │ │ │ └── AddPage.jsx │ │ │ ├── ListPage │ │ │ │ └── ListPage.jsx │ │ │ └── SearchPage │ │ │ │ └── SearchPage.jsx │ │ ├── MyBooksPage │ │ │ └── MyBooksPage.jsx │ │ ├── HomePage │ │ │ └── HomePage.jsx │ │ └── PostsPage │ │ │ └── PostsPage.jsx │ ├── components │ │ ├── PostsSearch │ │ │ ├── PostsSearchForm │ │ │ │ ├── initialState.js │ │ │ │ ├── posts-search-form.module.scss │ │ │ │ └── fields.js │ │ │ └── posts-search.module.scss │ │ ├── Books │ │ │ └── FormAddBook │ │ │ │ ├── initialState.js │ │ │ │ └── form-add-book.module.scss │ │ └── Navbar │ │ │ └── navbar.module.scss │ └── App.js │ └── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── lesson-16-async-redux-rtkquery ├── 02_rtk-query-example │ ├── src │ │ ├── shared │ │ │ ├── styles │ │ │ │ ├── _variables.scss │ │ │ │ ├── _common.scss │ │ │ │ ├── _mixins.scss │ │ │ │ ├── style.scss │ │ │ │ ├── _fonts.scss │ │ │ │ └── _shared.scss │ │ │ └── components │ │ │ │ ├── TextField │ │ │ │ └── text-field.module.css │ │ │ │ ├── SubmitButton │ │ │ │ ├── submit-button.module.scss │ │ │ │ └── SubmitButton.jsx │ │ │ │ └── Loader │ │ │ │ └── Loader.jsx │ │ ├── redux │ │ │ └── filter │ │ │ │ ├── filter-selectors.js │ │ │ │ ├── filter-actions.js │ │ │ │ └── filter-reducer.js │ │ ├── pages │ │ │ ├── ProductPage │ │ │ │ ├── AddPage │ │ │ │ │ └── AddPage.jsx │ │ │ │ ├── ListPage │ │ │ │ │ └── ListPage.jsx │ │ │ │ └── SearchPage │ │ │ │ │ └── SearchPage.jsx │ │ │ ├── MyBooksPage │ │ │ │ └── MyBooksPage.jsx │ │ │ ├── HomePage │ │ │ │ └── HomePage.jsx │ │ │ └── PostsPage │ │ │ │ └── PostsPage.jsx │ │ ├── components │ │ │ ├── PostsSearch │ │ │ │ ├── PostsSearchForm │ │ │ │ │ ├── initialState.js │ │ │ │ │ ├── posts-search-form.module.scss │ │ │ │ │ └── fields.js │ │ │ │ └── posts-search.module.scss │ │ │ ├── Books │ │ │ │ └── FormAddBook │ │ │ │ │ ├── initialState.js │ │ │ │ │ └── form-add-book.module.scss │ │ │ └── Navbar │ │ │ │ └── navbar.module.scss │ │ └── App.js │ └── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png └── 01_async-redux-createAsync-Thunk-createSlice-optimization │ ├── src │ ├── shared │ │ ├── styles │ │ │ ├── _variables.scss │ │ │ ├── _common.scss │ │ │ ├── _mixins.scss │ │ │ ├── style.scss │ │ │ ├── _fonts.scss │ │ │ └── _shared.scss │ │ ├── helpers │ │ │ └── redux.js │ │ └── components │ │ │ ├── TextField │ │ │ └── text-field.module.css │ │ │ └── SubmitButton │ │ │ ├── submit-button.module.scss │ │ │ └── SubmitButton.jsx │ ├── redux │ │ └── filter │ │ │ ├── filter-selectors.js │ │ │ ├── filter-actions.js │ │ │ └── filter-reducer.js │ ├── pages │ │ ├── ProductPage │ │ │ ├── AddPage │ │ │ │ └── AddPage.jsx │ │ │ ├── ListPage │ │ │ │ └── ListPage.jsx │ │ │ └── SearchPage │ │ │ │ └── SearchPage.jsx │ │ ├── MyBooksPage │ │ │ └── MyBooksPage.jsx │ │ ├── HomePage │ │ │ └── HomePage.jsx │ │ └── PostsPage │ │ │ └── PostsPage.jsx │ ├── components │ │ ├── PostsSearch │ │ │ ├── PostsSearchForm │ │ │ │ ├── initialState.js │ │ │ │ ├── posts-search-form.module.scss │ │ │ │ └── fields.js │ │ │ └── posts-search.module.scss │ │ ├── Books │ │ │ └── FormAddBook │ │ │ │ ├── initialState.js │ │ │ │ └── form-add-book.module.scss │ │ └── Navbar │ │ │ └── navbar.module.scss │ └── App.js │ └── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png ├── lesson-5-forms └── form-basic-example │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png │ └── src │ ├── App.js │ ├── setupTests.js │ └── index.js ├── lesson-1-JSX-function-components-props ├── jsx-examples │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png │ └── src │ │ ├── App.test.js │ │ └── index.js └── components-props-example │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png │ └── src │ ├── components │ ├── Footer │ │ ├── footer.css │ │ └── Footer.jsx │ └── Header │ │ └── HeaderMenu │ │ └── HeaderMenuItem.jsx │ ├── setupTests.js │ ├── App.test.js │ └── index.js ├── lesson-6-lifecycle-methods └── lifecycle-methods-example │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png │ └── src │ ├── setupTests.js │ ├── components │ └── Loader │ │ └── Loader.jsx │ └── index.js ├── lesson-8-useState-useEffect-useRef-custom-hooks ├── use-state-example │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png │ └── src │ │ ├── setupTests.js │ │ └── App.test.js ├── form-with-useState-example │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png │ └── src │ │ ├── setupTests.js │ │ └── components │ │ └── Loader │ │ └── Loader.jsx └── useEffect-advanced-example │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png │ └── src │ ├── components │ └── PostsSearch │ │ ├── PostsSearchForm │ │ └── post-search-form.module.scss │ │ └── posts-search.module.scss │ ├── shared │ └── components │ │ ├── TextField │ │ └── text-field.module.scss │ │ ├── SubmitButton │ │ ├── submit-button.module.scss │ │ └── SubmitButton.jsx │ │ └── Loader │ │ └── Loader.jsx │ ├── setupTests.js │ └── App.test.js ├── lesson-7-lifecycle-methods-api-modal └── lifecycle-methods-api-modal-examples │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png │ └── src │ ├── components │ └── PostsSearch │ │ ├── PostsSearchForm │ │ └── post-search-form.module.scss │ │ └── posts-search.module.scss │ ├── shared │ └── components │ │ ├── TextField │ │ └── text-field.module.scss │ │ ├── SubmitButton │ │ ├── submit-button.module.scss │ │ └── SubmitButton.jsx │ │ └── Loader │ │ └── Loader.jsx │ ├── setupTests.js │ └── App.test.js ├── lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context ├── context-example │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png │ └── src │ │ ├── modules │ │ ├── Navbar │ │ │ ├── local.json │ │ │ └── Navbar.module.css │ │ ├── LanguageSwitcher │ │ │ └── LanguageSwitcher.module.css │ │ └── Main │ │ │ └── locale.json │ │ ├── shared │ │ └── hooks │ │ │ └── useLang.js │ │ ├── setupTests.js │ │ └── App.test.js ├── endless-scroll-example │ ├── public │ │ ├── robots.txt │ │ ├── favicon.ico │ │ ├── logo192.png │ │ └── logo512.png │ └── src │ │ ├── components │ │ └── PostsSearch │ │ │ ├── PostsSearchForm │ │ │ └── post-search-form.module.scss │ │ │ └── posts-search.module.scss │ │ ├── shared │ │ └── components │ │ │ ├── TextField │ │ │ └── text-field.module.scss │ │ │ └── SubmitButton │ │ │ ├── submit-button.module.scss │ │ │ └── SubmitButton.jsx │ │ ├── setupTests.js │ │ └── App.test.js └── useref-usecallback-hooks-short-example │ ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png │ └── src │ └── setupTests.js └── lesson-4-class-components-state-set-state-example ├── class-components-state-set-state-example ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ └── logo512.png └── src │ ├── setupTests.js │ └── App.test.js └── slides ├── Імперативний підхід.png ├── Декларативний підхід.png └── Алгоритм створення компоненту.png /lesson-12-questions/questions/src/styles/utilities/index.js: -------------------------------------------------------------------------------- 1 | export * from "./Position"; -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/src/shared/styled/_common.scss: -------------------------------------------------------------------------------- 1 | @import 'variables'; -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/src/shared/styled/_variables.scss: -------------------------------------------------------------------------------- 1 | $primary-color: red; -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/src/components/TextField/text-field.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/redux/auth/auth-selectors.js: -------------------------------------------------------------------------------- 1 | export const isLogin = ({auth}) => auth.isLogin; -------------------------------------------------------------------------------- /lesson-3-styling-components/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/redux/filter/filter-selectors.js: -------------------------------------------------------------------------------- 1 | export const getFilter = ({filter}) => filter; -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/redux/filter/filter-selectors.js: -------------------------------------------------------------------------------- 1 | export const getFilter = ({filter}) => filter; -------------------------------------------------------------------------------- /lesson-12-questions/questions/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/redux/filter/filter-types.js: -------------------------------------------------------------------------------- 1 | export const SET_FILTER = "filter/set"; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/redux/filter/filter-selectors.js: -------------------------------------------------------------------------------- 1 | export const getFilter = store => store.filter; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-13-redux/Основи Redux.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-13-redux/Основи Redux.pptx -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-3-styling-components/src/components/Footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 15px 0; 3 | background: lightblue; 4 | } -------------------------------------------------------------------------------- /lesson-5-forms/form-basic-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/redux/books/filter/filter-selectors.js: -------------------------------------------------------------------------------- 1 | export const getFilter = store => store.filter; -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/redux/filter/filter-selectors.js: -------------------------------------------------------------------------------- 1 | export const getFilter = store => store.filter; -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/src/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | export {default} from "./Footer" -------------------------------------------------------------------------------- /lesson-3-styling-components/react-icons-example/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/redux/filter/filter-selectors.js: -------------------------------------------------------------------------------- 1 | export const getFilter = store => store.filter; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-15-async-redux/Async-Redux.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-15-async-redux/Async-Redux.pptx -------------------------------------------------------------------------------- /lesson-3-styling-components/css-scss-modules-example/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/inline-style-example/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/jsx-examples/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/redux/filter/filter-selectors.js: -------------------------------------------------------------------------------- 1 | export const getFilter = store => store.filter; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/src/components/Header/header.css: -------------------------------------------------------------------------------- 1 | .header { 2 | padding: 25px 0; 3 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/css-scss-modules-example/src/App.scss: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/inline-style-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-3-styling-components/react-icons-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-3-styling-components/styled-components-example/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/redux/filter/filter-selectors.js: -------------------------------------------------------------------------------- 1 | export const getFilter = store => store.filter; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-17-register-login/registration.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-17-register-login/registration.pptx -------------------------------------------------------------------------------- /lesson-18-register-login/registration.pptx: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-18-register-login/registration.pptx -------------------------------------------------------------------------------- /lesson-3-styling-components/css-scss-modules-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-3-styling-components/inline-style-example/src/components/Footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 15px 0; 3 | background: lightblue; 4 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/src/components/Footer/footer.scss: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 15px 0; 3 | background: lightblue; 4 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/styled-components-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-6-lifecycle-methods/lifecycle-methods-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/redux/filter/filter-selectors.js: -------------------------------------------------------------------------------- 1 | export const getFilter = store => store.filter; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/shared/styles/_variables.scss: -------------------------------------------------------------------------------- 1 | $tablet: 768px; 2 | $mobile: 480px; -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/children-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-3-styling-components/css-scss-modules-example/src/components/Footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 15px 0; 3 | background: lightblue; 4 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/styled-components-example/src/components/Footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 15px 0; 3 | background: lightblue; 4 | } -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/components-props-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-12-questions/questions/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-12-questions/questions/public/favicon.ico -------------------------------------------------------------------------------- /lesson-12-questions/questions/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-12-questions/questions/public/logo192.png -------------------------------------------------------------------------------- /lesson-12-questions/questions/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-12-questions/questions/public/logo512.png -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/shared/styles/_common.scss: -------------------------------------------------------------------------------- 1 | @import "variables"; 2 | @import "mixins"; -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/use-state-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/components-props-example/src/components/Footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 15px 0; 3 | background: lightblue; 4 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/src/App.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 3 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/redux/books/books-types.js: -------------------------------------------------------------------------------- 1 | export const ADD_BOOK = "books/add"; 2 | export const REMOVE_BOOK = "books/remove"; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/redux/filter/filter-selectors.js: -------------------------------------------------------------------------------- 1 | export const getFilter = store => store.filter; -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-5-forms/form-basic-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-5-forms/form-basic-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-5-forms/form-basic-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-5-forms/form-basic-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-5-forms/form-basic-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-5-forms/form-basic-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/form-with-useState-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | export default function PostsPage() { 2 | return ( 3 |
Posts Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-13-redux/1-redux-basic-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-13-redux/1-redux-basic-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-13-redux/1-redux-basic-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-17-register-login/auth-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-17-register-login/auth-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-17-register-login/auth-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-18-register-login/auth-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-18-register-login/auth-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-18-register-login/auth-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/redux/filter/filter-actions.js: -------------------------------------------------------------------------------- 1 | import { createAction } from "@reduxjs/toolkit"; 2 | 3 | export const setFilter = createAction("filter/set") -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/redux/filter/filter-actions.js: -------------------------------------------------------------------------------- 1 | import { createAction } from "@reduxjs/toolkit"; 2 | 3 | export const setFilter = createAction("filter/set") -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/src/components/Footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 15px 0; 3 | background-color: lightgrey; 4 | } -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-10-react-router-dom/react-router-1/public/favicon.ico -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-10-react-router-dom/react-router-1/public/logo192.png -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-10-react-router-dom/react-router-1/public/logo512.png -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | export default function MyBooksPage() { 2 | return ( 3 |
My Books Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-11-react-router-dom/react-router-2/public/favicon.ico -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-11-react-router-dom/react-router-2/public/logo192.png -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-11-react-router-dom/react-router-2/public/logo512.png -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | export default function MyBooksPage() { 2 | return ( 3 |
My Books Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/redux/types.js: -------------------------------------------------------------------------------- 1 | export const ADD_BOOK = "books/add"; 2 | export const REMOVE_BOOK = "books/remove"; 3 | 4 | export const SET_FILTER = "filter/set"; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/shared/styles/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/components/LoginForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | email: "", 3 | password: "", 4 | } 5 | 6 | export default initialState; -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/components/LoginForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | email: "", 3 | password: "", 4 | } 5 | 6 | export default initialState; -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/src/shared/styled/style.scss: -------------------------------------------------------------------------------- 1 | @import 'common.scss'; 2 | 3 | body { 4 | font-family: Arial, "Helvetica Neue", Helvetica, sans-serif; 5 | } -------------------------------------------------------------------------------- /lesson-4-class-components-state-set-state-example/class-components-state-set-state-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | } 5 | 6 | export default initialState; -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-15-async-redux/01_async-redux-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-15-async-redux/01_async-redux-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-15-async-redux/01_async-redux-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/redux/filter/filter-actions.js: -------------------------------------------------------------------------------- 1 | import { createAction } from "@reduxjs/toolkit"; 2 | 3 | export const setFilter = createAction("filter/set"); -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | } 5 | 6 | export default initialState; -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | } 5 | 6 | export default initialState; -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/sass-scss-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/sass-scss-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/sass-scss-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | } 5 | 6 | export default initialState; -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | } 5 | 6 | export default initialState; -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/redux/filter/filter-actions.js: -------------------------------------------------------------------------------- 1 | import { createAction } from "@reduxjs/toolkit"; 2 | 3 | export const setFilter = createAction("filter/set"); -------------------------------------------------------------------------------- /lesson-3-styling-components/react-icons-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/react-icons-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-3-styling-components/react-icons-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/react-icons-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-3-styling-components/react-icons-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/react-icons-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/useref-usecallback-hooks-short-example/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/03_redux-persist-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/03_redux-persist-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/03_redux-persist-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-3-styling-components/inline-style-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/inline-style-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-3-styling-components/inline-style-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/inline-style-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-3-styling-components/inline-style-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/inline-style-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/jsx-examples/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-1-JSX-function-components-props/jsx-examples/public/favicon.ico -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/jsx-examples/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-1-JSX-function-components-props/jsx-examples/public/logo192.png -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/jsx-examples/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-1-JSX-function-components-props/jsx-examples/public/logo512.png -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-16-async-redux-rtkquery/02_rtk-query-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-16-async-redux-rtkquery/02_rtk-query-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-16-async-redux-rtkquery/02_rtk-query-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/components/RegisterForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | name: "", 3 | email: "", 4 | password: "", 5 | } 6 | 7 | export default initialState; -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/components/RegisterForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | name: "", 3 | email: "", 4 | password: "", 5 | } 6 | 7 | export default initialState; -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/children-example/src/components/Button/Button.jsx: -------------------------------------------------------------------------------- 1 | export default function Button(props) { 2 | return ( 3 | 4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-3-styling-components/css-scss-modules-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/css-scss-modules-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-3-styling-components/css-scss-modules-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/css-scss-modules-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-3-styling-components/css-scss-modules-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/css-scss-modules-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-6-lifecycle-methods/lifecycle-methods-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-6-lifecycle-methods/lifecycle-methods-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-6-lifecycle-methods/lifecycle-methods-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-6-lifecycle-methods/lifecycle-methods-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-6-lifecycle-methods/lifecycle-methods-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-6-lifecycle-methods/lifecycle-methods-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/redux/filter/filter-actions.js: -------------------------------------------------------------------------------- 1 | import { createAction } from "@reduxjs/toolkit"; 2 | 3 | export const setFilter = createAction("filter/set"); -------------------------------------------------------------------------------- /lesson-3-styling-components/styled-components-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/styled-components-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-3-styling-components/styled-components-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/styled-components-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-3-styling-components/styled-components-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-3-styling-components/styled-components-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/src/modules/Navbar/local.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": { 3 | "ua": "Головне меню", 4 | "ru": "Главное меню" 5 | } 6 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/00-redux-combineReducers-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/00-redux-combineReducers-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/00-redux-combineReducers-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/children-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-2-children-defaultProps-PropTypes/children-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/children-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-2-children-defaultProps-PropTypes/children-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/children-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-2-children-defaultProps-PropTypes/children-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/components/PostsSearch/PostsSearchForm/post-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/redux/filter/filter-actions.js: -------------------------------------------------------------------------------- 1 | import { createAction } from "@reduxjs/toolkit"; 2 | 3 | export const setFilter = createAction("filter/set"); -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | favorite: false, 5 | } 6 | 7 | export default initialState; -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | favorite: false, 5 | } 6 | 7 | export default initialState; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/pages/ProductPage/AddPage/AddPage.jsx: -------------------------------------------------------------------------------- 1 | export default function AddPage() { 2 | return ( 3 |
Add Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-4-class-components-state-set-state-example/slides/Імперативний підхід.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-4-class-components-state-set-state-example/slides/Імперативний підхід.png -------------------------------------------------------------------------------- /lesson-4-class-components-state-set-state-example/slides/Декларативний підхід.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-4-class-components-state-set-state-example/slides/Декларативний підхід.png -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/components-props-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-1-JSX-function-components-props/components-props-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/components-props-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-1-JSX-function-components-props/components-props-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/components-props-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-1-JSX-function-components-props/components-props-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/pages/ProductPage/ListPage/ListPage.jsx: -------------------------------------------------------------------------------- 1 | export default function ListPage() { 2 | return ( 3 |
List Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/redux/filter/filter-actions.js: -------------------------------------------------------------------------------- 1 | import { createAction } from "@reduxjs/toolkit"; 2 | 3 | export const setFilter = createAction("filter/set"); -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | favorite: false, 5 | } 6 | 7 | export default initialState; -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/use-state-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-8-useState-useEffect-useRef-custom-hooks/use-state-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/use-state-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-8-useState-useEffect-useRef-custom-hooks/use-state-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/use-state-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-8-useState-useEffect-useRef-custom-hooks/use-state-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | favorite: false, 5 | } 6 | 7 | export default initialState; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/public/favicon.ico -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/public/logo192.png -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/public/logo512.png -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/components/PostsSearch/PostsSearchForm/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | search: "" 3 | } 4 | 5 | export default initialState; 6 | -------------------------------------------------------------------------------- /lesson-3-styling-components/src/components/Button/button.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | background-color: #fff; 3 | border: 1px solid red; 4 | border-radius: 5px; 5 | padding: 10px 15px; 6 | color: red; 7 | cursor: pointer; 8 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | favorite: false, 5 | } 6 | 7 | export default initialState; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/pages/ProductPage/SearchPage/SearchPage.jsx: -------------------------------------------------------------------------------- 1 | export default function SearchPage() { 2 | return ( 3 |
Search Page
4 | ) 5 | } 6 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/shared/styles/style.scss: -------------------------------------------------------------------------------- 1 | @import "fonts"; 2 | @import "reset"; 3 | @import "shared"; 4 | 5 | body { 6 | font-family: 'Roboto', sans-serif; 7 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/redux/auth/auth-selectors.js: -------------------------------------------------------------------------------- 1 | export const isLogin = ({auth}) => auth.isLogin; 2 | export const getUser = ({auth}) => auth.user; 3 | export const getLoadingUserStatus = ({auth}) => auth.isLoadingUser; -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/styles/utilities/Position.js: -------------------------------------------------------------------------------- 1 | import { css } from "styled-components"; 2 | 3 | // Css Helper 4 | export const fixedTop = css` 5 | position: fixed; 6 | top: ${({top}) => top + "px"}; 7 | left: 0; 8 | `; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | favorite: false, 5 | } 6 | 7 | export default initialState; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-4-class-components-state-set-state-example/slides/Алгоритм створення компоненту.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-4-class-components-state-set-state-example/slides/Алгоритм створення компоненту.png -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/src/modules/Navbar/Navbar.module.css: -------------------------------------------------------------------------------- 1 | .navbar { 2 | display: flex; 3 | justify-content: space-between; 4 | margin-bottom: 20px; 5 | padding: 20px 0; 6 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | favorite: false, 5 | } 6 | 7 | export default initialState; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/shared/styles/_fonts.scss: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap'); -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/public/favicon.ico -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/public/logo192.png -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/public/logo512.png -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/public/favicon.ico -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/public/logo192.png -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/public/logo512.png -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/form-with-useState-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-8-useState-useEffect-useRef-custom-hooks/form-with-useState-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/form-with-useState-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-8-useState-useEffect-useRef-custom-hooks/form-with-useState-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/form-with-useState-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-8-useState-useEffect-useRef-custom-hooks/form-with-useState-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/inline-style-example/src/components/Button/button.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | background-color: #fff; 3 | border: 1px solid red; 4 | border-radius: 5px; 5 | padding: 10px 15px; 6 | color: red; 7 | cursor: pointer; 8 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/react-icons-example/src/components/Button/button.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | background-color: #fff; 3 | border: 1px solid red; 4 | border-radius: 5px; 5 | padding: 10px 15px; 6 | color: red; 7 | cursor: pointer; 8 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/src/components/Button/button.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | background-color: #fff; 3 | border: 1px solid red; 4 | border-radius: 5px; 5 | padding: 10px 15px; 6 | color: red; 7 | cursor: pointer; 8 | } -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/components-props-example/src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import "./footer.css" 2 | 3 | export default function Footer({copyright}) { 4 | return ( 5 | 6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | import Books from "../../components/Books/Books"; 2 | 3 | export default function MyBooksPage() { 4 | return ( 5 | <> 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/styled-components-example/src/components/Button/button.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | background-color: #fff; 3 | border: 1px solid red; 4 | border-radius: 5px; 5 | padding: 10px 15px; 6 | color: red; 7 | cursor: pointer; 8 | } -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/src/components/PostsSearch/PostsSearchForm/post-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/redux/filter/filter-actions.js: -------------------------------------------------------------------------------- 1 | import { SET_FILTER } from "./filter-types"; 2 | 3 | export const setFilter = payload => { 4 | return { 5 | type: SET_FILTER, 6 | payload, 7 | } 8 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | import Books from "../../components/Books/Books"; 2 | 3 | export default function MyBooksPage() { 4 | return ( 5 | <> 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/components/Books/FormAddBook/initialState.js: -------------------------------------------------------------------------------- 1 | const initialState = { 2 | title: "", 3 | author: "", 4 | favorite: false, 5 | } 6 | 7 | export default initialState; -------------------------------------------------------------------------------- /lesson-3-styling-components/css-scss-modules-example/src/components/Button/Button.module.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | background-color: #fff; 3 | border: 1px solid red; 4 | border-radius: 5px; 5 | padding: 10px 15px; 6 | color: red; 7 | cursor: pointer; 8 | } -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/src/components/PostsSearch/PostsSearchForm/post-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | import Books from "../../components/Books/Books"; 2 | 3 | export default function MyBooksPage() { 4 | return ( 5 | <> 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /lesson-3-styling-components/src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import './footer.css'; 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 | Footer 7 |
8 | ) 9 | } 10 | 11 | export default Footer; -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/shared/components/TextField/text-field.module.scss: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/redux/selectors.js: -------------------------------------------------------------------------------- 1 | export const getBooks = store => store.books; 2 | 3 | export const getFavoriteBooks = ({books}) => { 4 | return books.filter(book => book.favorite) 5 | } 6 | 7 | export const getFilter = store => store.filter; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | import Books from "../../components/Books/Books"; 2 | 3 | export default function MyBooksPage() { 4 | return ( 5 | <> 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/src/components/PostsSearch/PostsSearchForm/post-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import UserRoute from "./UserRoute"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/redux/store.js: -------------------------------------------------------------------------------- 1 | import { createStore } from "redux"; 2 | import reducer from "./reducer"; 3 | 4 | const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()); 5 | 6 | export default store; -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | import Books from "../../components/Books/Books"; 2 | 3 | export default function MyBooksPage() { 4 | return ( 5 | <> 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | import Books from "../../components/Books/Books"; 2 | 3 | export default function MyBooksPage() { 4 | return ( 5 | <> 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/public/favicon.ico -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/public/logo192.png -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/public/logo512.png -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/components/Navbar/navbar.module.scss: -------------------------------------------------------------------------------- 1 | .navbar { 2 | padding: 15px 0; 3 | } 4 | 5 | .row { 6 | display: flex; 7 | justify-content: space-between; 8 | align-items: center; 9 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/components/PostsSearch/PostsSearchForm/posts-search-form.module.scss: -------------------------------------------------------------------------------- 1 | .form { 2 | max-width: 500px; 3 | margin: 25px auto; 4 | display: flex; 5 | align-items: center; 6 | } -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/src/components/Button/button.css: -------------------------------------------------------------------------------- 1 | .btn { 2 | background-color: #fff; 3 | border: 1px solid red; 4 | border-radius: 5px; 5 | padding: 10px 15px; 6 | color: red; 7 | cursor: pointer; 8 | } -------------------------------------------------------------------------------- /lesson-4-class-components-state-set-state-example/class-components-state-set-state-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-4-class-components-state-set-state-example/class-components-state-set-state-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-4-class-components-state-set-state-example/class-components-state-set-state-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-4-class-components-state-set-state-example/class-components-state-set-state-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-4-class-components-state-set-state-example/class-components-state-set-state-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-4-class-components-state-set-state-example/class-components-state-set-state-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import UserRoute from "./UserRoute"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import UserRoute from "./UserRoute"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/src/components/Button/Button.jsx: -------------------------------------------------------------------------------- 1 | import "./button.css"; 2 | 3 | const Button = ({text, type}) => { 4 | return () 5 | } 6 | 7 | export default Button; 8 | -------------------------------------------------------------------------------- /lesson-5-forms/form-basic-example/src/App.js: -------------------------------------------------------------------------------- 1 | import Books from './components/Books/Books'; 2 | import './App.css'; 3 | 4 | 5 | function App() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | 13 | export default App; 14 | -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/src/modules/LanguageSwitcher/LanguageSwitcher.module.css: -------------------------------------------------------------------------------- 1 | .lang { 2 | display: inline-block; 3 | margin: 0 10px; 4 | cursor: pointer; 5 | } 6 | 7 | .currentLang { 8 | font-weight: bold; 9 | } -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
Home Page
7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import UserRoute from "./UserRoute"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | import Books from "../../components/Books/Books"; 2 | 3 | export default function MyBooksPage() { 4 | return ( 5 | <> 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /lesson-3-styling-components/inline-style-example/src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import './footer.css'; 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 | Footer 7 |
8 | ) 9 | } 10 | 11 | export default Footer; -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import './footer.scss'; 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 | Footer 7 |
8 | ) 9 | } 10 | 11 | export default Footer; -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
Home Page
7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
Home Page
7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | import Books from "../../components/Books/Books"; 2 | 3 | export default function MyBooksPage() { 4 | return ( 5 | <> 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import UserRoute from "./UserRoute"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/components/Navbar/NavbarMenu/items.js: -------------------------------------------------------------------------------- 1 | import {nanoid} from 'nanoid'; 2 | 3 | const items = [ 4 | { 5 | id: nanoid(), 6 | to: "/my-books", 7 | text: "My Books" 8 | }, 9 | ]; 10 | 11 | export default items; 12 | -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/components/Navbar/NavbarMenu/items.js: -------------------------------------------------------------------------------- 1 | import {nanoid} from 'nanoid'; 2 | 3 | const items = [ 4 | { 5 | id: nanoid(), 6 | to: "/my-books", 7 | text: "My Books" 8 | }, 9 | ]; 10 | 11 | export default items; 12 | -------------------------------------------------------------------------------- /lesson-3-styling-components/css-scss-modules-example/src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import './footer.css'; 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 | Footer 7 |
8 | ) 9 | } 10 | 11 | export default Footer; -------------------------------------------------------------------------------- /lesson-3-styling-components/styled-components-example/src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import './footer.css'; 2 | 3 | const Footer = () => { 4 | return ( 5 |
6 | Footer 7 |
8 | ) 9 | } 10 | 11 | export default Footer; -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | export default function SubmitButton({text, onClick}) { 4 | return ( 5 | 6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import UserRoute from "./UserRoute"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import UserRoute from "./UserRoute"; 3 | 4 | function App() { 5 | return ( 6 |
7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
Home Page
7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
Home Page
7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/children-example/src/components/Card/card.css: -------------------------------------------------------------------------------- 1 | .card { 2 | border: 1px solid black; 3 | height: 300px; 4 | width: 300px; 5 | background-color: lightcyan; 6 | display: flex; 7 | align-items: center; 8 | justify-content: center; 9 | } -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/useref-usecallback-hooks-short-example/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/useref-usecallback-hooks-short-example/public/favicon.ico -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/useref-usecallback-hooks-short-example/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/useref-usecallback-hooks-short-example/public/logo192.png -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/useref-usecallback-hooks-short-example/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/pavlo-kadysh-courses/React-50/HEAD/lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/useref-usecallback-hooks-short-example/public/logo512.png -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/components-props-example/src/components/Header/HeaderMenu/HeaderMenuItem.jsx: -------------------------------------------------------------------------------- 1 | import "./header-menu.css"; 2 | 3 | export default function HeaderMenuItem({link, text}) { 4 | return ( 5 |
  • {text}
    • 6 | ) 7 | } -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
    Home Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | import PostsSearch from "../../components/PostsSearch/PostsSearch"; 2 | 3 | export default function PostsPage() { 4 | return ( 5 | <> 6 |
    Posts Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
    Home Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import UserRoute from "./UserRoute"; 3 | 4 | function App() { 5 | return ( 6 |
    7 | 8 |
    9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | import Books from "../../components/Books/Books"; 2 | 3 | export default function MyBooksPage() { 4 | return ( 5 | <> 6 | 7 | 8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | margin-bottom: 15px; 7 | } 8 | 9 | .field { 10 | padding: 10px 15px; 11 | } -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | margin-bottom: 15px; 7 | } 8 | 9 | .field { 10 | padding: 10px 15px; 11 | } -------------------------------------------------------------------------------- /lesson-5-forms/form-basic-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | import PostsSearch from "../../components/PostsSearch/PostsSearch"; 2 | 3 | export default function PostsPage() { 4 | return ( 5 | <> 6 |
    Posts Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import UserRoute from "./UserRoute"; 3 | 4 | function App() { 5 | return ( 6 |
    7 | 8 |
    9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
    Home Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | import PostsSearch from "../../components/PostsSearch/PostsSearch"; 2 | 3 | export default function PostsPage() { 4 | return ( 5 | <> 6 |
    Posts Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import "./footer.css"; 2 | 3 | const Footer = () => { 4 | return ( 5 |
    6 | Footer 7 |
    8 | ) 9 | } 10 | 11 | export default Footer; -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | import PostsSearch from "../../components/PostsSearch/PostsSearch"; 2 | 3 | export default function PostsPage() { 4 | return ( 5 | <> 6 |
    Posts Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
    Home Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/src/shared/components/TextField/text-field.module.scss: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/src/shared/components/TextField/text-field.module.scss: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/redux/filter/filter-reducer.js: -------------------------------------------------------------------------------- 1 | import { createReducer } from "@reduxjs/toolkit"; 2 | import { setFilter } from "./filter-actions"; 3 | 4 | const filterReducer = createReducer("", { 5 | [setFilter.type]: (_, {payload}) => payload 6 | }) 7 | 8 | export default filterReducer; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/shared/helpers/redux.js: -------------------------------------------------------------------------------- 1 | export const pendingCallback = (store) => { 2 | store.loading = true; 3 | } 4 | 5 | export const rejectedCallback = (store, {payload}) => { 6 | store.loading = false; 7 | store.error = payload; 8 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | import PostsSearch from "../../components/PostsSearch/PostsSearch"; 2 | 3 | export default function PostsPage() { 4 | return ( 5 | <> 6 |
    Posts Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | import PostsSearch from "../../components/PostsSearch/PostsSearch"; 2 | 3 | export default function PostsPage() { 4 | return ( 5 | <> 6 |
    Posts Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
    Home Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import UserRoute from "./UserRoute"; 3 | 4 | function App() { 5 | return ( 6 |
    7 | 8 |
    9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/hooks/useAuth.js: -------------------------------------------------------------------------------- 1 | import { useSelector } from "react-redux"; 2 | 3 | import { isLogin } from "../../redux/auth/auth-selectors"; 4 | 5 | const useAuth = () => { 6 | const result = useSelector(isLogin); 7 | 8 | return result; 9 | } 10 | 11 | export default useAuth; -------------------------------------------------------------------------------- /lesson-3-styling-components/react-icons-example/src/components/Footer/footer.css: -------------------------------------------------------------------------------- 1 | .footer { 2 | padding: 15px 0; 3 | background: lightblue; 4 | text-align: center; 5 | display: flex; 6 | align-items: center; 7 | justify-content: center; 8 | } 9 | 10 | .footer svg { 11 | margin: 0 20px; 12 | } -------------------------------------------------------------------------------- /lesson-6-lifecycle-methods/lifecycle-methods-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/src/shared/components/TextField/text-field.module.scss: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | import PostsSearch from "../../components/PostsSearch/PostsSearch"; 2 | 3 | export default function PostsPage() { 4 | return ( 5 | <> 6 |
    Posts Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/shared/components/TextField/text-field.module.css: -------------------------------------------------------------------------------- 1 | .formGroup { 2 | display: grid; 3 | grid-template-columns: 70px 1fr; 4 | align-items: center; 5 | gap: 20px; 6 | } 7 | 8 | .field { 9 | padding: 10px 15px; 10 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/shared/styles/_shared.scss: -------------------------------------------------------------------------------- 1 | .container { 2 | max-width: 1140px; 3 | padding: 0 15px; 4 | margin: 0 auto; 5 | } 6 | 7 | .page-title { 8 | font-weight: bold; 9 | font-size: 18px; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/redux/filter/filter-reducer.js: -------------------------------------------------------------------------------- 1 | import { createReducer } from "@reduxjs/toolkit"; 2 | import { setFilter } from "./filter-actions"; 3 | 4 | const filterReducer = createReducer("", { 5 | [setFilter.type]: (_, {payload}) => payload 6 | }) 7 | 8 | export default filterReducer; -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/children-example/src/components/Card/Card.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import './card.css'; 3 | 4 | export default function Card({children}) { 5 | console.log('children', children); 6 | return children && ( 7 |
    {children}
    8 | ) 9 | } 10 | -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/children-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-3-styling-components/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/components-props-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/redux/store.js: -------------------------------------------------------------------------------- 1 | import { createStore } from "redux"; 2 | import rootReducer from "./rootReducer"; 3 | 4 | const store = createStore( 5 | rootReducer, 6 | window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() 7 | ); 8 | 9 | export default store; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | import PostsSearch from "../../components/PostsSearch/PostsSearch"; 2 | 3 | export default function PostsPage() { 4 | return ( 5 | <> 6 |
    Posts Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/pages/HomePage/HomePage.jsx: -------------------------------------------------------------------------------- 1 | import Posts from "../../components/Posts/Posts"; 2 | 3 | export default function HomePage(props) { 4 | return ( 5 | <> 6 |
    Home Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/src/components/Header/HeaderMenu/HeaderMenuItem.jsx: -------------------------------------------------------------------------------- 1 | const HeaderMenuItem = ({link, text}) => { 2 | 3 | return (
  • 4 | {text} 5 |
    • ); 6 | } 7 | 8 | export default HeaderMenuItem; 9 | -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/src/modules/Main/locale.json: -------------------------------------------------------------------------------- 1 | { 2 | "title": { 3 | "ru": "Заголовок страницы", 4 | "ua": "Заголовок сторiнки" 5 | }, 6 | "content": { 7 | "ru": "Содержимое страницы", 8 | "ua": "Змiст сторiнки" 9 | } 10 | } -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/jsx-examples/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | import PostsSearch from "../../components/PostsSearch/PostsSearch"; 2 | 3 | export default function PostsPage() { 4 | return ( 5 | <> 6 |
    Posts Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | export default function SubmitButton({text, onClick}) { 4 | return ( 5 | 6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/use-state-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | export default function SubmitButton({text, onClick}) { 4 | return ( 5 | 6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/redux/filter/filter-reducer.js: -------------------------------------------------------------------------------- 1 | import { createReducer } from "@reduxjs/toolkit"; 2 | import { setFilter } from "./filter-actions"; 3 | 4 | const filterReducer = createReducer("", { 5 | [setFilter.type]: (_, {payload}) => payload 6 | }) 7 | 8 | export default filterReducer; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/components/Books/FormAddBook/form-add-book.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/children-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /lesson-6-lifecycle-methods/lifecycle-methods-example/src/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/form-with-useState-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/src/shared/hooks/useLang.js: -------------------------------------------------------------------------------- 1 | import { useContext } from "react" 2 | import { langContext } from "../../langContext" 3 | 4 | const useLang = () => { 5 | const context = useContext(langContext); 6 | 7 | return context; 8 | } 9 | 10 | export default useLang; -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/components-props-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | // import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/redux/filter/filter-reducer.js: -------------------------------------------------------------------------------- 1 | import { createReducer } from "@reduxjs/toolkit"; 2 | import { setFilter } from "./filter-actions"; 3 | 4 | const filterReducer = createReducer("", { 5 | [setFilter.type]: (_, {payload}) => payload 6 | }) 7 | 8 | export default filterReducer; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/shared/components/SubmitButton/submit-button.module.scss: -------------------------------------------------------------------------------- 1 | .btn { 2 | display: inline-block; 3 | background-color: #000; 4 | cursor: pointer; 5 | padding: 10px 15px; 6 | border: 1px solid ; 7 | border-radius: 5px; 8 | color: #fff; 9 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-3-styling-components/inline-style-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /lesson-3-styling-components/react-icons-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | export default function SubmitButton({text, onClick}) { 4 | return ( 5 | 6 | ) 7 | } 8 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/03_redux-persist-example/src/redux/books/books-reducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from "@reduxjs/toolkit"; 2 | 3 | import items from "./items/items-slice"; 4 | import filter from "./filter/filter-slice"; 5 | 6 | const bookReducer = combineReducers({ 7 | items, 8 | filter, 9 | }) 10 | 11 | export default bookReducer; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/pages/PostsPage/PostsPage.jsx: -------------------------------------------------------------------------------- 1 | import PostsSearch from "../../components/PostsSearch/PostsSearch"; 2 | 3 | export default function PostsPage() { 4 | return ( 5 | <> 6 |
    Posts Page
    7 | 8 | 9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/02_rtk-query-example/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-3-styling-components/css-scss-modules-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /lesson-3-styling-components/sass-scss-example/src/shared/styled/_mixins.scss: -------------------------------------------------------------------------------- 1 | @mixin flex($content: flex-start, $align: baseline) { 2 | display: flex; 3 | flex-wrap: wrap; 4 | @if ($content != flex-start) { 5 | justify-content: $content; 6 | } 7 | @if ($align != baseline) { 8 | align-items: $content; 9 | } 10 | } -------------------------------------------------------------------------------- /lesson-3-styling-components/styled-components-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /lesson-5-forms/form-basic-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/use-state-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/00-redux-combineReducers-example/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/02_redux-toolkit-createSlice-example/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/components/PostsSearch/posts-search.module.scss: -------------------------------------------------------------------------------- 1 | .postTitle { 2 | font-weight: bold; 3 | font-size: 18px; 4 | text-align: center; 5 | margin-bottom: 15px; 6 | } 7 | 8 | .postContent { 9 | text-align: center; 10 | margin-bottom: 15px; 11 | } -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/components/Navbar/NavbarAuth/NavbarAuth.jsx: -------------------------------------------------------------------------------- 1 | import { NavLink } from "react-router-dom" 2 | 3 | export default function NavbarAuth() { 4 | return ( 5 |
    6 | Register 7 | | 8 | Login 9 |
    10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/components/Navbar/NavbarAuth/NavbarAuth.jsx: -------------------------------------------------------------------------------- 1 | import { NavLink } from "react-router-dom" 2 | 3 | export default function NavbarAuth() { 4 | return ( 5 |
    6 | Register 7 | | 8 | Login 9 |
    10 | ) 11 | } 12 | -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/redux/filter/filter-reducer.js: -------------------------------------------------------------------------------- 1 | import { createReducer } from "@reduxjs/toolkit"; 2 | import { setFilter } from "./filter-actions"; 3 | 4 | const filterReducer = createReducer("", { 5 | [setFilter.type]: (_, {payload}) => payload 6 | }) 7 | 8 | export default filterReducer; -------------------------------------------------------------------------------- /lesson-4-class-components-state-set-state-example/class-components-state-set-state-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/context-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-15-async-redux/02_async-redux-createAsync-Thunk-createSlice/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/form-with-useState-example/src/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/endless-scroll-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/jsx-examples/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /lesson-12-questions/questions/src/shared/components/ColorPicker/ColorPicker.module.scss: -------------------------------------------------------------------------------- 1 | .ColorPicker { 2 | border: 1px solid grey; 3 | display: inline-block; 4 | } 5 | 6 | .ColorPicker__title { 7 | text-align: left; 8 | } 9 | 10 | .ColorPicker__option { 11 | display: inline-block; 12 | height: 30px; 13 | width: 30px; 14 | margin: 10px; 15 | } -------------------------------------------------------------------------------- /lesson-14-redux-toolkit/01_redux-toolkit-creatAction-createReducer-example/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/App.js: -------------------------------------------------------------------------------- 1 | import Navbar from "./components/Navbar/Navbar"; 2 | import UserRoutes from "./UserRoutes"; 3 | 4 | import "./shared/styles/style.scss"; 5 | 6 | function App() { 7 | return ( 8 |
    9 | 10 | 11 |
    12 | ); 13 | } 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/default-props-proptypes-examples/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /lesson-3-styling-components/react-icons-example/src/components/Footer/Footer.jsx: -------------------------------------------------------------------------------- 1 | import './footer.css'; 2 | import { BiAlarmSnooze, BiAtom } from "react-icons/bi"; 3 | 4 | const Footer = () => { 5 | return ( 6 |
    7 | Footer 8 |
    9 | ) 10 | } 11 | 12 | export default Footer; -------------------------------------------------------------------------------- /lesson-7-lifecycle-methods-api-modal/lifecycle-methods-api-modal-examples/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-8-useState-useEffect-useRef-custom-hooks/useEffect-advanced-example/src/shared/components/Loader/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './loader.module.scss'; 3 | 4 | export default function Loader() { 5 | return ( 6 |
    7 |
    8 |
    9 | ) 10 | } 11 | -------------------------------------------------------------------------------- /lesson-9-useRef-memo-useCallback-useMemo-custom-hooks-context/useref-usecallback-hooks-short-example/src/setupTests.js: -------------------------------------------------------------------------------- 1 | // jest-dom adds custom jest matchers for asserting on DOM nodes. 2 | // allows you to do things like: 3 | // expect(element).toHaveTextContent(/react/i) 4 | // learn more: https://github.com/testing-library/jest-dom 5 | import '@testing-library/jest-dom'; 6 | -------------------------------------------------------------------------------- /lesson-1-JSX-function-components-props/components-props-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById("root")); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | -------------------------------------------------------------------------------- /lesson-13-redux/1-redux-basic-example/src/shared/components/PostList/post-list.module.scss: -------------------------------------------------------------------------------- 1 | .list { 2 | display: grid; 3 | grid-template-columns: repeat(4, 1fr); 4 | gap: 30px; 5 | margin-bottom: 30px; 6 | } 7 | 8 | .item { 9 | border: 1px solid; 10 | border-radius: 3px; 11 | padding: 15px; 12 | text-align: center; 13 | height: 100px; 14 | } -------------------------------------------------------------------------------- /lesson-15-async-redux/01_async-redux-example/src/redux/rootReducer.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from "redux"; 2 | 3 | import booksReducer from "./books/books-reducer"; 4 | import filterReducer from "./filter/filter-reducer"; 5 | 6 | const rootReducer = combineReducers({ 7 | books: booksReducer, 8 | filter: filterReducer 9 | }); 10 | 11 | export default rootReducer; -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/shared/components/PostList/post-list.module.scss: -------------------------------------------------------------------------------- 1 | .list { 2 | display: grid; 3 | grid-template-columns: repeat(4, 1fr); 4 | gap: 30px; 5 | margin-bottom: 30px; 6 | } 7 | 8 | .item { 9 | border: 1px solid; 10 | border-radius: 3px; 11 | padding: 15px; 12 | text-align: center; 13 | height: 100px; 14 | } -------------------------------------------------------------------------------- /lesson-18-register-login/auth-example/src/shared/components/PostList/post-list.module.scss: -------------------------------------------------------------------------------- 1 | .list { 2 | display: grid; 3 | grid-template-columns: repeat(4, 1fr); 4 | gap: 30px; 5 | margin-bottom: 30px; 6 | } 7 | 8 | .item { 9 | border: 1px solid; 10 | border-radius: 3px; 11 | padding: 15px; 12 | text-align: center; 13 | height: 100px; 14 | } -------------------------------------------------------------------------------- /lesson-2-children-defaultProps-PropTypes/children-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | const root = ReactDOM.createRoot(document.getElementById('root')); 7 | root.render( 8 | 9 | 10 | 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /lesson-4-class-components-state-set-state-example/class-components-state-set-state-example/src/App.test.js: -------------------------------------------------------------------------------- 1 | import { render, screen } from '@testing-library/react'; 2 | import App from './App'; 3 | 4 | test('renders learn react link', () => { 5 | render(); 6 | const linkElement = screen.getByText(/learn react/i); 7 | expect(linkElement).toBeInTheDocument(); 8 | }); 9 | -------------------------------------------------------------------------------- /lesson-6-lifecycle-methods/lifecycle-methods-example/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | 7 | const root = ReactDOM.createRoot(document.getElementById('root')); 8 | root.render( 9 | // 10 | 11 | // 12 | ); 13 | -------------------------------------------------------------------------------- /lesson-10-react-router-dom/react-router-1/src/shared/components/PostList/post-list.module.scss: -------------------------------------------------------------------------------- 1 | .list { 2 | display: grid; 3 | grid-template-columns: repeat(4, 1fr); 4 | gap: 30px; 5 | margin-bottom: 30px; 6 | } 7 | 8 | .item { 9 | border: 1px solid; 10 | border-radius: 3px; 11 | padding: 15px; 12 | text-align: center; 13 | height: 100px; 14 | } -------------------------------------------------------------------------------- /lesson-11-react-router-dom/react-router-2/src/shared/components/PostList/post-list.module.scss: -------------------------------------------------------------------------------- 1 | .list { 2 | display: grid; 3 | grid-template-columns: repeat(4, 1fr); 4 | gap: 30px; 5 | margin-bottom: 30px; 6 | } 7 | 8 | .item { 9 | border: 1px solid; 10 | border-radius: 3px; 11 | padding: 15px; 12 | text-align: center; 13 | height: 100px; 14 | } -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/components/PostsSearch/PostsSearchForm/fields.js: -------------------------------------------------------------------------------- 1 | const fields = { 2 | search: { 3 | label: "Search", 4 | type: "text", 5 | name: "search", 6 | placeholder: "Enter search text", 7 | required: true, 8 | } 9 | } 10 | 11 | export default fields; -------------------------------------------------------------------------------- /lesson-16-async-redux-rtkquery/01_async-redux-createAsync-Thunk-createSlice-optimization/src/shared/components/SubmitButton/SubmitButton.jsx: -------------------------------------------------------------------------------- 1 | import styles from "./submit-button.module.scss"; 2 | 3 | const SubmitButton = ({text, onClick}) => { 4 | return ( 5 | 6 | ) 7 | } 8 | 9 | export default SubmitButton; -------------------------------------------------------------------------------- /lesson-17-register-login/auth-example/src/pages/MyBooksPage/MyBooksPage.jsx: -------------------------------------------------------------------------------- 1 | import Books from "../../components/Books/Books" 2 | 3 | const MyBooksPage = () => { 4 | return ( 5 |
    6 |

    My books page

    7 | 8 |
    9 | ) 10 | } 11 | 12 | export default MyBooksPage; --------------------------------------------------------------------------------