├── Day 3 ├── .gitkeep ├── src │ ├── config.js │ ├── App.js │ ├── App.test.js │ ├── index.js │ ├── MessageList.js │ └── App.css ├── public │ ├── favicon.ico │ └── manifest.json ├── config │ └── jest │ │ ├── cssTransform.js │ │ └── fileTransform.js └── .gitignore ├── Day 4 Quiz ├── .gitkeep ├── public │ └── index.html ├── src │ ├── Hello.js │ ├── index.js │ └── components │ │ ├── Question.js │ │ ├── QuestionCount.js │ │ ├── AnswerOption.js │ │ └── Result.js ├── .gitignore └── package.json ├── Day 4.1 Netflix Clone ├── .gitkeep ├── public │ └── index.html ├── src │ ├── index.js │ └── components │ │ ├── partails │ │ ├── navigation.js │ │ ├── header.js │ │ ├── serachBar.js │ │ └── hero.js │ │ ├── Item.js │ │ └── ListToggle.js ├── .gitignore └── package.json ├── Day 8 Book Store ├── src │ ├── index.css │ ├── index.js │ ├── App.test.js │ └── components │ │ ├── SignOut.js │ │ └── PrivateRoute.js ├── public │ ├── book.png │ ├── manifest.json │ └── index.html ├── .gitignore └── package.json ├── Day 5.1 React Blog App ├── client │ ├── src │ │ ├── App.css │ │ ├── index.css │ │ ├── components │ │ │ ├── post-create.js │ │ │ ├── header.js │ │ │ └── home.js │ │ ├── services │ │ │ └── axios.js │ │ ├── index.js │ │ └── App.test.js │ ├── public │ │ ├── book.png │ │ ├── manifest.json │ │ └── index.html │ ├── .gitignore │ └── package.json └── server │ ├── logs │ └── applog.log │ ├── .env │ ├── app │ ├── util │ │ ├── logger.js │ │ └── common.util.js │ ├── models │ │ ├── post.js │ │ └── user.js │ ├── routes │ │ ├── post.route.js │ │ └── user.route.js │ └── service │ │ └── user.service.js │ ├── config │ └── env │ │ ├── test.js │ │ ├── development.js │ │ ├── secure.js │ │ ├── all.js │ │ └── production.js │ ├── .babelrc │ ├── .gitignore │ └── server.js ├── Day 9 Redux ├── ES6 Redux App Books │ ├── style │ │ └── style.css │ ├── .babelrc │ ├── .gitignore │ ├── src │ │ ├── actions │ │ │ └── index.js │ │ ├── reducers │ │ │ ├── reducer_books.js │ │ │ ├── index.js │ │ │ └── reducer_active_book.js │ │ ├── components │ │ │ └── app.js │ │ ├── index.js │ │ └── containers │ │ │ └── book-detail.js │ ├── index.html │ ├── webpack.config.js │ └── package.json └── React Redux App │ ├── javascripts │ ├── constants │ │ ├── TodoFilters.js │ │ └── ActionTypes.js │ ├── reducers │ │ └── index.js │ ├── store │ │ └── configureStore.js │ ├── components │ │ └── Header.js │ ├── actions │ │ └── todos.js │ └── containers │ │ └── App.js │ ├── .gitignore │ ├── webpack.config.js │ ├── index.html │ ├── index.js │ └── package.json ├── Day 11 Redux ├── src │ ├── App │ │ └── index.js │ ├── HomePage │ │ └── index.js │ ├── LoginPage │ │ └── index.js │ ├── RegisterPage │ │ └── index.js │ ├── _components │ │ ├── index.js │ │ └── PrivateRoute.js │ ├── _services │ │ └── index.js │ ├── _actions │ │ ├── index.js │ │ └── alert.actions.js │ ├── _constants │ │ ├── index.js │ │ ├── alert.constants.js │ │ └── user.constants.js │ ├── _helpers │ │ ├── history.js │ │ ├── index.js │ │ ├── auth-header.js │ │ └── store.js │ ├── _reducers │ │ ├── index.js │ │ ├── registration.reducer.js │ │ ├── alert.reducer.js │ │ └── authentication.reducer.js │ └── index.js ├── .gitignore ├── package.json └── public │ └── index.html ├── Day 1 ├── .babelrc ├── src │ └── index.html ├── dist │ └── index.html └── package.json ├── Day 5 Github Battle ├── README.md ├── app │ ├── components │ │ ├── main │ │ │ └── index.less │ │ ├── battle │ │ │ └── app.js │ │ └── overview │ │ │ └── pages │ │ │ └── repoListItemComponent.js │ ├── fonts │ │ ├── Roboto-Black.ttf │ │ ├── Roboto-Bold.ttf │ │ ├── Roboto-Light.ttf │ │ ├── Roboto-Italic.ttf │ │ ├── Roboto-Medium.ttf │ │ └── Roboto-Regular.ttf │ ├── index.js │ └── utils │ │ └── helper │ │ └── utilHelper.js ├── public │ ├── images │ │ ├── logo.png │ │ └── github-logo-icon-0.png │ └── index.html ├── config │ ├── jest │ │ ├── setup.js │ │ ├── fileTransform.js │ │ └── cssTransform.js │ └── polyfills.js ├── .gitignore └── scripts │ └── test.js ├── Day 7 YouTube App ├── README.md ├── public │ ├── index.css │ └── images │ │ ├── logo.png │ │ └── github-logo-icon-0.png ├── app │ ├── fonts │ │ ├── Roboto-Black.ttf │ │ ├── Roboto-Bold.ttf │ │ ├── Roboto-Light.ttf │ │ ├── Roboto-Italic.ttf │ │ ├── Roboto-Medium.ttf │ │ └── Roboto-Regular.ttf │ ├── utils │ │ └── helper │ │ │ └── utilHelper.js │ └── components │ │ ├── video_list.js │ │ ├── video_list_item.js │ │ ├── search_bar.js │ │ └── video_detail.js ├── config │ ├── jest │ │ ├── setup.js │ │ ├── fileTransform.js │ │ └── cssTransform.js │ └── polyfills.js ├── .gitignore ├── scripts │ └── test.js └── index.html ├── Day 5.1 Dashboard App ├── src │ ├── views │ │ ├── SignIn │ │ │ ├── index.js │ │ │ └── SignIn.js │ │ ├── ViewJobs │ │ │ └── index.js │ │ ├── Dashboard │ │ │ ├── index.js │ │ │ └── Dashboard.js │ │ ├── index.js │ │ └── NewJob │ │ │ ├── index.js │ │ │ └── TabPanel.js │ ├── layouts │ │ ├── Empty │ │ │ ├── index.js │ │ │ └── Empty.js │ │ ├── Main │ │ │ ├── index.js │ │ │ └── components │ │ │ │ ├── Footer │ │ │ │ ├── index.js │ │ │ │ └── Footer.js │ │ │ │ ├── Sidebar │ │ │ │ ├── index.js │ │ │ │ └── components │ │ │ │ │ ├── Profile │ │ │ │ │ └── index.js │ │ │ │ │ ├── SidebarNav │ │ │ │ │ └── index.js │ │ │ │ │ └── index.js │ │ │ │ ├── Topbar │ │ │ │ └── index.js │ │ │ │ └── index.js │ │ └── index.js │ ├── components │ │ ├── StatusBullet │ │ │ └── index.js │ │ ├── SearchInput │ │ │ └── index.js │ │ ├── RouteWithLayout │ │ │ └── index.js │ │ └── index.js │ ├── theme │ │ ├── overrides │ │ │ ├── MuiTypography.js │ │ │ ├── MuiPaper.js │ │ │ ├── MuiTableHead.js │ │ │ ├── MuiButton.js │ │ │ ├── MuiIconButton.js │ │ │ ├── MuiTableCell.js │ │ │ ├── MuiTableRow.js │ │ │ └── index.js │ │ └── index.js │ ├── container │ │ └── context.js │ ├── index.js │ ├── utils │ │ └── utils.js │ └── assets │ │ └── scss │ │ └── index.scss ├── jsconfig.json └── public │ ├── manifest.json │ └── index.html ├── Day 7.1 Shopping Cart ├── src │ ├── scss │ │ ├── base │ │ │ ├── _index.scss │ │ │ └── _colors.scss │ │ ├── style.scss │ │ └── components │ │ │ ├── _index.scss │ │ │ └── _footer.scss │ ├── favicon.ico │ ├── empty-states │ │ ├── EmptyCart.js │ │ └── NoResults.js │ ├── loaders │ │ ├── Product.js │ │ └── Products.js │ ├── index.html │ └── components │ │ └── Footer.js ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json └── .gitignore ├── react.png ├── Day 2 ├── public │ ├── robots.txt │ ├── favicon.ico │ ├── logo192.png │ ├── logo512.png │ └── manifest.json ├── src │ ├── setupTests.js │ ├── App.test.js │ ├── index.js │ ├── Training.js │ └── App.js └── package.json ├── Day 14 Lazy Load ├── src │ ├── styles.css │ ├── Home.js │ ├── AnotherHome.js │ ├── index.js │ ├── SuspenseFallback.js │ ├── Header.js │ └── App.js └── package.json ├── Day 10 Redux ├── src │ ├── index.css │ ├── index.js │ ├── App.test.js │ ├── modules │ │ ├── store.js │ │ ├── action.js │ │ └── reducer.js │ ├── App.css │ └── App.js ├── public │ ├── favicon.ico │ └── manifest.json ├── README.md ├── .gitignore └── package.json ├── Day 13 Next JS ├── next-env.d.ts ├── static │ ├── umb0.jpg │ ├── umb1.jpg │ ├── umb10.jpg │ ├── umb2.jpg │ ├── umb3.jpg │ ├── umb4.jpg │ ├── umb5.jpg │ ├── umb6.jpg │ ├── umb7.jpg │ ├── umb8.jpg │ ├── umb9.jpg │ ├── logo.svg │ └── profile.svg ├── components │ ├── CartContext.js │ ├── Footer.tsx │ ├── ProductList.tsx │ ├── banner.tsx │ ├── CartList.tsx │ ├── interface.tsx │ └── Header.tsx ├── pages │ └── api │ │ └── products.tsx ├── next.config.js ├── tsconfig.json └── package.json ├── Day 4.2 Weather App ├── src │ ├── index.css │ ├── img │ │ └── bg.jpg │ ├── App.test.js │ ├── components │ │ ├── Titles.js │ │ └── Form.js │ └── index.js ├── public │ ├── favicon.ico │ └── manifest.json ├── .gitignore └── package.json ├── Day 8.0 context API ├── src │ ├── index.css │ ├── index.js │ ├── App.test.js │ └── App.css ├── public │ ├── favicon.ico │ └── manifest.json ├── .gitignore └── package.json ├── Day 8.2 Hooks ├── src │ ├── index.css │ ├── index.js │ └── forms │ │ └── AddUserForm.js ├── public │ ├── favicon.ico │ └── manifest.json ├── README.md └── package.json ├── Day 12 ├── public │ ├── favicon.ico │ └── manifest.json ├── src │ ├── App.css │ ├── index.js │ ├── index.css │ ├── components │ │ ├── Display │ │ │ ├── Display.css │ │ │ └── Display.js │ │ ├── Panel │ │ │ └── Panel.css │ │ └── Button │ │ │ ├── Button.css │ │ │ └── Button.js │ ├── tests │ │ ├── operate.test.js │ │ ├── Panel.test.js │ │ └── Display.test.js │ ├── logic │ │ └── operate.js │ └── App.js ├── .gitignore └── package.json ├── Day 6 Charts ├── public │ ├── map.png │ ├── favicon.ico │ ├── manifest.json │ └── index.html ├── src │ ├── index.js │ ├── App.test.js │ ├── App.js │ ├── App.css │ ├── Header │ │ └── header.js │ ├── Home │ │ └── searchBarFilter.js │ ├── common │ │ └── select.js │ └── heatMapCharts │ │ └── changeHeatMapData.js ├── .gitignore └── package.json ├── Day 8.1 Hooks Simple Cart ├── src │ ├── index.css │ └── index.js ├── public │ ├── favicon.ico │ └── manifest.json ├── .gitignore └── package.json ├── Day 8.3 Hooks Simple Cart-2 ├── src │ ├── index.css │ └── index.js ├── public │ ├── favicon.ico │ └── manifest.json ├── .gitignore └── package.json ├── _React Redux - 40 Hours.pdf ├── Day 4.3 Hacker Clone App ├── src │ ├── assets │ │ ├── scss │ │ │ ├── components │ │ │ │ ├── _layout.scss │ │ │ │ ├── _footer.scss │ │ │ │ ├── _loading.scss │ │ │ │ ├── _button.scss │ │ │ │ ├── _navbar.scss │ │ │ │ └── _comment.scss │ │ │ ├── utils │ │ │ │ └── _variables.scss │ │ │ └── main.scss │ │ └── imgs │ │ │ ├── logo.gif │ │ │ └── loading.gif │ ├── pages │ │ ├── 404 │ │ │ └── index.js │ │ └── user │ │ │ └── index.js │ ├── components │ │ ├── footer │ │ │ └── index.js │ │ ├── loading │ │ │ └── index.js │ │ ├── layout │ │ │ └── index.js │ │ ├── navbar │ │ │ └── index.js │ │ └── comments │ │ │ └── index.js │ ├── index.js │ └── App.js ├── public │ ├── favicon.ico │ └── manifest.json ├── .gitignore ├── README.md └── package.json ├── Day 5.2 Shopping Cart Redux-2 ├── src │ ├── components │ │ ├── Cart │ │ │ ├── index.js │ │ │ ├── Cart.css │ │ │ └── CartItem.js │ │ ├── Product │ │ │ ├── index.js │ │ │ └── Product.css │ │ └── ProductList │ │ │ ├── index.js │ │ │ ├── ProductList.css │ │ │ └── ProductList.js │ ├── containers │ │ ├── ProductList.js │ │ ├── Product.js │ │ └── Cart.js │ ├── ducks │ │ └── products.js │ └── index.js └── public │ ├── favicon.ico │ └── images │ ├── 01.jpg │ ├── 02.jpg │ ├── 03.jpg │ ├── 04.jpg │ ├── 05.jpg │ └── 06.jpg ├── Day 3.2 Flicker App ├── public │ ├── favicon.ico │ └── manifest.json ├── src │ ├── variables.scss │ ├── app.test.js │ ├── app.scss │ ├── services │ │ ├── search-service.js │ │ ├── giphy-service.js │ │ └── flicker-service.js │ ├── components │ │ ├── photos │ │ │ ├── photo.scss │ │ │ └── photos.js │ │ └── videos │ │ │ └── videos.js │ ├── index.css │ └── index.js ├── .gitignore ├── package.json └── README.md ├── Day 3.1 React Router App ├── public │ └── favicon.ico ├── src │ ├── index.js │ ├── not-found │ │ └── NotFound.js │ ├── events │ │ ├── EventFilters.js │ │ └── EventItem.js │ ├── settings │ │ └── Settings.js │ ├── helpers │ │ └── AuthHelper.js │ └── login │ │ └── Login.js ├── .gitignore └── package.json ├── Day 3.0 React Router Intro ├── public │ └── favicon.ico ├── src │ ├── home.js │ ├── index.js │ ├── notfound.js │ ├── team-child.js │ ├── header.js │ ├── private.js │ └── team.js ├── .gitignore └── package.json └── .gitignore /Day 3/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 4 Quiz/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 4.1 Netflix Clone/.gitkeep: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 8 Book Store/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/src/App.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/src/index.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/logs/applog.log: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/style/style.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 11 Redux/src/App/index.js: -------------------------------------------------------------------------------- 1 | export * from './App'; -------------------------------------------------------------------------------- /Day 4 Quiz/public/index.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /Day 11 Redux/src/HomePage/index.js: -------------------------------------------------------------------------------- 1 | export * from './HomePage'; -------------------------------------------------------------------------------- /Day 11 Redux/src/LoginPage/index.js: -------------------------------------------------------------------------------- 1 | export * from './LoginPage'; -------------------------------------------------------------------------------- /Day 4.1 Netflix Clone/public/index.html: -------------------------------------------------------------------------------- 1 |
-------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/src/components/post-create.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 1/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "plugins": ["transform-react-jsx"] 3 | } -------------------------------------------------------------------------------- /Day 11 Redux/src/RegisterPage/index.js: -------------------------------------------------------------------------------- 1 | export * from './RegisterPage'; -------------------------------------------------------------------------------- /Day 11 Redux/src/_components/index.js: -------------------------------------------------------------------------------- 1 | export * from './PrivateRoute'; 2 | -------------------------------------------------------------------------------- /Day 11 Redux/src/_services/index.js: -------------------------------------------------------------------------------- 1 | export * from './user.service'; 2 | -------------------------------------------------------------------------------- /Day 5 Github Battle/README.md: -------------------------------------------------------------------------------- 1 | # Github Battel App using React Router 2 | 3 | -------------------------------------------------------------------------------- /Day 7 YouTube App/README.md: -------------------------------------------------------------------------------- 1 | # Github Battel App using React Router 2 | 3 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/views/SignIn/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './SignIn'; 2 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/views/ViewJobs/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './grid'; 2 | -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/scss/base/_index.scss: -------------------------------------------------------------------------------- 1 | @import 'colors'; 2 | @import 'reset'; -------------------------------------------------------------------------------- /Day 3/src/config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | api_key: 'be043073437be0082a4c47952b1758c1' 3 | } -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Empty/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Empty'; 2 | 3 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Main/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Main'; 2 | 3 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/views/Dashboard/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Dashboard'; 2 | -------------------------------------------------------------------------------- /react.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/react.png -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/components/StatusBullet/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './StatusBullet' -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/scss/style.scss: -------------------------------------------------------------------------------- 1 | @import 'base/index'; 2 | @import 'components/index'; -------------------------------------------------------------------------------- /Day 2/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/components/SearchInput/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './SearchInput'; 2 | -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react", "es2015", "stage-1"] 3 | } 4 | -------------------------------------------------------------------------------- /Day 11 Redux/src/_actions/index.js: -------------------------------------------------------------------------------- 1 | export * from './alert.actions'; 2 | export * from './user.actions'; 3 | -------------------------------------------------------------------------------- /Day 11 Redux/src/_constants/index.js: -------------------------------------------------------------------------------- 1 | export * from './alert.constants'; 2 | export * from './user.constants'; -------------------------------------------------------------------------------- /Day 14 Lazy Load/src/styles.css: -------------------------------------------------------------------------------- 1 | .App { 2 | font-family: sans-serif; 3 | text-align: center; 4 | } 5 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Main/components/Footer/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Footer'; 2 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Main/components/Sidebar/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Sidebar'; 2 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Main/components/Topbar/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Topbar'; 2 | -------------------------------------------------------------------------------- /Day 10 Redux/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Day 13 Next JS/next-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/components/RouteWithLayout/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './RouteWithLayout'; 2 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/.env: -------------------------------------------------------------------------------- 1 | ENV=development 2 | PORT=3306 3 | MONGO=mongodb://192.168.100.7:27017/test1 -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/app/util/logger.js: -------------------------------------------------------------------------------- 1 | var logger = require('winston'); 2 | 3 | export default logger; -------------------------------------------------------------------------------- /Day 4 Quiz/src/Hello.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default ({ name }) =>

Hello {name}!

; 4 | -------------------------------------------------------------------------------- /Day 4.2 Weather App/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/config/env/test.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const config = { 4 | 5 | }; 6 | export default config; 7 | -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /Day 8.0 context API/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: sans-serif; 5 | } 6 | -------------------------------------------------------------------------------- /Day 2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 2/public/favicon.ico -------------------------------------------------------------------------------- /Day 2/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 2/public/logo192.png -------------------------------------------------------------------------------- /Day 2/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 2/public/logo512.png -------------------------------------------------------------------------------- /Day 3/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 3/public/favicon.ico -------------------------------------------------------------------------------- /Day 8.2 Hooks/src/index.css: -------------------------------------------------------------------------------- 1 | button, 2 | .button { 3 | margin-bottom: 0 !important; 4 | margin-right: .5rem; 5 | } 6 | -------------------------------------------------------------------------------- /Day 12/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 12/public/favicon.ico -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Main/components/Sidebar/components/Profile/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './Profile'; 2 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "baseUrl": "src" 4 | }, 5 | "include": ["src"] 6 | } 7 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Main/components/Sidebar/components/SidebarNav/index.js: -------------------------------------------------------------------------------- 1 | export { default } from './SidebarNav'; 2 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["add-module-exports"] 4 | } -------------------------------------------------------------------------------- /Day 6 Charts/public/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 6 Charts/public/map.png -------------------------------------------------------------------------------- /Day 8.1 Hooks Simple Cart/src/index.css: -------------------------------------------------------------------------------- 1 | button, 2 | .button { 3 | margin-bottom: 0 !important; 4 | margin-right: .5rem; 5 | } 6 | -------------------------------------------------------------------------------- /Day 8.3 Hooks Simple Cart-2/src/index.css: -------------------------------------------------------------------------------- 1 | button, 2 | .button { 3 | margin-bottom: 0 !important; 4 | margin-right: .5rem; 5 | } 6 | -------------------------------------------------------------------------------- /_React Redux - 40 Hours.pdf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/_React Redux - 40 Hours.pdf -------------------------------------------------------------------------------- /Day 10 Redux/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 10 Redux/public/favicon.ico -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb0.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb0.jpg -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb1.jpg -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb10.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb10.jpg -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb2.jpg -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb3.jpg -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb4.jpg -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb5.jpg -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb6.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb6.jpg -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb7.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb7.jpg -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb8.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb8.jpg -------------------------------------------------------------------------------- /Day 13 Next JS/static/umb9.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 13 Next JS/static/umb9.jpg -------------------------------------------------------------------------------- /Day 5 Github Battle/app/components/main/index.less: -------------------------------------------------------------------------------- 1 | .header-icon { 2 | margin: 0 15px; 3 | i { 4 | font-size: 20px; 5 | } 6 | } -------------------------------------------------------------------------------- /Day 6 Charts/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 6 Charts/public/favicon.ico -------------------------------------------------------------------------------- /Day 10 Redux/README.md: -------------------------------------------------------------------------------- 1 | # todo-redux-app 2 | 3 | tutorial: How to use Redux in your react application? 4 | 5 | Code of a todo-redux-app 6 | -------------------------------------------------------------------------------- /Day 11 Redux/src/_helpers/history.js: -------------------------------------------------------------------------------- 1 | import { createBrowserHistory } from 'history'; 2 | 3 | export const history = createBrowserHistory(); -------------------------------------------------------------------------------- /Day 4.2 Weather App/src/img/bg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 4.2 Weather App/src/img/bg.jpg -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/assets/scss/components/_layout.scss: -------------------------------------------------------------------------------- 1 | .layout { 2 | padding: 10px 15px; 3 | background-color: $bg-color; 4 | } -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/index.js: -------------------------------------------------------------------------------- 1 | export { default as Main } from './Main'; 2 | export { default as Empty } from './Empty'; 3 | 4 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/theme/overrides/MuiTypography.js: -------------------------------------------------------------------------------- 1 | export default { 2 | gutterBottom: { 3 | marginBottom: 8 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /Day 8 Book Store/public/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 8 Book Store/public/book.png -------------------------------------------------------------------------------- /Day 8.2 Hooks/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 8.2 Hooks/public/favicon.ico -------------------------------------------------------------------------------- /Day 12/src/App.css: -------------------------------------------------------------------------------- 1 | .component-app { 2 | display: flex; 3 | flex-direction: column; 4 | flex-wrap: wrap; 5 | height: 100%; 6 | } 7 | -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/components/Cart/index.js: -------------------------------------------------------------------------------- 1 | import Cart from './Cart'; 2 | import './Cart.css'; 3 | 4 | export default Cart; 5 | -------------------------------------------------------------------------------- /Day 7 YouTube App/public/index.css: -------------------------------------------------------------------------------- 1 | .app-container { 2 | max-width: 1200px; 3 | width: 80%; 4 | margin: 0 auto; 5 | padding: 50px; 6 | } 7 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 3.2 Flicker App/public/favicon.ico -------------------------------------------------------------------------------- /Day 4.2 Weather App/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 4.2 Weather App/public/favicon.ico -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7.1 Shopping Cart/src/favicon.ico -------------------------------------------------------------------------------- /Day 8.0 context API/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 8.0 context API/public/favicon.ico -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/src/services/axios.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | export default axios.create({ 3 | baseURL: `http://localhost:3000` 4 | }); -------------------------------------------------------------------------------- /Day 7 YouTube App/public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7 YouTube App/public/images/logo.png -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7.1 Shopping Cart/public/favicon.ico -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7.1 Shopping Cart/public/logo192.png -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7.1 Shopping Cart/public/logo512.png -------------------------------------------------------------------------------- /Day 11 Redux/src/_helpers/index.js: -------------------------------------------------------------------------------- 1 | export * from './fake-backend'; 2 | export * from './history'; 3 | export * from './store'; 4 | export * from './auth-header'; -------------------------------------------------------------------------------- /Day 13 Next JS/components/CartContext.js: -------------------------------------------------------------------------------- 1 | import { createContext } from 'react'; 2 | 3 | const CartContext = createContext(); 4 | 5 | export default CartContext; -------------------------------------------------------------------------------- /Day 3.1 React Router App/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 3.1 React Router App/public/favicon.ico -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 4.3 Hacker Clone App/public/favicon.ico -------------------------------------------------------------------------------- /Day 5 Github Battle/public/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5 Github Battle/public/images/logo.png -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/container/context.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MyContext = React.createContext(); 4 | 5 | export default MyContext; 6 | -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/components/Product/index.js: -------------------------------------------------------------------------------- 1 | import Product from './Product'; 2 | import './Product.css'; 3 | 4 | export default Product; 5 | -------------------------------------------------------------------------------- /Day 7 YouTube App/app/fonts/Roboto-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7 YouTube App/app/fonts/Roboto-Black.ttf -------------------------------------------------------------------------------- /Day 7 YouTube App/app/fonts/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7 YouTube App/app/fonts/Roboto-Bold.ttf -------------------------------------------------------------------------------- /Day 7 YouTube App/app/fonts/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7 YouTube App/app/fonts/Roboto-Light.ttf -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/scss/components/_index.scss: -------------------------------------------------------------------------------- 1 | @import "header"; 2 | @import "products"; 3 | @import "product"; 4 | @import "footer"; 5 | @import "modal"; -------------------------------------------------------------------------------- /Day 8.1 Hooks Simple Cart/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 8.1 Hooks Simple Cart/public/favicon.ico -------------------------------------------------------------------------------- /Day 3.0 React Router Intro/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 3.0 React Router Intro/public/favicon.ico -------------------------------------------------------------------------------- /Day 5 Github Battle/app/fonts/Roboto-Black.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5 Github Battle/app/fonts/Roboto-Black.ttf -------------------------------------------------------------------------------- /Day 5 Github Battle/app/fonts/Roboto-Bold.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5 Github Battle/app/fonts/Roboto-Bold.ttf -------------------------------------------------------------------------------- /Day 5 Github Battle/app/fonts/Roboto-Light.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5 Github Battle/app/fonts/Roboto-Light.ttf -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/public/book.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5.1 React Blog App/client/public/book.png -------------------------------------------------------------------------------- /Day 7 YouTube App/app/fonts/Roboto-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7 YouTube App/app/fonts/Roboto-Italic.ttf -------------------------------------------------------------------------------- /Day 7 YouTube App/app/fonts/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7 YouTube App/app/fonts/Roboto-Medium.ttf -------------------------------------------------------------------------------- /Day 7 YouTube App/app/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7 YouTube App/app/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /Day 8.3 Hooks Simple Cart-2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 8.3 Hooks Simple Cart-2/public/favicon.ico -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/assets/imgs/logo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 4.3 Hacker Clone App/src/assets/imgs/logo.gif -------------------------------------------------------------------------------- /Day 5 Github Battle/app/fonts/Roboto-Italic.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5 Github Battle/app/fonts/Roboto-Italic.ttf -------------------------------------------------------------------------------- /Day 5 Github Battle/app/fonts/Roboto-Medium.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5 Github Battle/app/fonts/Roboto-Medium.ttf -------------------------------------------------------------------------------- /Day 5 Github Battle/app/fonts/Roboto-Regular.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5 Github Battle/app/fonts/Roboto-Regular.ttf -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5.2 Shopping Cart Redux-2/public/favicon.ico -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/public/images/01.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5.2 Shopping Cart Redux-2/public/images/01.jpg -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/public/images/02.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5.2 Shopping Cart Redux-2/public/images/02.jpg -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/public/images/03.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5.2 Shopping Cart Redux-2/public/images/03.jpg -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/public/images/04.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5.2 Shopping Cart Redux-2/public/images/04.jpg -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/public/images/05.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5.2 Shopping Cart Redux-2/public/images/05.jpg -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/public/images/06.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5.2 Shopping Cart Redux-2/public/images/06.jpg -------------------------------------------------------------------------------- /Day 11 Redux/src/_constants/alert.constants.js: -------------------------------------------------------------------------------- 1 | export const alertConstants = { 2 | SUCCESS: 'ALERT_SUCCESS', 3 | ERROR: 'ALERT_ERROR', 4 | CLEAR: 'ALERT_CLEAR' 5 | }; 6 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/assets/imgs/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 4.3 Hacker Clone App/src/assets/imgs/loading.gif -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/components/ProductList/index.js: -------------------------------------------------------------------------------- 1 | import ProductList from './ProductList'; 2 | import './ProductList.css'; 3 | 4 | export default ProductList; 5 | -------------------------------------------------------------------------------- /Day 7 YouTube App/public/images/github-logo-icon-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 7 YouTube App/public/images/github-logo-icon-0.png -------------------------------------------------------------------------------- /Day 5 Github Battle/public/images/github-logo-icon-0.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/tkssharma/react-16.x-full-training-2020/HEAD/Day 5 Github Battle/public/images/github-logo-icon-0.png -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Main/components/Sidebar/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Profile } from './Profile'; 2 | export { default as SidebarNav } from './SidebarNav'; 3 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/theme/overrides/MuiPaper.js: -------------------------------------------------------------------------------- 1 | export default { 2 | elevation1: { 3 | boxShadow: '0 0 0 1px rgba(63,63,68,0.05), 0 1px 3px 0 rgba(63,63,68,0.15)' 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /Day 3.0 React Router Intro/src/home.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class Home extends React.Component { 4 | render() { 5 | return

Home...

6 | } 7 | } -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/assets/scss/utils/_variables.scss: -------------------------------------------------------------------------------- 1 | $main-color: #ff6600; 2 | $bg-color: #F6F6EF; 3 | 4 | $text-color: #000000; 5 | $text-color-light: #828282; 6 | $text-deleted: #9c9c9c; -------------------------------------------------------------------------------- /Day 6 Charts/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('app')); 7 | -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/javascripts/constants/TodoFilters.js: -------------------------------------------------------------------------------- 1 | export const SHOW_ALL = 'show_all'; 2 | export const SHOW_COMPLETED = 'show_completed'; 3 | export const SHOW_ACTIVE = 'show_active'; -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/theme/overrides/MuiTableHead.js: -------------------------------------------------------------------------------- 1 | import { colors } from '@material-ui/core'; 2 | 3 | export default { 4 | root: { 5 | backgroundColor: colors.grey[50] 6 | } 7 | }; 8 | -------------------------------------------------------------------------------- /Day 3.1 React Router App/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /Day 12/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /Day 3.0 React Router Intro/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | -------------------------------------------------------------------------------- /Day 3.0 React Router Intro/src/notfound.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default class Home extends React.Component { 4 | render() { 5 | return

not found sorry...

6 | } 7 | } -------------------------------------------------------------------------------- /Day 4.1 Netflix Clone/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render( 6 | , 7 | document.getElementById('root') 8 | ); -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Main/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Footer } from './Footer'; 2 | export { default as Sidebar } from './Sidebar'; 3 | export { default as Topbar } from './Topbar'; 4 | -------------------------------------------------------------------------------- /Day 8.2 Hooks/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | 6 | ReactDOM.render(, document.getElementById('root')) 7 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Container from './container'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/assets/scss/components/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | border-top: 1px solid $main-color; 3 | padding-top: 10px; 4 | margin-top: 10px; 5 | font-size: 10px; 6 | color: $text-color-light; 7 | } -------------------------------------------------------------------------------- /Day 5 Github Battle/config/jest/setup.js: -------------------------------------------------------------------------------- 1 | import * as enzyme from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16'; 3 | 4 | // tslint:disable-next-line:no-any 5 | enzyme.configure({ adapter: new Adapter() }); -------------------------------------------------------------------------------- /Day 7 YouTube App/config/jest/setup.js: -------------------------------------------------------------------------------- 1 | import * as enzyme from 'enzyme'; 2 | import Adapter from 'enzyme-adapter-react-16'; 3 | 4 | // tslint:disable-next-line:no-any 5 | enzyme.configure({ adapter: new Adapter() }); -------------------------------------------------------------------------------- /Day 4 Quiz/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import './index.css'; 5 | 6 | ReactDOM.render( 7 | , 8 | document.getElementById('root') 9 | ); -------------------------------------------------------------------------------- /Day 8.1 Hooks Simple Cart/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | 6 | ReactDOM.render(, document.getElementById('root')) 7 | -------------------------------------------------------------------------------- /Day 8.3 Hooks Simple Cart-2/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import ReactDOM from 'react-dom' 3 | import './index.css' 4 | import App from './App' 5 | 6 | ReactDOM.render(, document.getElementById('root')) 7 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/app/util/common.util.js: -------------------------------------------------------------------------------- 1 | const commonUtil = { 2 | isEmty: (str)=> !str || str.length === 0, 3 | // recursively walk modules path and callback for each file 4 | } 5 | export default commonUtil; 6 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as SearchInput } from './SearchInput'; 2 | export { default as StatusBullet } from './StatusBullet'; 3 | export { default as RouteWithLayout } from './RouteWithLayout'; 4 | -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | */node_modules/ 3 | /bower_components/ 4 | */bower_components/ 5 | .settings 6 | .project 7 | .project 8 | .metadata 9 | .classpath 10 | .settings/ 11 | logfile.txt 12 | 13 | -------------------------------------------------------------------------------- /Day 13 Next JS/pages/api/products.tsx: -------------------------------------------------------------------------------- 1 | // pages/api/hello.ts 2 | import { NextApiRequest, NextApiResponse } from "next"; 3 | 4 | export default (request: NextApiRequest, response: NextApiResponse) => { 5 | response.status(200).end("API"); 6 | }; -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules/ 2 | */node_modules/ 3 | /bower_components/ 4 | */bower_components/ 5 | .settings 6 | .project 7 | .project 8 | .metadata 9 | .classpath 10 | .settings/ 11 | logfile.txt 12 | 13 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/pages/404/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from 'components/layout'; 3 | 4 | 5 | export default () => ( 6 | 7 |
Page not found.
8 | 9 | ) -------------------------------------------------------------------------------- /Day 12/src/index.css: -------------------------------------------------------------------------------- 1 | html { 2 | height: 100%; 3 | } 4 | 5 | body { 6 | background-color: black; 7 | margin: 0; 8 | padding: 0; 9 | font-family: sans-serif; 10 | height: 100%; 11 | } 12 | 13 | #root { 14 | height: 100%; 15 | } 16 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/pages/user/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Layout from 'components/layout'; 3 | 4 | export default props => ( 5 | 6 |
User: {props.match.params.id}
7 | 8 | ) -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/views/index.js: -------------------------------------------------------------------------------- 1 | export { default as Dashboard } from './Dashboard'; 2 | export { default as ViewJob } from './ViewJobs'; 3 | export { default as SignIn } from './SignIn'; 4 | export { default as NewJob } from './NewJob'; 5 | 6 | -------------------------------------------------------------------------------- /Day 13 Next JS/components/Footer.tsx: -------------------------------------------------------------------------------- 1 | export default function Footer() { 2 | return ( 3 |
4 |

5 | Next.js app server side rendering route | React with Context APIs 6 |

7 |
8 | ) 9 | } -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/components/footer/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | export default props => { 4 | return
5 |
Hacker news clone
6 |
Ⓒ2019 Nenad Vracar
7 |
8 | } -------------------------------------------------------------------------------- /Day 4 Quiz/src/components/Question.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function Question(props) { 4 | 5 | return ( 6 |
7 |

{props.content}

8 |
9 | ); 10 | } 11 | 12 | 13 | export default Question; -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/theme/overrides/MuiButton.js: -------------------------------------------------------------------------------- 1 | export default { 2 | contained: { 3 | boxShadow: 4 | '0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12), 0 1px 3px 0 rgba(0,0,0,0.20)', 5 | backgroundColor: '#FFFFFF' 6 | } 7 | }; 8 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/utils/utils.js: -------------------------------------------------------------------------------- 1 | const GetHeaders = function(token) { 2 | const header = {}; 3 | const bearer = `Bearer ${token}`; 4 | 5 | header.Authorization = bearer; 6 | 7 | return header; 8 | }; 9 | 10 | export { GetHeaders }; 11 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/theme/overrides/MuiIconButton.js: -------------------------------------------------------------------------------- 1 | import palette from '../palette'; 2 | 3 | export default { 4 | root: { 5 | color: palette.icon, 6 | '&:hover': { 7 | backgroundColor: 'rgba(0, 0, 0, 0.03)' 8 | } 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /Day 14 Lazy Load/src/Home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class Home extends Component { 4 | constructor() { 5 | super(); 6 | } 7 | 8 | render() { 9 | return
HOME
; 10 | } 11 | } 12 | 13 | export default Home; 14 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/theme/overrides/MuiTableCell.js: -------------------------------------------------------------------------------- 1 | import palette from '../palette'; 2 | import typography from '../typography'; 3 | 4 | export default { 5 | root: { 6 | ...typography.body1, 7 | borderBottom: `1px solid ${palette.divider}` 8 | } 9 | }; 10 | -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/src/actions/index.js: -------------------------------------------------------------------------------- 1 | export function selectBook(book) { 2 | // selectBook is an ActionCreator, it needs to return an action, 3 | // an object with a type property. 4 | return { 5 | type: 'BOOK_SELECTED', 6 | payload: book 7 | }; 8 | } 9 | -------------------------------------------------------------------------------- /Day 2/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/extend-expect'; 6 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/config/env/development.js: -------------------------------------------------------------------------------- 1 | 2 | const config = { 3 | db: { 4 | database: 'blog-dev', 5 | username: 'admin', 6 | password: 'admin', 7 | host: 'localhost', 8 | port: 3306, 9 | dialect: 'mysql' 10 | } 11 | }; 12 | export default config; 13 | -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/components/Product/Product.css: -------------------------------------------------------------------------------- 1 | .product { 2 | margin: 0; 3 | overflow: auto; 4 | } 5 | 6 | .product__price { 7 | display: inline-block; 8 | line-height: 34px; 9 | } 10 | 11 | .product__button-wrap { 12 | float: right; 13 | } 14 | -------------------------------------------------------------------------------- /Day 3.1 React Router App/src/not-found/NotFound.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const NotFound = (props) => { 4 | return ( 5 |
6 |

Błąd 404!

7 |

Szukana strona nie istnieje!

8 |
9 | ); 10 | } 11 | 12 | export default NotFound; 13 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/variables.scss: -------------------------------------------------------------------------------- 1 | $mq-xsmall: 640px; 2 | $mq-small: 768px; 3 | $mq-med: 1024px; 4 | $mq-large: 1440px; 5 | $mq-xlarge: 1840px; 6 | 7 | $white: #fff; 8 | $gray: gray; 9 | $gray-lightest: #ececec; 10 | $gray-light: #ccc; 11 | $gray-darkest: #080808; 12 | $tomato: tomato; 13 | -------------------------------------------------------------------------------- /Day 3/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import MessageApp from './MessageApp'; 3 | 4 | class App extends Component { 5 | render() { 6 | return ( 7 |
8 | 9 |
10 | ); 11 | } 12 | } 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /Day 8 Book Store/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import * as serviceWorker from "./serviceWorker"; 6 | 7 | ReactDOM.render(, document.getElementById("root")); 8 | 9 | serviceWorker.register(); -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/javascripts/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import todos from './todos'; 3 | 4 | const rootReducer = combineReducers({ 5 | todos : todos 6 | }); 7 | // todos is state obj which our ui will need 8 | // rootReducer 9 | export default rootReducer; -------------------------------------------------------------------------------- /Day 10 Redux/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /Day 14 Lazy Load/src/AnotherHome.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class AnotherHome extends Component { 4 | constructor() { 5 | super(); 6 | } 7 | 8 | render() { 9 | return
ANOTHER HOME
; 10 | } 11 | } 12 | 13 | export default AnotherHome; 14 | -------------------------------------------------------------------------------- /Day 3/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/views/SignIn/SignIn.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const SignIn = () => { 5 | return ( 6 |
7 | ); 8 | }; 9 | 10 | SignIn.propTypes = { 11 | history: PropTypes.object 12 | }; 13 | 14 | export default (SignIn); 15 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | import "./index.css"; 4 | import App from "./App"; 5 | import * as serviceWorker from "./serviceWorker"; 6 | 7 | ReactDOM.render(, document.getElementById("root")); 8 | 9 | serviceWorker.register(); -------------------------------------------------------------------------------- /Day 8.0 context API/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import registerServiceWorker from './registerServiceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | registerServiceWorker(); 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 10 Redux/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Day 14 Lazy Load/src/index.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom"; 3 | 4 | import App from "./App"; 5 | 6 | const rootElement = document.getElementById("root"); 7 | ReactDOM.render( 8 | 9 | 10 | , 11 | rootElement 12 | ); 13 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/assets/scss/components/_loading.scss: -------------------------------------------------------------------------------- 1 | .loading { 2 | display: flex; 3 | align-items: center; 4 | 5 | &-icon { 6 | margin-right: 10px; 7 | max-width: 10px; 8 | } 9 | 10 | &-text { 11 | font-size: 12px; 12 | color: $text-color-light !important; 13 | } 14 | } -------------------------------------------------------------------------------- /Day 6 Charts/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/javascripts/store/configureStore.js: -------------------------------------------------------------------------------- 1 | import { createStore } from 'redux'; 2 | import rootReducer from '../reducers'; 3 | // creat store using 4 | export default function configureStore(initialState) { 5 | const store = createStore(rootReducer, initialState); 6 | 7 | return store; 8 | } -------------------------------------------------------------------------------- /Day 8 Book Store/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/src/reducers/reducer_books.js: -------------------------------------------------------------------------------- 1 | export default function() { 2 | return [ 3 | { title: 'Javascript: The Good Parts', pages: 101 }, 4 | { title: 'Harry Potter', pages: 39 }, 5 | { title: 'The Dark Tower', pages: 85 }, 6 | { title: 'Eloquent Ruby', pages: 1 } 7 | ]; 8 | } 9 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/app.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './app'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Day 4.2 Weather App/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/components/ProductList/ProductList.css: -------------------------------------------------------------------------------- 1 | .product-list { 2 | padding: 0; 3 | display: flex; 4 | flex-wrap: wrap; 5 | justify-content: space-between; 6 | align-items: stretch; 7 | } 8 | 9 | .product-list__item { 10 | list-style: none; 11 | width: 32%; 12 | } 13 | -------------------------------------------------------------------------------- /Day 8.0 context API/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Day 10 Redux/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 11 Redux/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 4.2 Weather App/src/components/Titles.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Titles = () => ( 4 |
5 |

Weather Finder

6 |

Find out temperature, conditions and more...

7 |
8 | ); 9 | 10 | export default Titles; -------------------------------------------------------------------------------- /Day 4.2 Weather App/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 5 Github Battle/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Main/components/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const Footer = () => { 5 | 6 | return ( 7 |
8 | ); 9 | }; 10 | 11 | Footer.propTypes = { 12 | className: PropTypes.string 13 | }; 14 | 15 | export default Footer; 16 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | it('renders without crashing', () => { 6 | const div = document.createElement('div'); 7 | ReactDOM.render(, div); 8 | ReactDOM.unmountComponentAtNode(div); 9 | }); 10 | -------------------------------------------------------------------------------- /Day 7 YouTube App/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 8 Book Store/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 8.0 context API/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/javascripts/constants/ActionTypes.js: -------------------------------------------------------------------------------- 1 | export const ADD_TODO = 'ADD_TODO'; 2 | export const DELETE_TODO = 'DELETE_TODO'; 3 | export const EDIT_TODO = 'EDIT_TODO'; 4 | export const COMPLETE_TODO = 'COMPLETE_TODO'; 5 | export const COMPLETE_ALL = 'COMPLETE_ALL'; 6 | export const CLEAR_COMPLETED = 'CLEAR_COMPLETED'; -------------------------------------------------------------------------------- /Day 12/src/components/Display/Display.css: -------------------------------------------------------------------------------- 1 | .component-display { 2 | background-color: #858694; 3 | color: white; 4 | text-align: right; 5 | font-weight: 200; 6 | flex: 0 0 auto; 7 | width: 100%; 8 | } 9 | 10 | .component-display > div { 11 | font-size: 20px; 12 | padding: 8px 4px 0 4px; 13 | } 14 | 15 | -------------------------------------------------------------------------------- /Day 2/src/App.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from '@testing-library/react'; 3 | import App from './App'; 4 | 5 | test('renders learn react link', () => { 6 | const { getByText } = render(); 7 | const linkElement = getByText(/learn react/i); 8 | expect(linkElement).toBeInTheDocument(); 9 | }); 10 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: [ 3 | './index.js' 4 | ], 5 | output: { 6 | path: __dirname + '/javascripts/', 7 | filename: '../bundle.js' 8 | }, 9 | module: { 10 | loaders: [{ 11 | test: /\.jsx?$/, 12 | loader: 'babel' 13 | }] 14 | } 15 | }; 16 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 8.1 Hooks Simple Cart/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 8.3 Hooks Simple Cart-2/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .DS_Store 3 | **/node_modules 4 | .idea/ 5 | .vscode/ 6 | node_modules/ 7 | build 8 | .DS_Store 9 | *.tgz 10 | my-app* 11 | template/src/__tests__/__snapshots__/ 12 | lerna-debug.log 13 | npm-debug.log* 14 | yarn-debug.log* 15 | yarn-error.log* 16 | /.changelog 17 | .npm/ 18 | yarn.lock -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Redux TodoMVC example 5 | 6 | 7 | 8 |
9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /Day 11 Redux/src/_helpers/auth-header.js: -------------------------------------------------------------------------------- 1 | export function authHeader() { 2 | // return authorization header with jwt token 3 | let user = JSON.parse(localStorage.getItem('user')); 4 | 5 | if (user && user.token) { 6 | return { 'Authorization': 'Bearer ' + user.token }; 7 | } else { 8 | return {}; 9 | } 10 | } -------------------------------------------------------------------------------- /Day 8 Book Store/src/components/SignOut.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | export const SignOut = () => { 4 | localStorage.removeItem("user"); 5 | return( 6 |
7 |

Thank you for stopping by!

8 |

Return Home

9 |
10 | ) 11 | }; -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/src/reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | import BooksReducer from './reducer_books'; 3 | import ActiveBook from './reducer_active_book'; 4 | 5 | const rootReducer = combineReducers({ 6 | books: BooksReducer, 7 | activeBook: ActiveBook 8 | }); 9 | 10 | export default rootReducer; 11 | -------------------------------------------------------------------------------- /Day 12/src/components/Panel/Panel.css: -------------------------------------------------------------------------------- 1 | .component-button-panel { 2 | background-color: #858694; 3 | display: flex; 4 | flex-direction: row; 5 | flex-wrap: wrap; 6 | flex: 1 0 auto; 7 | } 8 | 9 | .component-button-panel > div { 10 | width: 100%; 11 | margin-bottom: 1px; 12 | flex: 1 0 auto; 13 | display: flex; 14 | } -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/src/reducers/reducer_active_book.js: -------------------------------------------------------------------------------- 1 | // State argument is not application state, only the state 2 | // this reducer is responsible for 3 | export default function(state = null, action) { 4 | switch(action.type) { 5 | case 'BOOK_SELECTED': 6 | return action.payload; 7 | } 8 | 9 | return state; 10 | } 11 | -------------------------------------------------------------------------------- /Day 4.2 Weather App/src/components/Form.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Form = props => ( 4 |
5 | 6 | 7 | 8 |
9 | ); 10 | 11 | export default Form; -------------------------------------------------------------------------------- /Day 1/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React and Webpack4 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Day 14 Lazy Load/src/SuspenseFallback.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | class SuspenseFallback extends Component { 4 | constructor() { 5 | super(); 6 | 7 | console.log("SuspenseFallback"); 8 | } 9 | 10 | render() { 11 | return
HOME
; 12 | } 13 | } 14 | 15 | export default SuspenseFallback; 16 | -------------------------------------------------------------------------------- /Day 3.0 React Router Intro/src/team-child.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Link} from 'react-router-dom'; 3 | export default class Home extends React.Component { 4 | render() { 5 | return ( 6 |
    7 |

    Team Name is {this.props.match.params.teamname}

    8 |
9 | ) 10 | } 11 | } -------------------------------------------------------------------------------- /Day 4.2 Weather App/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import 'bootstrap/dist/css/bootstrap.min.css'; 4 | import "./App.css"; 5 | import App from './App'; 6 | import registerServiceWorker from './registerServiceWorker'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | registerServiceWorker(); 10 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/layouts/Empty/Empty.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | const Empty = props => { 4 | const { children } = props; 5 | return ( 6 |
7 | {children} 8 |
9 | ); 10 | }; 11 | 12 | Empty.propTypes = { 13 | children: PropTypes.node 14 | }; 15 | 16 | export default Empty; 17 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/theme/overrides/MuiTableRow.js: -------------------------------------------------------------------------------- 1 | import palette from '../palette'; 2 | 3 | export default { 4 | root: { 5 | '&$selected': { 6 | backgroundColor: palette.background.default 7 | }, 8 | '&$hover': { 9 | '&:hover': { 10 | backgroundColor: palette.background.default 11 | } 12 | } 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/components/loading/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import loading from 'assets/imgs/loading.gif'; 3 | 4 | export default props => { 5 | return ( 6 |
7 | 8 | {props.text} 9 |
10 | ) 11 | } -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/app.scss: -------------------------------------------------------------------------------- 1 | 2 | // 3 | // Base 4 | // 5 | *, 6 | *:before, 7 | *:after { 8 | box-sizing: border-box; 9 | } 10 | 11 | body { 12 | height: 100%; 13 | width: 100%; 14 | 15 | font-family: "Lato", sans-serif; 16 | line-height: 1.5; 17 | } 18 | 19 | .loading { 20 | display: flex; 21 | align-items: center; 22 | justify-content: center; 23 | } 24 | -------------------------------------------------------------------------------- /Day 5 Github Battle/app/components/battle/app.js: -------------------------------------------------------------------------------- 1 | import React, { useState } from 'react'; 2 | const Counter = () => { 3 | const [counter, setCounter] = useState(0); 4 | 5 | return ( 6 |
{counter} 7 | 10 |
11 | ) 12 | } 13 | 14 | export default Counter; -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Day 10 Redux/src/modules/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from "redux"; 2 | 3 | // Logger with default options 4 | import logger from "redux-logger"; 5 | 6 | import reducer from "./reducer"; 7 | 8 | export default function configureStore(initialState) { 9 | const store = createStore(reducer, initialState, applyMiddleware(logger)); 10 | return store; 11 | } 12 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/services/search-service.js: -------------------------------------------------------------------------------- 1 | import { flickerSearch } from './flicker-service'; 2 | import { giphySearch } from './giphy-service'; 3 | 4 | export const searchForAssest = (term, engine) => { 5 | if (engine === 'flicker') { 6 | return flickerSearch(term); 7 | } else if(engine === 'giphy') { 8 | return giphySearch(term); 9 | } 10 | }; 11 | -------------------------------------------------------------------------------- /Day 6 Charts/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import HeaderComponent from './Header/header'; 4 | import Home from './Home'; 5 | class ReactHeatmap extends React.Component { 6 | 7 | render() { 8 | return ( 9 |
10 | 11 | 12 |
13 | ); 14 | } 15 | } 16 | 17 | export default ReactHeatmap; 18 | 19 | -------------------------------------------------------------------------------- /Day 3.1 React Router App/src/events/EventFilters.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const EventFilters = (props) => { 5 | return 6 | }; 7 | 8 | EventFilters.propTypes = { 9 | onFilterChange: PropTypes.func.isRequired 10 | }; 11 | 12 | export default EventFilters; 13 | -------------------------------------------------------------------------------- /Day 3/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/components/layout/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Footer from 'components/footer'; 3 | 4 | class Layout extends Component { 5 | render() { 6 | return ( 7 |
8 | {this.props.children} 9 |
10 |
11 | ); 12 | } 13 | } 14 | 15 | export default Layout -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/scss/base/_colors.scss: -------------------------------------------------------------------------------- 1 | $primary-green: #083bd6; 2 | $primary-orange: #fc7710; 3 | $white: #fff; 4 | $gray-eighty: #ccc; 5 | $gray-light: #999; 6 | $gray-medium: #666; 7 | $gray-dark: #333; 8 | $black: #000; 9 | $red: #e23d3d; 10 | $gray-light-bg: #f5f5f5; 11 | $gray-medium-bg: #f1f1f1; 12 | $gray-dark-bg: #dddddd; 13 | $green-light-bg: rgba(147, 220, 156, 0.15); 14 | -------------------------------------------------------------------------------- /Day 13 Next JS/static/logo.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/scss/components/_footer.scss: -------------------------------------------------------------------------------- 1 | footer { 2 | color: $gray-light; 3 | font-size: 14px; 4 | text-align: center; 5 | padding: 32px; 6 | background: $gray-dark-bg; 7 | strong { 8 | color: $gray-medium; 9 | } 10 | .footer-links { 11 | margin-bottom: 24px; 12 | a { 13 | margin: 0 8px; 14 | color: $gray-medium; 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Day 3/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/en/webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/assets/scss/main.scss: -------------------------------------------------------------------------------- 1 | // utils 2 | @import 'utils/_variables'; 3 | 4 | 5 | // base 6 | @import '_base'; 7 | 8 | 9 | // components 10 | @import 'components/_navbar'; 11 | @import 'components/_layout'; 12 | @import 'components/_story'; 13 | @import 'components/_comment'; 14 | @import 'components/_button'; 15 | @import 'components/_loading'; 16 | @import 'components/_footer'; -------------------------------------------------------------------------------- /Day 6 Charts/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 8.2 Hooks/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Provider } from 'react-redux'; 3 | import App from './javascripts/containers/App'; 4 | import configureStore from './javascripts/store/configureStore'; 5 | 6 | const store = configureStore(); 7 | 8 | React.render( 9 | 10 | {() => } 11 | , 12 | document.getElementById('root') 13 | ); -------------------------------------------------------------------------------- /Day 12/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/components/photos/photo.scss: -------------------------------------------------------------------------------- 1 | figure { 2 | margin: 0; 3 | } 4 | 5 | .absolute-bg { 6 | position: absolute; 7 | top: 0; 8 | left: 0; 9 | z-index: 0; 10 | 11 | height: 100%; 12 | width: 100%; 13 | 14 | background-position: 50%; 15 | background-repeat: no-repeat; 16 | background-size: cover; 17 | overflow: hidden; 18 | transition: transform 300ms ease; 19 | } 20 | -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/containers/ProductList.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import ProductList from '../components/ProductList'; 3 | import { getProducts } from '../ducks/products'; 4 | 5 | const mapStateToProps = (state, props) => { 6 | return { 7 | products: getProducts(state, props) 8 | } 9 | } 10 | 11 | export default connect(mapStateToProps)(ProductList); 12 | -------------------------------------------------------------------------------- /Day 8 Book Store/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 1/dist/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | React and Webpack4 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Day 10 Redux/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 8.1 Hooks Simple Cart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 4.1 Netflix Clone/src/components/partails/navigation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | const Navigation = (props) => { 3 | return ( 4 | 14 | ); 15 | }; 16 | export default Navigation; -------------------------------------------------------------------------------- /Day 4.2 Weather App/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 5 Github Battle/config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | // This is a custom Jest transformer turning file imports into filenames. 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 7 | 8 | module.exports = { 9 | process(src, filename) { 10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 7 YouTube App/config/jest/fileTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const path = require('path'); 4 | 5 | // This is a custom Jest transformer turning file imports into filenames. 6 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 7 | 8 | module.exports = { 9 | process(src, filename) { 10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`; 11 | }, 12 | }; 13 | -------------------------------------------------------------------------------- /Day 8.0 context API/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": "./index.html", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 8.3 Hooks Simple Cart-2/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | } 10 | ], 11 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /Day 13 Next JS/next.config.js: -------------------------------------------------------------------------------- 1 | const withTypescript = require('@zeit/next-typescript'); 2 | const withSass = require('@zeit/next-sass'); 3 | const { parsed: localEnv } = require('dotenv').config() 4 | const webpack = require('webpack') 5 | 6 | module.exports = withTypescript(withSass({ 7 | webpack(config) { 8 | config.plugins.push(new webpack.EnvironmentPlugin(localEnv)) 9 | 10 | return config 11 | } 12 | })); -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/theme/index.js: -------------------------------------------------------------------------------- 1 | import { createMuiTheme } from '@material-ui/core'; 2 | 3 | import palette from './palette'; 4 | import typography from './typography'; 5 | import overrides from './overrides'; 6 | 7 | const theme = createMuiTheme({ 8 | palette, 9 | typography, 10 | overrides, 11 | zIndex: { 12 | appBar: 1200, 13 | drawer: 1100 14 | } 15 | }); 16 | 17 | export default theme; 18 | -------------------------------------------------------------------------------- /Day 12/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | 6 | # testing 7 | /coverage 8 | 9 | # production 10 | /build 11 | 12 | # editor 13 | .vscode 14 | 15 | # misc 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | -------------------------------------------------------------------------------- /Day 3.1 React Router App/src/settings/Settings.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Redirect } from 'react-router-dom'; 3 | import authHelper from '../helpers/AuthHelper'; 4 | 5 | const Settings = (props) => { 6 | if (authHelper.isAuthenticated === false) { 7 | return ; 8 | } 9 | 10 | return

Tutaj znajdziesz ustawienia swojego konta!

; 11 | } 12 | 13 | export default Settings; 14 | -------------------------------------------------------------------------------- /Day 3/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Day 4 Quiz/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/assets/scss/index.scss: -------------------------------------------------------------------------------- 1 | * { 2 | box-sizing: border-box; 3 | margin: 0; 4 | padding: 0; 5 | } 6 | 7 | html { 8 | height: 100%; 9 | -webkit-font-smoothing: antialiased; 10 | -moz-osx-font-smoothing: grayscale; 11 | } 12 | 13 | body { 14 | background-color: #f4f6f8; 15 | height: 100%; 16 | } 17 | 18 | a { 19 | text-decoration: none; 20 | } 21 | 22 | #root { 23 | height: 100%; 24 | } 25 | -------------------------------------------------------------------------------- /Day 5 Github Battle/app/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | //------------------dashboard-------------------// 4 | import MainComponent from './components/main'; 5 | 6 | import {HashRouter } from 'react-router-dom' 7 | render( 8 | 9 |
10 | 11 |
12 | 13 | , document.getElementById("app")); 14 | -------------------------------------------------------------------------------- /Day 5 Github Battle/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /Day 6 Charts/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Day 7 YouTube App/config/jest/cssTransform.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // This is a custom Jest transformer turning style imports into empty objects. 4 | // http://facebook.github.io/jest/docs/tutorial-webpack.html 5 | 6 | module.exports = { 7 | process() { 8 | return 'module.exports = {};'; 9 | }, 10 | getCacheKey() { 11 | // The output is always the same. 12 | return 'cssTransform'; 13 | }, 14 | }; 15 | -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/src/components/app.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Component } from 'react'; 3 | 4 | import BookList from '../containers/book-list'; 5 | import BookDetail from '../containers/book-detail'; 6 | 7 | export default class App extends Component { 8 | render() { 9 | return ( 10 |
11 | 12 | 13 |
14 | ); 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Day 10 Redux/src/modules/action.js: -------------------------------------------------------------------------------- 1 | // types of action 2 | const Types = { 3 | CREATE_ITEM: "CREATE_ITEM", 4 | DELETE_ITEM: "DELETE_ITEM" 5 | }; 6 | // actions 7 | const createItem = task => ({ 8 | type: Types.CREATE_ITEM, 9 | payload: task 10 | }); 11 | 12 | const deleteItem = id => ({ 13 | type: Types.DELETE_ITEM, 14 | payload: id 15 | }); 16 | 17 | export default { 18 | createItem, 19 | deleteItem, 20 | Types 21 | }; 22 | -------------------------------------------------------------------------------- /Day 11 Redux/src/_helpers/store.js: -------------------------------------------------------------------------------- 1 | import { createStore, applyMiddleware } from 'redux'; 2 | import thunkMiddleware from 'redux-thunk'; 3 | import { createLogger } from 'redux-logger'; 4 | import rootReducer from '../_reducers'; 5 | 6 | const loggerMiddleware = createLogger(); 7 | 8 | export const store = createStore( 9 | rootReducer, 10 | applyMiddleware( 11 | thunkMiddleware, 12 | loggerMiddleware 13 | ) 14 | ); -------------------------------------------------------------------------------- /Day 3.2 Flicker App/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Day 4.1 Netflix Clone/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/ducks/products.js: -------------------------------------------------------------------------------- 1 | // reducer 2 | export default function products(state = []) { 3 | return state; // nothing to do here, but we need products node in redux store 4 | } 5 | 6 | // selectors 7 | export function getProducts(state, props) { 8 | return state.products; 9 | } 10 | 11 | export function getProduct(state, props) { 12 | return state.products.find(item => item.id === props.id); 13 | } 14 | -------------------------------------------------------------------------------- /Day 8 Book Store/src/components/PrivateRoute.js: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Route, Redirect } from "react-router-dom"; 3 | 4 | export const PrivateRoute = ({ component: Component, ...rest }) => ( 5 | ( 6 | localStorage.getItem("user") 7 | ? 8 | : 9 | )} /> 10 | ); -------------------------------------------------------------------------------- /Day 11 Redux/src/_components/PrivateRoute.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Route, Redirect } from 'react-router-dom'; 3 | 4 | export const PrivateRoute = ({ component: Component, ...rest }) => ( 5 | ( 6 | localStorage.getItem('user') 7 | ? 8 | : 9 | )} /> 10 | ) -------------------------------------------------------------------------------- /Day 3.0 React Router Intro/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Day 3.1 React Router App/.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # production 12 | /build 13 | 14 | # misc 15 | .DS_Store 16 | .env.local 17 | .env.development.local 18 | .env.test.local 19 | .env.production.local 20 | 21 | npm-debug.log* 22 | yarn-debug.log* 23 | yarn-error.log* 24 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/app/models/post.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | var Schema = mongoose.Schema; 3 | 4 | var PostSchema = new Schema({ 5 | title: { type: String, required: true }, 6 | content: { 7 | type: String 8 | }, 9 | status: { 10 | type: String 11 | }, 12 | user: { 13 | type: mongoose.Schema.Types.ObjectId, 14 | ref: 'User' 15 | } 16 | }); 17 | 18 | module.exports = mongoose.model('Post', PostSchema); 19 | -------------------------------------------------------------------------------- /Day 11 Redux/src/_reducers/index.js: -------------------------------------------------------------------------------- 1 | import { combineReducers } from 'redux'; 2 | 3 | import { authentication } from './authentication.reducer'; 4 | import { registration } from './registration.reducer'; 5 | import { users } from './users.reducer'; 6 | import { alert } from './alert.reducer'; 7 | 8 | const rootReducer = combineReducers({ 9 | authentication, 10 | registration, 11 | users, 12 | alert 13 | }); 14 | 15 | export default rootReducer; -------------------------------------------------------------------------------- /Day 4 Quiz/src/components/QuestionCount.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function QuestionCount(props) { 4 | 5 | return ( 6 |
7 | Question {props.counter} of {props.total} 8 | {props.counter === 5 ? (View Results) : (
)} 9 |
10 | ); 11 | 12 | } 13 | 14 | export default QuestionCount; -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/empty-states/EmptyCart.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | const EmptyCart = props => { 4 | return ( 5 |
6 | empty-cart 10 |

You cart is empty!

11 |
12 | ); 13 | }; 14 | 15 | export default EmptyCart; 16 | -------------------------------------------------------------------------------- /Day 11 Redux/src/_reducers/registration.reducer.js: -------------------------------------------------------------------------------- 1 | import { userConstants } from '../_constants'; 2 | 3 | export function registration(state = {}, action) { 4 | switch (action.type) { 5 | case userConstants.REGISTER_REQUEST: 6 | return { registering: true }; 7 | case userConstants.REGISTER_SUCCESS: 8 | return {}; 9 | case userConstants.REGISTER_FAILURE: 10 | return {}; 11 | default: 12 | return state 13 | } 14 | } -------------------------------------------------------------------------------- /Day 3.0 React Router Intro/src/header.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react'; 3 | import { 4 | Link 5 | } from 'react-router-dom'; 6 | const Header = (props) => { 7 | return ( 8 |
    9 |
  • 10 | Home 11 |
    • 12 |
  • 13 | About 14 |
    • 15 |
  • 16 | Team 17 |
    • 18 |
19 | ) 20 | } 21 | 22 | export default Header; -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/assets/scss/components/_button.scss: -------------------------------------------------------------------------------- 1 | .link-button { 2 | background-color: transparent; 3 | border: none; 4 | cursor: pointer; 5 | text-decoration: none; 6 | display: inline; 7 | margin: 0; 8 | padding: 0; 9 | 10 | &:focus, 11 | &:active { 12 | box-shadow: none; 13 | border: none; 14 | outline: none; 15 | } 16 | } 17 | 18 | .link-button:hover, 19 | .link-button:focus { 20 | text-decoration: none; 21 | } -------------------------------------------------------------------------------- /Day 11 Redux/src/_actions/alert.actions.js: -------------------------------------------------------------------------------- 1 | import { alertConstants } from '../_constants'; 2 | 3 | export const alertActions = { 4 | success, 5 | error, 6 | clear 7 | }; 8 | 9 | function success(message) { 10 | return { type: alertConstants.SUCCESS, message }; 11 | } 12 | 13 | function error(message) { 14 | return { type: alertConstants.ERROR, message }; 15 | } 16 | 17 | function clear() { 18 | return { type: alertConstants.CLEAR }; 19 | } -------------------------------------------------------------------------------- /Day 11 Redux/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { render } from 'react-dom'; 3 | import { Provider } from 'react-redux'; 4 | 5 | import { store } from './_helpers'; 6 | import { App } from './App'; 7 | 8 | // setup fake backend 9 | import { configureFakeBackend } from './_helpers'; 10 | configureFakeBackend(); 11 | 12 | render( 13 | 14 | 15 | , 16 | document.getElementById('app') 17 | ); -------------------------------------------------------------------------------- /Day 8.0 context API/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "teach-me-context", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.3.0-alpha.1", 7 | "react-dom": "^16.3.0-alpha.1", 8 | "react-scripts": "1.1.1" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test --env=jsdom", 14 | "eject": "react-scripts eject" 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/theme/overrides/index.js: -------------------------------------------------------------------------------- 1 | import MuiButton from './MuiButton'; 2 | import MuiIconButton from './MuiIconButton'; 3 | import MuiPaper from './MuiPaper'; 4 | import MuiTableCell from './MuiTableCell'; 5 | import MuiTableHead from './MuiTableHead'; 6 | import MuiTypography from './MuiTypography'; 7 | 8 | export default { 9 | MuiButton, 10 | MuiIconButton, 11 | MuiPaper, 12 | MuiTableCell, 13 | MuiTableHead, 14 | MuiTypography 15 | }; 16 | -------------------------------------------------------------------------------- /Day 4.2 Weather App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weather-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "bootstrap": "3.3.7", 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.1.0" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/loaders/Product.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | const LoadingProduct = () => { 4 | return ( 5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | ); 13 | }; 14 | 15 | export default LoadingProduct; 16 | -------------------------------------------------------------------------------- /Day 8.2 Hooks/README.md: -------------------------------------------------------------------------------- 1 | # React Hooks Tutorial 2 | 3 | In this tutorial, we'll make a simple CRUD app that can add, update, or delete users. 4 | 5 | ### [View the demo](https://taniarascia.github.io/react-hooks/) | [Read the tutorial](https://www.taniarascia.com/crud-app-in-react-with-hooks/) 6 | 7 | ## Author 8 | 9 | - [Tania Rascia](https://www.taniarascia.com) 10 | 11 | ## License 12 | 13 | This project is open source and available under the [MIT License](LICENSE). 14 | -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/webpack.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | entry: [ 3 | './src/index.js' 4 | ], 5 | output: { 6 | path: __dirname, 7 | publicPath: '/', 8 | filename: 'bundle.js' 9 | }, 10 | module: { 11 | loaders: [{ 12 | exclude: /node_modules/, 13 | loader: 'babel' 14 | }] 15 | }, 16 | resolve: { 17 | extensions: ['', '.js', '.jsx'] 18 | }, 19 | devServer: { 20 | contentBase: './' 21 | } 22 | }; 23 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/config/env/secure.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const confg = { 4 | log: { 5 | //morgan options: 'combined', 'common', 'dev', 'short', 'tiny' 6 | format: 'combined', 7 | //winston config 8 | transports: { 9 | file: { 10 | level: 'info', 11 | filename: './logs/applog.log', 12 | handleExceptions: true, 13 | json: false, 14 | maxsize: 5242880, //5MB 15 | colorize: false 16 | } 17 | } 18 | } 19 | }; 20 | export default config; 21 | -------------------------------------------------------------------------------- /Day 12/src/components/Display/Display.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import './Display.css'; 4 | 5 | const Display = ({ value }) => { 6 | return ( 7 |
8 |
9 | {value} 10 |
11 |
12 | ); 13 | }; 14 | 15 | Display.propTypes = { 16 | value: PropTypes.string 17 | }; 18 | 19 | export default Display; -------------------------------------------------------------------------------- /Day 3.1 React Router App/src/helpers/AuthHelper.js: -------------------------------------------------------------------------------- 1 | // fake auth taken from official react-router docs: 2 | // https://reacttraining.com/react-router/web/example/auth-workflow 3 | const authHelper = { 4 | isAuthenticated: false, 5 | authenticate(cb) { 6 | this.isAuthenticated = true; 7 | setTimeout(cb, 100); // fake async 8 | }, 9 | signout(cb) { 10 | this.isAuthenticated = false; 11 | setTimeout(cb, 100); 12 | } 13 | } 14 | 15 | export default authHelper; 16 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/app/models/user.js: -------------------------------------------------------------------------------- 1 | var mongoose = require('mongoose'); 2 | var Schema = mongoose.Schema; 3 | 4 | var UserSchema = new Schema({ 5 | userName: { type: String, required: true }, 6 | firstName: { 7 | type: String 8 | }, 9 | lastName: { 10 | type: String 11 | }, 12 | status: { 13 | type: String 14 | }, 15 | posts: [ { type: mongoose.Schema.Types.ObjectId, ref: 'Post' } ] 16 | }); 17 | 18 | module.exports = mongoose.model('User', UserSchema); 19 | -------------------------------------------------------------------------------- /Day 4.1 Netflix Clone/src/components/partails/header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Logo from './logo'; 3 | import Navigation from './navigation'; 4 | import Search from './serachBar'; 5 | import UserProfile from './profile'; 6 | 7 | const Header = (props) => { 8 | return ( 9 |
10 | 11 | 12 | 13 | 14 |
15 | ); 16 | } 17 | 18 | export default Header; -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/app/routes/post.route.js: -------------------------------------------------------------------------------- 1 | 2 | import postCtrl from '../controllers/post.ctrl'; 3 | import postValidator from '../validators/post.validator'; 4 | import * as express from 'express'; 5 | const router = express.Router() 6 | 7 | router.route('/:postId') 8 | .get([postValidator.uuidValidator, postCtrl.get]) 9 | .put([postValidator.uuidValidator, postCtrl.update]) 10 | .delete([postValidator.uuidValidator, postCtrl.delete]); 11 | 12 | export default router 13 | 14 | -------------------------------------------------------------------------------- /Day 5 Github Battle/app/utils/helper/utilHelper.js: -------------------------------------------------------------------------------- 1 | 2 | export default class Util{ 3 | static validatePhone(email){ 4 | var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 5 | return re.test(email); 6 | } 7 | static getFileName( url ) { 8 | return url ? url.split('/').pop() : null; 9 | } 10 | static uid() { 11 | return Math.random().toString(34).slice(2); 12 | } 13 | } -------------------------------------------------------------------------------- /Day 7 YouTube App/app/utils/helper/utilHelper.js: -------------------------------------------------------------------------------- 1 | 2 | export default class Util{ 3 | static validatePhone(email){ 4 | var re = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; 5 | return re.test(email); 6 | } 7 | static getFileName( url ) { 8 | return url ? url.split('/').pop() : null; 9 | } 10 | static uid() { 11 | return Math.random().toString(34).slice(2); 12 | } 13 | } -------------------------------------------------------------------------------- /Day 3/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: https://bit.ly/CRA-PWA 12 | serviceWorker.unregister(); 13 | -------------------------------------------------------------------------------- /Day 10 Redux/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './app'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | ReactDOM.render(, document.getElementById('root')); 8 | 9 | // If you want your app to work offline and load faster, you can change 10 | // unregister() to register() below. Note this comes with some pitfalls. 11 | // Learn more about service workers: http://bit.ly/CRA-PWA 12 | serviceWorker.register(); 13 | -------------------------------------------------------------------------------- /Day 4.1 Netflix Clone/src/components/Item.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ListToggle from './ListToggle'; 3 | 4 | const Item = (props) => { 5 | return ( 6 |
7 |
8 |
{props.title}
9 |
{props.score} / 10
10 |
{props.overview}
11 |
12 |
13 | ); 14 | } 15 | 16 | export default Item; -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import { Provider } from 'react-redux'; 4 | import { createStore } from 'redux'; 5 | 6 | import App from './components/app'; 7 | import reducers from './reducers'; 8 | 9 | let store = createStore(reducers, window.devToolsExtension && window.devToolsExtension()); 10 | 11 | 12 | ReactDOM.render( 13 | 14 | 15 | 16 | , document.querySelector('.container')); 17 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "Gallery", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "flicker_logo-512.png", 12 | "type": "image/png", 13 | "sizes": "512x512" 14 | } 15 | ], 16 | "start_url": ".", 17 | "display": "standalone", 18 | "theme_color": "#ff6347", 19 | "background_color": "#ffffff" 20 | } 21 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/assets/scss/components/_navbar.scss: -------------------------------------------------------------------------------- 1 | nav.navbar { 2 | display: flex; 3 | align-items: center; 4 | background-color: $main-color; 5 | padding: 0.2rem; 6 | padding-right: 1rem; 7 | 8 | 9 | .logo { 10 | color: $text-color; 11 | text-decoration: none; 12 | 13 | &:hover, 14 | &:visited { 15 | color: $text-color; 16 | text-decoration: none; 17 | } 18 | 19 | .logo-img { 20 | border: 1px solid white; 21 | margin-right: 5px; 22 | } 23 | } 24 | } -------------------------------------------------------------------------------- /Day 8.0 context API/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 80px; 8 | } 9 | 10 | .App-header { 11 | background-color: #222; 12 | height: 150px; 13 | padding: 20px; 14 | color: white; 15 | } 16 | 17 | .App-title { 18 | font-size: 1.5em; 19 | } 20 | 21 | .App-intro { 22 | font-size: large; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { transform: rotate(0deg); } 27 | to { transform: rotate(360deg); } 28 | } 29 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/components/navbar/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Link } from 'react-router-dom'; 3 | import logo from 'assets/imgs/logo.gif'; 4 | 5 | class Navbar extends Component { 6 | render() { 7 | return ( 8 | 14 | ); 15 | } 16 | } 17 | 18 | export default Navbar -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/loaders/Products.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import Product from "./Product"; 3 | 4 | class LoadingProducts extends Component { 5 | render() { 6 | return ( 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | ); 18 | } 19 | } 20 | 21 | export default LoadingProducts; 22 | -------------------------------------------------------------------------------- /Day 13 Next JS/components/ProductList.tsx: -------------------------------------------------------------------------------- 1 | import Product from './Product'; 2 | import { IProduct, IProductProps } from './interface'; 3 | 4 | 5 | interface IProductListProps { 6 | products: IProduct[] | any 7 | } 8 | 9 | const ProductList = (props: IProductListProps) => { 10 | return ( 11 |
12 | {props.products.map((product, index) => )} 14 |
15 | ) 16 | } 17 | 18 | export default ProductList; -------------------------------------------------------------------------------- /Day 2/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import App from './App'; 5 | import * as serviceWorker from './serviceWorker'; 6 | 7 | var trainings = [ 8 | { name: 'Web Development', price: 300 }, 9 | { name: 'Design', price: 400 }, 10 | { name: 'Integration', price: 250 }, 11 | { name: 'Training', price: 220 } 12 | ]; 13 | 14 | ReactDOM.render( 15 | , 16 | document.getElementById('root') 17 | ); 18 | 19 | serviceWorker.unregister(); 20 | -------------------------------------------------------------------------------- /Day 4 Quiz/src/components/AnswerOption.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | function AnswerOption(props) { 4 | 5 | return ( 6 |
  • 7 | 14 |
    • 15 | ); 16 | 17 | } 18 | 19 | export default AnswerOption; -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/components/Cart/Cart.css: -------------------------------------------------------------------------------- 1 | .cart__body { 2 | margin-bottom: 0.7em; 3 | } 4 | 5 | .cart-item { 6 | margin-bottom: 0.3em; 7 | display: flex; 8 | justify-content: space-between; 9 | align-items: center; 10 | } 11 | 12 | .cart-item__name { 13 | margin-left: 0.5em; 14 | vertical-align: middle; 15 | } 16 | 17 | .cart-item__price { 18 | font-weight: bold; 19 | } 20 | 21 | .cart__total { 22 | font-weight: bold; 23 | font-size: 1.5em; 24 | line-height: 1.1em; 25 | text-align: right; 26 | } 27 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/components/videos/videos.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import Video from './video'; 3 | import './videos.scss'; 4 | 5 | export default function Videos({ type, videos, onVideoClick }) { 6 | return ( 7 |
    8 | {videos.map(video => ( 9 |
    16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /Day 7 YouTube App/app/components/video_list.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import VideoListItem from './video_list_item'; 3 | 4 | const VideoList = (props) => { 5 | const videoItems = props.videos.map((video) => { 6 | return ( 7 | 11 | ); 12 | }); 13 | 14 | return ( 15 |
      16 | {videoItems} 17 |
    18 | ); 19 | }; 20 | 21 | export default VideoList; 22 | -------------------------------------------------------------------------------- /Day 3.0 React Router Intro/src/private.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { 4 | BrowserRouter as Router, 5 | Route, 6 | Redirect 7 | } from 'react-router-dom'; 8 | 9 | const Private = ({ componnet: Component, isAuthenticated, ...rest}) => ( 10 | ( 11 | isAuthenticated 12 | ? 13 | () 14 | : 15 | () 16 | )}/> 17 | ); 18 | 19 | export default Private; -------------------------------------------------------------------------------- /Day 11 Redux/src/_reducers/alert.reducer.js: -------------------------------------------------------------------------------- 1 | import { alertConstants } from '../_constants'; 2 | 3 | export function alert(state = {}, action) { 4 | switch (action.type) { 5 | case alertConstants.SUCCESS: 6 | return { 7 | type: 'alert-success', 8 | message: action.message 9 | }; 10 | case alertConstants.ERROR: 11 | return { 12 | type: 'alert-danger', 13 | message: action.message 14 | }; 15 | case alertConstants.CLEAR: 16 | return {}; 17 | default: 18 | return state 19 | } 20 | } -------------------------------------------------------------------------------- /Day 3.0 React Router Intro/src/team.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {Link} from 'react-router-dom'; 3 | 4 | export default class Home extends React.Component { 5 | render() { 6 | return ( 7 |
      8 |
    • 9 | team1 10 |
      • 11 |
    • 12 | team1 13 |
      • 14 |
    • 15 | team2 16 |
      • 17 |
    18 | ) 19 | } 20 | } -------------------------------------------------------------------------------- /Day 13 Next JS/components/banner.tsx: -------------------------------------------------------------------------------- 1 | import Link from "next/link"; 2 | export default function Header() { 3 | return ( 4 |
    5 |
    6 |

    Umbrellas

    7 |
    8 |
      9 |
    • Target /
      • 10 |
    • Women /
      • 11 |
    • Women's Accessories/
      • 12 |
    • Umbrellas (89)
      • 13 |
    14 |
    15 |
    16 |
    17 | ) 18 | } -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Veggy - React Shopping Cart Demo 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 17 | 18 | -------------------------------------------------------------------------------- /Day 12/src/components/Button/Button.css: -------------------------------------------------------------------------------- 1 | .component-button { 2 | display: inline-flex; 3 | width: 25%; 4 | flex: 1 0 auto; 5 | } 6 | 7 | .component-button.wide { 8 | width: 50%; 9 | } 10 | 11 | .component-button button { 12 | background-color: #E0E0E0; 13 | border: 0; 14 | font-size: 12px; 15 | margin: 0 1px 0 0; 16 | flex: 1 0 auto; 17 | padding: 0; 18 | } 19 | 20 | .component-button:last-child button { 21 | margin-right: 0; 22 | } 23 | 24 | .component-button.orange button { 25 | background-color: #F5923E; 26 | color: white; 27 | } -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/views/NewJob/index.js: -------------------------------------------------------------------------------- 1 | import NewJob from './NewJob'; 2 | import React, { useContext } from 'react'; 3 | import ContainerContext from '../../container/context'; 4 | import { withRouter} from 'react-router-dom'; 5 | 6 | const AddNewJob = (props) => { 7 | const { addNewJob } = useContext(ContainerContext); 8 | const handleSubmit = (data) => { 9 | console.log(data); 10 | addNewJob(data); 11 | props.history.push('/search'); 12 | } 13 | return 14 | } 15 | 16 | export default withRouter(AddNewJob); 17 | -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/src/empty-states/NoResults.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | 3 | const NoResults = () => { 4 | return ( 5 |
    6 |
    7 | Empty Tree 11 |

    Sorry, no products matched your search!

    12 |

    Enter a different keyword and try.

    13 |
    14 |
    15 | ); 16 | }; 17 | 18 | export default NoResults; 19 | -------------------------------------------------------------------------------- /Day 13 Next JS/components/CartList.tsx: -------------------------------------------------------------------------------- 1 | import Cart from './Cart'; 2 | import { IProduct, IProductProps } from './interface'; 3 | 4 | interface IProductListProps { 5 | products: IProduct[], 6 | } 7 | 8 | const CartList = (props: IProductListProps) => { 9 | return ( 10 |
    11 | {props.products && props.products.length === 0 && No data added in Cart} 12 | {props.products.map((product, index) => )} 13 |
    14 | ) 15 | } 16 | 17 | export default CartList; -------------------------------------------------------------------------------- /Day 14 Lazy Load/src/Header.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Link } from "react-router-dom"; 3 | 4 | class Header extends Component { 5 | constructor() { 6 | super(); 7 | } 8 | 9 | render() { 10 | return ( 11 |
    12 | 13 | Home 14 | 15 | 16 | Another Home 17 | 18 |
    19 | ); 20 | } 21 | } 22 | 23 | export default Header; 24 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "weather-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.2", 7 | "bootstrap": "^4.5.0", 8 | "react": "^16.2.0", 9 | "react-bootstrap": "^1.3.0", 10 | "react-dom": "^16.2.0", 11 | "react-router-dom": "^5.2.0", 12 | "react-scripts": "1.1.0" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | } 20 | } 21 | -------------------------------------------------------------------------------- /Day 12/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "calculator", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "big.js": "^5.0.3", 7 | "react": "^16.2.0", 8 | "react-dom": "^16.2.0", 9 | "react-scripts": "1.0.17" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test --env=jsdom", 15 | "eject": "react-scripts eject" 16 | }, 17 | "devDependencies": { 18 | "enzyme": "^3.3.0", 19 | "enzyme-adapter-react-16": "^1.1.1", 20 | "sinon": "^4.4.8" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 17 | 18 | -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/containers/Product.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import Product from '../components/Product'; 3 | import { addToCart, removeFromCart, isInCart } from '../ducks/cart'; 4 | 5 | const mapStateToProps = (state, props) => { 6 | return { 7 | isInCart: isInCart(state, props) 8 | } 9 | } 10 | 11 | const mapDispatchToProps = (dispatch) => ({ 12 | addToCart: (id) => dispatch(addToCart(id)), 13 | removeFromCart: (id) => dispatch(removeFromCart(id)) 14 | }) 15 | 16 | export default connect(mapStateToProps, mapDispatchToProps)(Product); 17 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/components/photos/photos.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './photo'; 3 | import './photos.scss'; 4 | import Photo from './photo'; 5 | 6 | export default function Photos({ type, photos, onImageClick }) { 7 | return ( 8 |
    9 | {photos.map(photo => ( 10 | 16 | ))} 17 |
    18 | ) 19 | } 20 | -------------------------------------------------------------------------------- /Day 4.1 Netflix Clone/src/components/partails/serachBar.js: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react'; 2 | 3 | const Search = (props) => { 4 | const [value, setValue] = useState(''); 5 | const onSubmit = (e) => { 6 | e.preventDefault(); 7 | props.onSubmit(value); 8 | } 9 | const handleChange = (e) => { 10 | setValue(e.target.value); 11 | } 12 | return ( 13 | 16 | ); 17 | } 18 | 19 | export default Search; -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | import * as serviceWorker from './serviceWorker'; 5 | import { HashRouter as Router } from 'react-router-dom'; 6 | import 'assets/scss/main.scss'; 7 | 8 | ReactDOM.render(, document.getElementById('root')); 9 | 10 | // If you want your app to work offline and load faster, you can change 11 | // unregister() to register() below. Note this comes with some pitfalls. 12 | // Learn more about service workers: http://bit.ly/CRA-PWA 13 | serviceWorker.unregister(); -------------------------------------------------------------------------------- /Day 4.1 Netflix Clone/src/components/ListToggle.js: -------------------------------------------------------------------------------- 1 | import React,{useState} from 'react'; 2 | 3 | const ListToggle = (props) => { 4 | 5 | const [toggled, setToggled] = useState(false); 6 | const handleClick = () => { 7 | if(toggled === true) { 8 | setToggled(false); 9 | } else { 10 | setToggled(true); 11 | } 12 | } 13 | return ( 14 |
    15 |
    16 | 17 | 18 |
    19 |
    20 | ); 21 | } 22 | 23 | export default ListToggle; -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 13 | React App 14 | 15 | 16 | 17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /Day 2/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 3/src/MessageList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class MessageList extends React.Component { 4 | render() { 5 | return ( 6 |
      7 | {this.props.messages.map((message, index) => { 8 | return ( 9 |
    • 10 |
      {message.senderId}
      11 |
      {message.text}
      12 |
      • 13 | ) 14 | })} 15 |
    16 | ) 17 | } 18 | } 19 | 20 | 21 | export default MessageList; 22 | 23 | 24 | -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/containers/Cart.js: -------------------------------------------------------------------------------- 1 | import { connect } from 'react-redux'; 2 | import Cart from '../components/Cart'; 3 | import { getItems, getCurrency, getTotal, removeFromCart } from '../ducks/cart'; 4 | 5 | const mapStateToProps = (state, props) => { 6 | return { 7 | items: getItems(state, props), 8 | currency: getCurrency(state, props), 9 | total: getTotal(state, props) 10 | } 11 | } 12 | 13 | const mapDispatchToProps = (dispatch) => ({ 14 | removeFromCart: (id) => dispatch(removeFromCart(id)) 15 | }) 16 | 17 | export default connect(mapStateToProps, mapDispatchToProps)(Cart); 18 | -------------------------------------------------------------------------------- /Day 10 Redux/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "todo-app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@material-ui/core": "^3.0.1", 7 | "@material-ui/icons": "^3.0.1", 8 | "lodash": "^4.17.10", 9 | "react": "^16.4.2", 10 | "react-dom": "^16.4.2", 11 | "react-redux": "^5.0.7", 12 | "react-scripts": "1.1.5", 13 | "redux": "^4.0.0", 14 | "redux-logger": "^3.0.6" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /Day 7.1 Shopping Cart/public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "short_name": "React App", 3 | "name": "Create React App Sample", 4 | "icons": [ 5 | { 6 | "src": "favicon.ico", 7 | "sizes": "64x64 32x32 24x24 16x16", 8 | "type": "image/x-icon" 9 | }, 10 | { 11 | "src": "logo192.png", 12 | "type": "image/png", 13 | "sizes": "192x192" 14 | }, 15 | { 16 | "src": "logo512.png", 17 | "type": "image/png", 18 | "sizes": "512x512" 19 | } 20 | ], 21 | "start_url": ".", 22 | "display": "standalone", 23 | "theme_color": "#000000", 24 | "background_color": "#ffffff" 25 | } 26 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/config/env/all.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | const config = { 4 | port: process.env.PORT || 5003, 5 | log: { 6 | //morgan options: 'combined', 'common', 'dev', 'short', 'tiny' 7 | format: 'combined', 8 | //winston config 9 | transports: { 10 | file: { 11 | level: 'debug', 12 | filename: './logs/applog.log', 13 | handleExceptions: true, 14 | json: false, 15 | maxsize: 5242880, //5MB 16 | colorize: false 17 | }, 18 | console: { 19 | level: 'debug', 20 | handleExceptions: true, 21 | json: false, 22 | colorize: true 23 | } 24 | } 25 | } 26 | }; 27 | export default config; 28 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/app/service/user.service.js: -------------------------------------------------------------------------------- 1 | 2 | const User = require('../models/user'); 3 | 4 | export async function findByUserName (name) { 5 | return await User.findOne({ userName: name}); 6 | } 7 | export async function list({ limit=50,offset=0, ...args} = {}) { 8 | return await User.find({}).populate('posts'); 9 | } 10 | export async function findById(UserId) { 11 | return await User.findById(UserId).populate('posts'); 12 | } 13 | export async function create(user) { 14 | return await User.create(user); 15 | } 16 | export async function deleteUser(UserId) { 17 | return await User.findByIdAndRemove(UserId); 18 | } -------------------------------------------------------------------------------- /Day 8 Book Store/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 12 | Bookseller 13 | 14 | 15 | 16 |

    Bookseller

    17 |
    18 | 19 | 20 | -------------------------------------------------------------------------------- /Day 3/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Day 5 Github Battle/config/polyfills.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | if (typeof Promise === 'undefined') { 4 | // Rejection tracking prevents a common issue where React gets into an 5 | // inconsistent state due to an error, but it gets swallowed by a Promise, 6 | // and the user has no idea what causes React's erratic future behavior. 7 | require('promise/lib/rejection-tracking').enable(); 8 | window.Promise = require('promise/lib/es6-extensions.js'); 9 | } 10 | 11 | // Object.assign() is commonly used with React. 12 | // It will use the native implementation if it's present and isn't buggy. 13 | Object.assign = require('object-assign'); 14 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/config/env/production.js: -------------------------------------------------------------------------------- 1 | 2 | const config = { 3 | db: { 4 | database: 'blog-prod', 5 | username: 'admin-prod', 6 | password: 'admin', 7 | host: 'localhost', 8 | port: 3306, 9 | dialect: 'mysql' 10 | }, 11 | log: { 12 | //morgan options: 'combined', 'common', 'dev', 'short', 'tiny' 13 | format: 'combined', 14 | //winston config 15 | transports: { 16 | file: { 17 | level: 'debug', 18 | filename: '../logs/applog.log', 19 | handleExceptions: true, 20 | json: false, 21 | maxsize: 5242880, //5MB 22 | colorize: false 23 | } 24 | } 25 | } 26 | }; 27 | export default config; 28 | -------------------------------------------------------------------------------- /Day 7 YouTube App/config/polyfills.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | if (typeof Promise === 'undefined') { 4 | // Rejection tracking prevents a common issue where React gets into an 5 | // inconsistent state due to an error, but it gets swallowed by a Promise, 6 | // and the user has no idea what causes React's erratic future behavior. 7 | require('promise/lib/rejection-tracking').enable(); 8 | window.Promise = require('promise/lib/es6-extensions.js'); 9 | } 10 | 11 | // Object.assign() is commonly used with React. 12 | // It will use the native implementation if it's present and isn't buggy. 13 | Object.assign = require('object-assign'); 14 | -------------------------------------------------------------------------------- /Day 3.1 React Router App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router-online-training", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "16.6.3", 7 | "react-dom": "16.6.3", 8 | "react-router-dom": "4.3.1" 9 | }, 10 | "devDependencies": { 11 | "react-scripts": "2.1.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test --env=jsdom", 17 | "eject": "react-scripts eject" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /Day 6 Charts/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | pointer-events: none; 9 | } 10 | 11 | .App-header { 12 | background-color: #282c34; 13 | min-height: 100vh; 14 | display: flex; 15 | flex-direction: column; 16 | align-items: center; 17 | justify-content: center; 18 | font-size: calc(10px + 2vmin); 19 | color: white; 20 | } 21 | 22 | .App-link { 23 | color: #61dafb; 24 | } 25 | 26 | @keyframes App-logo-spin { 27 | from { 28 | transform: rotate(0deg); 29 | } 30 | to { 31 | transform: rotate(360deg); 32 | } 33 | } 34 | -------------------------------------------------------------------------------- /Day 3.0 React Router Intro/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router-online-training", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "16.6.3", 7 | "react-dom": "16.6.3", 8 | "react-router-dom": "4.3.1" 9 | }, 10 | "devDependencies": { 11 | "react-scripts": "2.1.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test --env=jsdom", 17 | "eject": "react-scripts eject" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /Day 6 Charts/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "new", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "antd": "^3.16.2", 7 | "heatmap.js": "^2.0.5", 8 | "react": "^16.8.6", 9 | "react-dom": "^16.8.6", 10 | "react-scripts": "2.1.8" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /Day 11 Redux/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-redux-registration-login-example", 3 | "version": "0.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "16.1.1", 7 | "redux": "4.0.0", 8 | "history": "4.7.2", 9 | "react-dom": "16.1.1", 10 | "react-redux": "5.0.7", 11 | "redux-thunk": "2.2.0", 12 | "redux-logger": "3.0.6", 13 | "react-router-dom": "4.2.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "devDependencies": { 22 | "react-scripts": "latest" 23 | } 24 | } -------------------------------------------------------------------------------- /Day 13 Next JS/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": [ 5 | "dom", 6 | "dom.iterable", 7 | "esnext" 8 | ], 9 | "allowJs": true, 10 | "skipLibCheck": true, 11 | "strict": false, 12 | "forceConsistentCasingInFileNames": true, 13 | "noEmit": true, 14 | "esModuleInterop": true, 15 | "module": "esnext", 16 | "moduleResolution": "node", 17 | "resolveJsonModule": true, 18 | "isolatedModules": true, 19 | "jsx": "preserve" 20 | }, 21 | "exclude": [ 22 | "node_modules" 23 | ], 24 | "include": [ 25 | "next-env.d.ts", 26 | "**/*.ts", 27 | "**/*.tsx" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /Day 6 Charts/src/Header/header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {PageHeader} from 'antd'; 3 | /* eslint react/no-find-dom-node:0 */ 4 | /* react/forbid-prop-types:0 */ 5 | class ReactHeatmap extends React.Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | this.state = { 10 | data: null 11 | } 12 | this.handelBack = this.handelBack.bind(this); 13 | } 14 | handelBack(){} 15 | 16 | render() { 17 | return ( 18 | 23 | ); 24 | } 25 | } 26 | 27 | 28 | 29 | export default ReactHeatmap; 30 | 31 | -------------------------------------------------------------------------------- /Day 8 Book Store/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bookseller", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.18.0", 7 | "react": "^16.7.0", 8 | "react-dom": "^16.7.0", 9 | "react-router-dom": "^4.3.1", 10 | "react-scripts": "2.1.2" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test", 16 | "eject": "react-scripts eject" 17 | }, 18 | "eslintConfig": { 19 | "extends": "react-app" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/javascripts/components/Header.js: -------------------------------------------------------------------------------- 1 | import React, { PropTypes, Component } from 'react'; 2 | import TodoTextInput from './TodoTextInput'; 3 | 4 | class Header extends Component { 5 | handleSave (text) { 6 | if (text.length !== 0) { 7 | this.props.addTodo(text); 8 | } 9 | } 10 | render () { 11 | return ( 12 |
    13 |

    todos< /h1> 14 | 15 |

    16 | ); 17 | } 18 | } 19 | 20 | Header.propTypes = { 21 | addTodo: PropTypes.func.isRequired 22 | }; 23 | 24 | export default Header; -------------------------------------------------------------------------------- /Day 12/src/tests/operate.test.js: -------------------------------------------------------------------------------- 1 | import Big from 'big.js'; 2 | import operate from '../logic/operate'; 3 | 4 | describe('operate', () => { 5 | it('returns an answer as a String', () => { 6 | const answer = operate(1, 2, '+'); 7 | expect(typeof answer).toEqual('string'); 8 | }); 9 | 10 | it('accepts either strings or numbers as input', () => { 11 | const answer = operate('42', 15, '%'); 12 | expect(answer).toEqual('12'); 13 | }); 14 | 15 | it('throws an error for an improper operation', () => { 16 | const operation = '*'; 17 | expect(() => { 18 | operate(4, 90, operation); 19 | }).toThrowError(`Unknown operation ${operation}`); 20 | }); 21 | }); -------------------------------------------------------------------------------- /Day 4 Quiz/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-quiz-app", 3 | "version": "0.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "16.1.1", 7 | "redux": "3.7.2", 8 | "react-dom": "16.1.1", 9 | "prop-types": "15.6.1", 10 | "react-redux": "5.0.7" 11 | }, 12 | "scripts": { 13 | "start": "react-scripts start", 14 | "build": "react-scripts build", 15 | "test": "react-scripts test --env=jsdom", 16 | "eject": "react-scripts eject" 17 | }, 18 | "devDependencies": { 19 | "react-scripts": "latest" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /Day 12/src/tests/Panel.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Enzyme, { shallow } from 'enzyme'; 4 | import Adapter from 'enzyme-adapter-react-16'; 5 | import Panel from '../components/Panel/Panel'; 6 | 7 | Enzyme.configure({ adapter: new Adapter() }); 8 | 9 | describe('', () => { 10 | it('should render a div with class `component-panel`', () => { 11 | const component = shallow(); 12 | expect(component.find('.component-panel')).toHaveLength(1); 13 | }); 14 | 15 | it('should render 19 buttons', () => { 16 | const component = shallow(); 17 | expect(component.find('Button')).toHaveLength(19); 18 | }); 19 | }); -------------------------------------------------------------------------------- /Day 7 YouTube App/app/components/video_list_item.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const VideoListItem = (props) => { 4 | const imageUrl = props.video.snippet.thumbnails.default.url; 5 | 6 | return ( 7 |
  • props.onVideoSelect(props.video)} className="list-group-item"> 8 |
    9 |
    10 | 11 |
    12 |
    13 |
    {props.video.snippet.title}
    14 |
    15 |
    16 |
    • 17 | ); 18 | }; 19 | 20 | export default VideoListItem; 21 | -------------------------------------------------------------------------------- /Day 3.1 React Router App/src/login/Login.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Redirect } from 'react-router-dom'; 3 | import authHelper from '../helpers/AuthHelper'; 4 | 5 | class Login extends React.Component { 6 | constructor(props) { 7 | super(props); 8 | this.state = { redirect: false }; 9 | } 10 | 11 | onLoginClick() { 12 | authHelper.authenticate(() => { 13 | this.setState({ redirect: true }); 14 | }); 15 | } 16 | 17 | render() { 18 | if (this.state.redirect) { 19 | return 20 | } 21 | 22 | return ; 23 | } 24 | } 25 | 26 | export default Login; 27 | -------------------------------------------------------------------------------- /Day 12/src/logic/operate.js: -------------------------------------------------------------------------------- 1 | import Big from 'big.js'; 2 | 3 | function operate(numberOne, numberTwo, operation) { 4 | const one = Big(numberOne); 5 | const two = Big(numberTwo); 6 | 7 | switch(operation) { 8 | case '+': 9 | return one.plus(two).toString(); 10 | case '-': 11 | return one.minus(two).toString(); 12 | case 'x': 13 | return one.times(two).toString(); 14 | case '÷': 15 | return one.div(two).toString(); 16 | case '%': 17 | return one.mod(two).toString(); 18 | default: 19 | throw Error(`Unknown operation ${operation}`); 20 | } 21 | } 22 | 23 | export default operate; -------------------------------------------------------------------------------- /Day 7 YouTube App/app/components/search_bar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class SearchBar extends Component { 4 | constructor(props) { 5 | super(props); 6 | this.state = { term: '' }; 7 | } 8 | handleChange(e){ 9 | this.setState({term : e.target.value}); 10 | if(this.state.term.length > 3){ 11 | this.props.handleChange(this.state.term); 12 | } 13 | } 14 | 15 | render() { 16 | return ( 17 |
    18 | 21 |
    22 | ); 23 | } 24 | } 25 | 26 | export default SearchBar; 27 | -------------------------------------------------------------------------------- /Day 11 Redux/src/_constants/user.constants.js: -------------------------------------------------------------------------------- 1 | export const userConstants = { 2 | REGISTER_REQUEST: 'USERS_REGISTER_REQUEST', 3 | REGISTER_SUCCESS: 'USERS_REGISTER_SUCCESS', 4 | REGISTER_FAILURE: 'USERS_REGISTER_FAILURE', 5 | 6 | LOGIN_REQUEST: 'USERS_LOGIN_REQUEST', 7 | LOGIN_SUCCESS: 'USERS_LOGIN_SUCCESS', 8 | LOGIN_FAILURE: 'USERS_LOGIN_FAILURE', 9 | 10 | LOGOUT: 'USERS_LOGOUT', 11 | 12 | GETALL_REQUEST: 'USERS_GETALL_REQUEST', 13 | GETALL_SUCCESS: 'USERS_GETALL_SUCCESS', 14 | GETALL_FAILURE: 'USERS_GETALL_FAILURE', 15 | 16 | DELETE_REQUEST: 'USERS_DELETE_REQUEST', 17 | DELETE_SUCCESS: 'USERS_DELETE_SUCCESS', 18 | DELETE_FAILURE: 'USERS_DELETE_FAILURE' 19 | }; 20 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/services/giphy-service.js: -------------------------------------------------------------------------------- 1 | const giphyApiUrl = '//api.giphy.com/v1/gifs/search'; 2 | const giphyApiKey = 'YoyUyRGt2YenjFvxfq87V5gvNjak2EBQ'; 3 | 4 | const format = (img) => { 5 | return { 6 | id: img.id, 7 | url: img.images['original_mp4'] 8 | } 9 | }; 10 | export const giphySearch = (term) => { 11 | const apiUrl = `${giphyApiUrl}?api_key=${giphyApiKey}&q=${term}`; 12 | 13 | return fetch(apiUrl) 14 | .then(res => res.json()) 15 | .then(result => { 16 | return result.data.map((img) => format(img)); 17 | }) 18 | .catch((err) => { 19 | console.log('error: ', err); 20 | return err; 21 | }); 22 | }; 23 | -------------------------------------------------------------------------------- /Day 6 Charts/src/Home/searchBarFilter.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import DatePicker from '../common/datePicker'; 3 | import SelectDropDowns from '../common/select'; 4 | 5 | class SearchBarFilter extends React.Component { 6 | 7 | handleChange(data){ 8 | this.props.handleChange(data); 9 | } 10 | handleDataChange(){ 11 | this.props.handleDataChange(); 12 | } 13 | render() { 14 | return ( 15 |
    16 | 17 | 18 |
    19 | ); 20 | } 21 | } 22 | 23 | 24 | 25 | export default SearchBarFilter; 26 | 27 | -------------------------------------------------------------------------------- /Day 2/src/Training.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | 4 | class Training extends React.Component { 5 | state = { 6 | active: false 7 | } 8 | clickHandler(){ 9 | const { price, addTotal} = this.props; 10 | this.setState({ active : !this.state.active}, () => { 11 | addTotal(this.state.active ? price: -price) 12 | }); 13 | } 14 | render() { 15 | const {name, price} = this.props; 16 | const {active} = this.state; 17 | return ( 18 |

    this.clickHandler()}> 20 | {name} ${price.toFixed(2)} 21 |

    22 | ); 23 | } 24 | } 25 | 26 | export default Training; 27 | -------------------------------------------------------------------------------- /Day 5 Github Battle/app/components/overview/pages/repoListItemComponent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | 4 | const Repo = function (props) { 5 | const Repos = props.repos.map((repo, index) => { 6 | return ( 7 |
    8 |

    # {index}

    9 | Avatar for freeCodeCamp 10 |

    11 | {repo.owner.login}

    12 |
    13 | ) 14 | }); 15 | return ( 16 |
      17 | {Repos} 18 |
    19 | ) 20 | } 21 | 22 | export default Repo; -------------------------------------------------------------------------------- /Day 3.2 Flicker App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-router-online-training", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react-router-dom": "4.3.1", 7 | "node-sass": "^4.14.1", 8 | "react": "^16.13.1", 9 | "react-dom": "^16.13.1", 10 | "react-intersection-observer": "^6.2.3" 11 | }, 12 | "devDependencies": { 13 | "react-scripts": "2.1.1" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test --env=jsdom", 19 | "eject": "react-scripts eject" 20 | }, 21 | "browserslist": [ 22 | ">0.2%", 23 | "not dead", 24 | "not ie <= 11", 25 | "not op_mini all" 26 | ] 27 | } 28 | -------------------------------------------------------------------------------- /Day 7 YouTube App/app/components/video_detail.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const VideoDetail = ({video}) => { 4 | if (!video) { 5 | return
    Loading...
    ; 6 | } 7 | 8 | const videoId = video.id.videoId; 9 | const url = `https://www.youtube.com/embed/${videoId}`; 10 | 11 | return ( 12 |
    13 |
    14 | 15 |
    16 |
    17 |
    {video.snippet.title}
    18 |
    {video.snippet.description}
    19 |
    20 |
    21 | ); 22 | }; 23 | 24 | export default VideoDetail; 25 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/server.js: -------------------------------------------------------------------------------- 1 | 2 | /** 3 | * Module dependencies. 4 | */ 5 | require('dotenv').config(); 6 | const http = require('http'); 7 | const logger = require('./app/util/logger'); 8 | import App from './express'; 9 | /** 10 | * Main application entry file. 11 | * Please note that the order of loading is important. 12 | */ 13 | var mongoose = require('mongoose'); 14 | console.log(process.env.MONGO) 15 | mongoose.connect(process.env.MONGO, { useNewUrlParser: true } ); 16 | // Bootstrap sequelize models 17 | const server = http.createServer(App()); 18 | 19 | server.listen(3002 || process.env.PORT, () => { 20 | logger.info('Application started on port ', 3002 || process.env.PORT); 21 | }); 22 | 23 | export default server; 24 | -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/components/ProductList/ProductList.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Product from '../../containers/Product'; 4 | 5 | const ProductList = ({ products }) => { 6 | return ( 7 |
    8 |

    Products

    9 |
      10 | {products.map(product => ( 11 |
    • 12 | 13 |
      • 14 | ))} 15 |
    16 |
    17 | ); 18 | } 19 | 20 | ProductList.propTypes = { 21 | products: PropTypes.array, 22 | } 23 | 24 | export default ProductList; 25 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/README.md: -------------------------------------------------------------------------------- 1 | # [Demo](https://nenadv91.github.io/Hacker-news-clone/) 2 | 3 | ## Available Scripts 4 | 5 | In the project directory, you can run: 6 | 7 | ### `npm start` 8 | 9 | Runs the app in the development mode.
    10 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser. 11 | 12 | The page will reload if you make edits.
    13 | You will also see any lint errors in the console. 14 | 15 | ### `npm run build` 16 | 17 | Builds the app for production to the `build` folder.
    18 | It correctly bundles React in production mode and optimizes the build for the best performance. 19 | 20 | The build is minified and the filenames include the hashes.
    21 | Your app is ready to be deployed! 22 | 23 | 24 | -------------------------------------------------------------------------------- /Day 4.1 Netflix Clone/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-quiz-app", 3 | "version": "0.0.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.19.0", 7 | "jquery": "^3.4.1", 8 | "prop-types": "15.6.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-redux": "5.0.7", 12 | "redux": "3.7.2" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test --env=jsdom", 18 | "eject": "react-scripts eject" 19 | }, 20 | "devDependencies": { 21 | "react-scripts": "latest" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ] 29 | } 30 | -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/src/containers/book-detail.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { connect } from 'react-redux'; 3 | 4 | class BookDetail extends Component { 5 | render() { 6 | if (!this.props.book) { 7 | return
    Select a book to get started.
    ; 8 | } 9 | 10 | return ( 11 |
    12 |

    Details for:

    13 |
    Title: {this.props.book.title}
    14 |
    Pages: {this.props.book.pages}
    15 |
    16 | ); 17 | } 18 | } 19 | 20 | function mapStateToProps(state) { 21 | return { 22 | book: state.activeBook 23 | }; 24 | } 25 | /*function mapDispatchToProps(dispatch) { 26 | }*/ 27 | export default connect(mapStateToProps)(BookDetail); 28 | -------------------------------------------------------------------------------- /Day 11 Redux/src/_reducers/authentication.reducer.js: -------------------------------------------------------------------------------- 1 | import { userConstants } from '../_constants'; 2 | 3 | let user = JSON.parse(localStorage.getItem('user')); 4 | const initialState = user ? { loggedIn: true, user } : {}; 5 | 6 | export function authentication(state = initialState, action) { 7 | switch (action.type) { 8 | case userConstants.LOGIN_REQUEST: 9 | return { 10 | loggingIn: true, 11 | user: action.user 12 | }; 13 | case userConstants.LOGIN_SUCCESS: 14 | return { 15 | loggedIn: true, 16 | user: action.user 17 | }; 18 | case userConstants.LOGIN_FAILURE: 19 | return {}; 20 | case userConstants.LOGOUT: 21 | return {}; 22 | default: 23 | return state 24 | } 25 | } -------------------------------------------------------------------------------- /Day 6 Charts/src/common/select.js: -------------------------------------------------------------------------------- 1 | import { Select } from 'antd'; 2 | import React from 'react'; 3 | 4 | const { Option, OptGroup } = Select; 5 | 6 | 7 | 8 | const selectDropdown = (props) => { 9 | const handleChange = (value)=> { 10 | props.handleChange(value); 11 | } 12 | return ( 13 | ) 24 | } 25 | 26 | export default selectDropdown; -------------------------------------------------------------------------------- /Day 5.1 React Blog App/server/app/routes/user.route.js: -------------------------------------------------------------------------------- 1 | 2 | import userCtrl from '../controllers/user.ctrl'; 3 | import userValidator from '../validators/user.validator'; 4 | import postCtrl from '../controllers/post.ctrl'; 5 | import postValidator from '../validators/post.validator'; 6 | import * as express from 'express'; 7 | const router = express.Router() 8 | 9 | router.route('/').get(userCtrl.list); 10 | router.route('/:userId').get(userCtrl.get); 11 | router.route('/').post([userValidator.reqValidator, userValidator.uniqueValidator, userCtrl.create]); 12 | router.route('/:userId').delete(userCtrl.delete); 13 | 14 | router.route('/:userId/posts') 15 | .get(postCtrl.getPostByUser) 16 | .post([postValidator.reqValidator, postCtrl.create]); 17 | 18 | export default router; -------------------------------------------------------------------------------- /Day 3.1 React Router App/src/events/EventItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { Link } from 'react-router-dom'; 4 | 5 | const EventItem = (props) => { 6 | return ( 7 |
  • 8 | {props.name}
    9 | 10 | Szczegóły 11 |
    • 12 | ); 13 | }; 14 | 15 | EventItem.propTypes = { 16 | id: PropTypes.number.isRequired, 17 | name: PropTypes.string.isRequired, 18 | place: PropTypes.string.isRequired, 19 | date: PropTypes.string.isRequired, 20 | time: PropTypes.string.isRequired, 21 | onDeleteClicked: PropTypes.func.isRequired 22 | }; 23 | 24 | export default EventItem; 25 | -------------------------------------------------------------------------------- /Day 8.2 Hooks/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hooks", 3 | "version": "0.1.1", 4 | "private": true, 5 | "dependencies": { 6 | "gh-pages": "^2.1.1", 7 | "react": "^16.9.0", 8 | "react-dom": "^16.9.0", 9 | "react-scripts": "^3.1.1" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject", 16 | "predeploy": "npm run build", 17 | "deploy": "gh-pages -d build" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": [ 23 | ">0.2%", 24 | "not dead", 25 | "not ie <= 11", 26 | "not op_mini all" 27 | ], 28 | "homepage": "https://taniarascia.github.io/react-hooks" 29 | } 30 | -------------------------------------------------------------------------------- /Day 8.1 Hooks Simple Cart/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hooks", 3 | "version": "0.1.1", 4 | "private": true, 5 | "dependencies": { 6 | "gh-pages": "^2.1.1", 7 | "react": "^16.9.0", 8 | "react-dom": "^16.9.0", 9 | "react-scripts": "^3.1.1" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject", 16 | "predeploy": "npm run build", 17 | "deploy": "gh-pages -d build" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": [ 23 | ">0.2%", 24 | "not dead", 25 | "not ie <= 11", 26 | "not op_mini all" 27 | ], 28 | "homepage": "https://taniarascia.github.io/react-hooks" 29 | } 30 | -------------------------------------------------------------------------------- /Day 8.3 Hooks Simple Cart-2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-hooks", 3 | "version": "0.1.1", 4 | "private": true, 5 | "dependencies": { 6 | "gh-pages": "^2.1.1", 7 | "react": "^16.9.0", 8 | "react-dom": "^16.9.0", 9 | "react-scripts": "^3.1.1" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject", 16 | "predeploy": "npm run build", 17 | "deploy": "gh-pages -d build" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": [ 23 | ">0.2%", 24 | "not dead", 25 | "not ie <= 11", 26 | "not op_mini all" 27 | ], 28 | "homepage": "https://taniarascia.github.io/react-hooks" 29 | } 30 | -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/javascripts/actions/todos.js: -------------------------------------------------------------------------------- 1 | import * as types from '../constants/ActionTypes'; 2 | 3 | export function addTodo(text) { 4 | return { 5 | type: types.ADD_TODO, 6 | text : text 7 | }; 8 | } 9 | 10 | export function deleteTodo(id) { 11 | return { 12 | type: types.DELETE_TODO, 13 | id : id 14 | }; 15 | } 16 | 17 | export function editTodo(id, text) { 18 | return { 19 | type: types.EDIT_TODO, 20 | id, 21 | text 22 | }; 23 | } 24 | 25 | export function completeTodo(id) { 26 | return { 27 | type: types.COMPLETE_TODO, 28 | id 29 | }; 30 | } 31 | 32 | export function completeAll() { 33 | return { 34 | type: types.COMPLETE_ALL 35 | }; 36 | } 37 | 38 | export function clearCompleted() { 39 | return { 40 | type: types.CLEAR_COMPLETED 41 | }; 42 | } -------------------------------------------------------------------------------- /Day 13 Next JS/static/profile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/README.md: -------------------------------------------------------------------------------- 1 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 2 | 3 | Basic React gallery app, that let user search images and Gif's on `flicker` and `giphy` service. 4 | 5 | All assets loads with only when needed (just before entering the viewport) with `intersection-observer` (modern browsers only 😎) 6 | 7 | 8 | todo: 9 | * add the ability to select multiple images 10 | * add other sources (`getty` maybe) 11 | * modal that shows the asset on full page 12 | * add [Redux](https://redux.js.org/) 13 | * add [styled-components](https://styled-components.com) 14 | * add `local-storage` support 15 | * store selections on DB 16 | * add authentication 17 | * more and more.. 18 | 19 | 20 | demo: 21 | https://adica.github.io/react-flicker-app/ 22 | -------------------------------------------------------------------------------- /Day 10 Redux/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import logo from "./logo.svg"; 3 | import "./App.css"; 4 | import ToDO from "./pages/todo"; 5 | import { Provider as ReduxProvider } from "react-redux"; 6 | import configureStore from "./modules/store"; 7 | 8 | const reduxStore = configureStore(window.REDUX_INITIAL_DATA); 9 | 10 | class App extends Component { 11 | render() { 12 | return ( 13 | 14 |
    15 |
    16 | logo 17 |

    ToDo Redux app

    18 |
    19 | 20 |
    21 |     22 | ); 23 | } 24 | } 25 | 26 | export default App; 27 | -------------------------------------------------------------------------------- /Day 14 Lazy Load/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "lazy-loading-react-components-with-reactlazy-and-suspense", 3 | "version": "1.0.0", 4 | "description": "Lazy Loading React Components (with react.lazy and suspense)", 5 | "keywords": [], 6 | "main": "src/index.js", 7 | "dependencies": { 8 | "react": "16.12.0", 9 | "react-dom": "16.12.0", 10 | "react-router-dom": "5.1.2", 11 | "react-scripts": "3.0.1" 12 | }, 13 | "devDependencies": { 14 | "typescript": "3.3.3" 15 | }, 16 | "scripts": { 17 | "start": "react-scripts start", 18 | "build": "react-scripts build", 19 | "test": "react-scripts test --env=jsdom", 20 | "eject": "react-scripts eject" 21 | }, 22 | "browserslist": [ 23 | ">0.2%", 24 | "not dead", 25 | "not ie <= 11", 26 | "not op_mini all" 27 | ] 28 | } -------------------------------------------------------------------------------- /Day 5.2 Shopping Cart Redux-2/src/components/Cart/CartItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | 4 | const CartItem = ({ name, price, currency, onClick }) => { 5 | return ( 6 |
    7 |
    8 | 9 | {name} 10 |
    11 |
    {price} {currency}
    12 |
    13 | ); 14 | } 15 | 16 | CartItem.propTypes = { 17 | name: PropTypes.string.isRequired, 18 | price: PropTypes.number.isRequired, 19 | currency: PropTypes.string.isRequired, 20 | onClick: PropTypes.func.isRequired 21 | } 22 | 23 | export default CartItem; 24 | -------------------------------------------------------------------------------- /Day 12/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Display from './components/Display/Display'; 3 | import Panel from './components/Panel/Panel'; 4 | import calculate from './logic/calculate'; 5 | import './App.css'; 6 | 7 | class App extends Component { 8 | state = { 9 | total: '0', 10 | next: null, 11 | operation: null 12 | } 13 | 14 | handleClick = (buttonName) => { 15 | this.setState(calculate(this.state, buttonName)); 16 | } 17 | 18 | render() { 19 | return ( 20 |
    21 | 22 | 23 |
    24 | ); 25 | } 26 | } 27 | 28 | export default App; 29 | -------------------------------------------------------------------------------- /Day 12/src/tests/Display.test.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Enzyme, { shallow } from 'enzyme'; 4 | import Adapter from 'enzyme-adapter-react-16'; 5 | import Display from '../components/Display/Display'; 6 | 7 | Enzyme.configure({ adapter: new Adapter() }); 8 | 9 | describe('', () => { 10 | it('should render a div with class `component-display`', () => { 11 | const component = shallow(); 12 | expect(component.find('.component-display')).toHaveLength(1); 13 | }); 14 | 15 | it('should render whatever value it gets passed', () => { 16 | const component = shallow(); 17 | expect(component.contains( 18 |
    19 | 6 20 |
    21 | )).toEqual(true); 22 | }); 23 | }); -------------------------------------------------------------------------------- /Day 4 Quiz/src/components/Result.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | class Result extends React.Component { 4 | constructor(props){ 5 | super(props); 6 | } 7 | renderQuestins(){ 8 | return this.props.quizResult.map((_data,index) =>{ 9 | return
    {_data.question}
    correct answer is option: {_data.answerindex} : and you have selcted {this.props.answers[index]+1} { ((this.props.answers[index]+1) === _data.answerindex) ? (its correct !man) : ''}
    10 | }) 11 | } 12 | render (){ 13 | return ( 14 |
    15 |
    16 | Lets see your results! 17 |
    {this.renderQuestins()}
    18 |
    19 |
    20 | ) 21 | } 22 | } 23 | 24 | export default Result; -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/components/comments/index.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import Comment from 'components/comment'; 3 | import Loading from 'components/loading'; 4 | 5 | class Comments extends Component { 6 | render() { 7 | let { data } = this.props; 8 | 9 | if(data === null) { 10 | return 11 | } 12 | 13 | if(data === false) { 14 | return null; 15 | } 16 | 17 | if(!data.length) { 18 | return
    20 | No comments found.
    21 | } 22 | 23 | return ( 24 |
    25 | {data.map(comment => 26 | )} 29 |
    30 | ) 31 | } 32 | } 33 | 34 | export default Comments -------------------------------------------------------------------------------- /Day 5.1 Dashboard App/src/views/NewJob/TabPanel.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import Box from '@material-ui/core/Box'; 4 | function TabPanel(props) { 5 | const { children, value, index, ...other } = props; 6 | 7 | return ( 8 | 21 | ); 22 | } 23 | 24 | TabPanel.propTypes = { 25 | children: PropTypes.node, 26 | index: PropTypes.any.isRequired, 27 | value: PropTypes.any.isRequired, 28 | }; 29 | 30 | export default TabPanel; 31 | -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/src/components/header.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Navbar } from 'react-bootstrap'; 3 | import 'bootstrap/dist/css/bootstrap.min.css'; 4 | 5 | class Header extends Component { 6 | render() { 7 | return ( 8 | 9 | 10 | 11 | {' '} 18 | React Bootstrap 19 | 20 | 21 | 22 | ); 23 | } 24 | } 25 | 26 | export default Header; -------------------------------------------------------------------------------- /Day 9 Redux/ES6 Redux App Books/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "redux-simple-starter", 3 | "version": "1.0.0", 4 | "description": "Simple starter package for Redux with React and Babel support", 5 | "main": "index.js", 6 | "repository": "git@github.com", 7 | "scripts": { 8 | "start": "webpack-dev-server --port 3002" 9 | }, 10 | "author": "", 11 | "license": "ISC", 12 | "devDependencies": { 13 | "babel-core": "^6.2.1", 14 | "babel-loader": "^6.2.0", 15 | "babel-preset-es2015": "^6.1.18", 16 | "babel-preset-react": "^6.1.18", 17 | "webpack": "^1.12.9", 18 | "webpack-dev-server": "^1.14.0" 19 | }, 20 | "dependencies": { 21 | "babel-preset-stage-1": "^6.1.18", 22 | "react": "^0.14.3", 23 | "react-dom": "^0.14.3", 24 | "react-redux": "^4.0.0", 25 | "redux": "^3.0.4" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/assets/scss/components/_comment.scss: -------------------------------------------------------------------------------- 1 | .post-comments { 2 | margin-top: 20px; 3 | } 4 | 5 | .comment { 6 | margin-bottom: 10px; 7 | 8 | .deleted { 9 | color: $text-deleted; 10 | } 11 | 12 | &-date { 13 | margin-left: 5px; 14 | } 15 | 16 | &-info { 17 | color: $text-color-light; 18 | margin-bottom: 3px; 19 | font-size: 11px; 20 | 21 | .comments-toggle { 22 | margin-left: 5px; 23 | } 24 | 25 | >a { 26 | color: $text-color-light; 27 | } 28 | 29 | >span:last-child { 30 | margin-left: 5px; 31 | } 32 | } 33 | 34 | .nested-comments { 35 | margin-top: 20px; 36 | margin-left: 25px; 37 | 38 | @media(max-width: 992px) { 39 | margin-left: 15px; 40 | } 41 | 42 | @media(max-width: 768px) { 43 | margin-left: 10px; 44 | } 45 | } 46 | } -------------------------------------------------------------------------------- /Day 5.1 React Blog App/client/src/components/home.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from "react"; 2 | import { Jumbotron, Button } from 'react-bootstrap'; 3 | import 'bootstrap/dist/css/bootstrap.min.css'; 4 | 5 | class Home extends Component { 6 | render() { 7 | return ( 8 | 9 | 10 |

    Hello, world!

    11 |

    12 | This is a simple hero unit, a simple jumbotron-style component for calling 13 | extra attention to featured content or information. 14 |

    15 |

    16 | 17 |

    18 |     19 |     20 | ); 21 | } 22 | } 23 | 24 | export default Home; -------------------------------------------------------------------------------- /Day 2/src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './App.css'; 3 | import Training from './Training'; 4 | class App extends React.Component { 5 | state = { 6 | total: 0 7 | } 8 | addTotal(price) { 9 | this.setState({ 10 | total: this.state.total + price 11 | }) 12 | } 13 | render() { 14 | const { trainings } = this.props; 15 | return ( 16 | <> 17 |

    Our Trainings

    18 | { 19 | trainings.map((i, index) => { 20 | return this.addTotal(price)} 21 | name={i.name} 22 | price={i.price} 23 | key={index} 24 | active={i.ative} /> 25 | }) 26 | } 27 |

    Total ${this.state.total.toFixed(2)}

    28 | 29 | ); 30 | } 31 | } 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /Day 9 Redux/React Redux App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "simple-todo-with-react-and-redux", 3 | "version": "1.0.0", 4 | "description": "simple todo with react and redux", 5 | "main": "index.js", 6 | "repository": { 7 | "type": "git", 8 | "url": "git+ssh://git@github.com/L-movingon/simple-todo-with-react-and.git" 9 | }, 10 | "keywords": [ 11 | "react", 12 | "todo", 13 | "redux" 14 | ], 15 | "author": "Jason Liao", 16 | "license": "ISC", 17 | "bugs": { 18 | "url": "https://github.com/L-movingon/simple-todo-with-react-and/issues" 19 | }, 20 | "dependencies": { 21 | "babel-core": "^5.8.25", 22 | "babel-loader": "^5.3.2", 23 | "classnames": "^2.1.3", 24 | "react": "^0.13.3", 25 | "react-redux": "^2.1.2", 26 | "redux": "^3.0.0", 27 | "todomvc-app-css": "^2.0.1", 28 | "webpack": "^1.12.2" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Day 1/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack", 3 | "version": "1.0.0", 4 | "description": "A ready to use simple webpack with react", 5 | "main": "src/index.js", 6 | "scripts": { 7 | "start": "webpack-dev-server --mode development --open", 8 | "build": "webpack --mode production", 9 | "test":"echo hello" 10 | }, 11 | "author": "pinglinh", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "babel-core": "^6.26.3", 15 | "babel-loader": "^7.1.5", 16 | "babel-preset-env": "^1.7.0", 17 | "babel-preset-react": "^6.24.1", 18 | "css-loader": "^1.0.0", 19 | "html-webpack-plugin": "^3.2.0", 20 | "style-loader": "^0.23.0", 21 | "webpack": "^4.19.1", 22 | "webpack-cli": "^3.1.1", 23 | "webpack-dev-server": "^3.1.8" 24 | }, 25 | "dependencies": { 26 | "react": "^16.5.2", 27 | "react-dom": "^16.5.2" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hacker-news-clone", 3 | "version": "0.1.0", 4 | "private": true, 5 | "homepage": ".", 6 | "author": "Nenad Vracar", 7 | "description": "Hacker news website clone with React.", 8 | "dependencies": { 9 | "axios": "^0.18.0", 10 | "moment": "^2.24.0", 11 | "node-sass": "^4.11.0", 12 | "react": "^16.8.2", 13 | "react-dom": "^16.8.2", 14 | "react-router-dom": "^4.3.1", 15 | "react-scripts": "2.1.5" 16 | }, 17 | "scripts": { 18 | "start": "react-scripts start", 19 | "build": "react-scripts build", 20 | "test": "react-scripts test", 21 | "eject": "react-scripts eject" 22 | }, 23 | "eslintConfig": { 24 | "extends": "react-app" 25 | }, 26 | "browserslist": [ 27 | ">0.2%", 28 | "not dead", 29 | "not ie <= 11", 30 | "not op_mini all" 31 | ] 32 | } 33 | -------------------------------------------------------------------------------- /Day 4.3 Hacker Clone App/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Switch, Route } from 'react-router-dom'; 3 | 4 | import Navbar from 'components/navbar'; 5 | import Home from 'pages/home'; 6 | import Item from 'pages/item'; 7 | import User from 'pages/user'; 8 | import NotFound from 'pages/404'; 9 | 10 | 11 | class App extends Component { 12 | render() { 13 | return ( 14 |
    15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
    25 | ); 26 | } 27 | } 28 | 29 | export default App; -------------------------------------------------------------------------------- /Day 6 Charts/src/heatMapCharts/changeHeatMapData.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | /* eslint react/no-find-dom-node:0 */ 3 | /* react/forbid-prop-types:0 */ 4 | class changeHeatMapData extends React.Component { 5 | 6 | render() { 7 | return ( 8 |
    9 |

    Predicted Number of Household destroyed

    10 |
      11 |
    • p1
      • > 100 Houses 12 |
    • p2
      • > 200 Houses 13 |
    • p3
      • > 300 Houses 14 |
    • p4
      • > 500 Houses 15 |
    • p5
      • > 1000 Houses 16 |
    17 |
    18 | ); 19 | } 20 | } 21 | 22 | export default changeHeatMapData; 23 | 24 | -------------------------------------------------------------------------------- /Day 6 Charts/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 10 | 11 | 15 | 16 | 17 | 18 | React App 19 | 20 | 21 | 22 | 23 |
    24 | 25 | 26 | -------------------------------------------------------------------------------- /Day 13 Next JS/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "nextjs-shop", 3 | "version": "1.0.0", 4 | "description": "", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1", 8 | "dev": "next", 9 | "build": "next build", 10 | "start": "next start -p 3000" 11 | }, 12 | "keywords": [], 13 | "author": "", 14 | "license": "ISC", 15 | "dependencies": { 16 | "@types/next": "^9.0.0", 17 | "@types/react": "^16.9.17", 18 | "@types/react-dom": "^16.9.4", 19 | "@zeit/next-sass": "^1.0.1", 20 | "@zeit/next-typescript": "^1.1.1", 21 | "dotenv": "^8.2.0", 22 | "next": "^9.1.7", 23 | "node-sass": "^4.13.0", 24 | "react": "^16.12.0", 25 | "react-dom": "^16.12.0", 26 | "uuid": "^3.4.0" 27 | }, 28 | "devDependencies": { 29 | "@types/node": "^13.1.4", 30 | "typescript": "^3.7.4" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Day 3.2 Flicker App/src/services/flicker-service.js: -------------------------------------------------------------------------------- 1 | const apiKey = 'e38f1bc56d9486ca37e84667b7a98ba8'; 2 | const flickerApi = 'https://api.flickr.com/services/rest'; 3 | 4 | const format = (img) => { 5 | return { 6 | id: img['id'], 7 | url: `//farm${img.farm}.staticflickr.com/${img.server}/${img.id}_${img.secret}.jpg` 8 | } 9 | }; 10 | 11 | export const flickerSearch = (term) => { 12 | 13 | const apiUrl = flickerApi 14 | + `?method=flickr.photos.search&sort=relevance&format=json&nojsoncallback=1&` 15 | + `api_key=${apiKey}&text=${term}`; 16 | 17 | return fetch(apiUrl) 18 | .then(res => res.json()) 19 | .then(data => { 20 | return data.photos.photo.map((img) => format(img)); 21 | }) 22 | .catch((err) => { 23 | console.log('error: ', err); 24 | return err; 25 | }); 26 | }; 27 | -------------------------------------------------------------------------------- /Day 13 Next JS/components/interface.tsx: -------------------------------------------------------------------------------- 1 | import { withRouter, Router } from 'next/router'; 2 | 3 | export interface IProduct { 4 | id: string 5 | title: string 6 | url: string 7 | description: string 8 | images: IImage 9 | itemId: string, 10 | top_reviews: ITopReviews, 11 | list_price: IPrice, 12 | offer_price: IPrice, 13 | } 14 | interface IImage { 15 | base_url?: string, 16 | primary?: string 17 | } 18 | interface IPrice { 19 | price?: number, 20 | min_price?: number, 21 | max_price?: number, 22 | formatted_price?: number, 23 | price_type: string 24 | } 25 | interface ITopReviews { 26 | user_nickname: string, 27 | title: string, 28 | rating: number, 29 | rating_range: number, 30 | review_text: string, 31 | last_moderated_time: string 32 | } 33 | 34 | export interface IProductProps { 35 | product: IProduct 36 | router: Router 37 | index?: number 38 | } -------------------------------------------------------------------------------- /Day 5 Github Battle/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Globe App 9 | 10 | 11 | 12 | 13 | 14 | 15 |
    16 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /Day 14 Lazy Load/src/App.js: -------------------------------------------------------------------------------- 1 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 2 | import React, { Suspense, lazy } from "react"; 3 | import "./App.css"; 4 | 5 | import Header from "./Header"; 6 | import SuspenseFallback from "./SuspenseFallback"; 7 | 8 | const Home = lazy(() => import("./Home")); 9 | const AnotherHome = lazy(() => import("./AnotherHome")); 10 | 11 | function App() { 12 | return ( 13 |
    14 | 15 |
    16 | 17 |
    18 | }> 19 | 20 | 21 | 22 | 23 | 24 |
    25 | 26 |
    27 | ); 28 | } 29 | 30 | export default App; 31 | -------------------------------------------------------------------------------- /Day 5 Github Battle/scripts/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Do this as the first thing so that any code reading it knows the right env. 4 | process.env.BABEL_ENV = 'test'; 5 | process.env.NODE_ENV = 'test'; 6 | process.env.PUBLIC_URL = ''; 7 | 8 | // Makes the script crash on unhandled rejections instead of silently 9 | // ignoring them. In the future, promise rejections that are not handled will 10 | // terminate the Node.js process with a non-zero exit code. 11 | process.on('unhandledRejection', err => { 12 | throw err; 13 | }); 14 | 15 | // Ensure environment variables are read. 16 | require('../config/env'); 17 | 18 | const jest = require('jest'); 19 | const argv = process.argv.slice(2); 20 | 21 | // Watch unless on CI or in coverage mode 22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) { 23 | argv.push('--watch'); 24 | } 25 | 26 | 27 | jest.run(argv); 28 | -------------------------------------------------------------------------------- /Day 7 YouTube App/scripts/test.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // Do this as the first thing so that any code reading it knows the right env. 4 | process.env.BABEL_ENV = 'test'; 5 | process.env.NODE_ENV = 'test'; 6 | process.env.PUBLIC_URL = ''; 7 | 8 | // Makes the script crash on unhandled rejections instead of silently 9 | // ignoring them. In the future, promise rejections that are not handled will 10 | // terminate the Node.js process with a non-zero exit code. 11 | process.on('unhandledRejection', err => { 12 | throw err; 13 | }); 14 | 15 | // Ensure environment variables are read. 16 | require('../config/env'); 17 | 18 | const jest = require('jest'); 19 | const argv = process.argv.slice(2); 20 | 21 | // Watch unless on CI or in coverage mode 22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) { 23 | argv.push('--watch'); 24 | } 25 | 26 | 27 | jest.run(argv); 28 | -------------------------------------------------------------------------------- /Day 10 Redux/src/modules/reducer.js: -------------------------------------------------------------------------------- 1 | import ACTIONS from "./action"; 2 | import _ from "lodash"; 3 | 4 | const defaultState = { 5 | items: [] 6 | }; 7 | 8 | const todoReducer = (state = defaultState, action) => { 9 | switch (action.type) { 10 | case ACTIONS.Types.CREATE_ITEM: { 11 | console.log(action); 12 | 13 | let item = action.payload; 14 | let newItem = { id: state.items.length + 1, description: item }; 15 | let newState = _.cloneDeep(state); 16 | newState.items.push(newItem); 17 | return newState; 18 | } 19 | 20 | case ACTIONS.Types.DELETE_ITEM: { 21 | let newState = _.cloneDeep(state); 22 | let index = _.findIndex(newState.items, { id: action.payload }); 23 | newState.items.splice(index, 1); 24 | return newState; 25 | } 26 | 27 | default: 28 | return state; 29 | } 30 | }; 31 | 32 | export default todoReducer; 33 | -------------------------------------------------------------------------------- /Day 2/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "hello-world", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.5.0", 8 | "@testing-library/user-event": "^7.2.1", 9 | "react": "^16.13.1", 10 | "react-dom": "^16.13.1", 11 | "react-scripts": "3.4.1" 12 | }, 13 | "scripts": { 14 | "start": "react-scripts start", 15 | "build": "react-scripts build", 16 | "test": "react-scripts test", 17 | "eject": "react-scripts eject" 18 | }, 19 | "eslintConfig": { 20 | "extends": "react-app" 21 | }, 22 | "browserslist": { 23 | "production": [ 24 | ">0.2%", 25 | "not dead", 26 | "not op_mini all" 27 | ], 28 | "development": [ 29 | "last 1 chrome version", 30 | "last 1 firefox version", 31 | "last 1 safari version" 32 | ] 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /Day 7 YouTube App/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | Online Training and Youtube Videos 9 | 10 | Group Me 11 |