├── Code ├── 10th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.js │ │ ├── components │ │ │ ├── PureComponent.js │ │ │ ├── StatefullComponent.js │ │ │ └── StatelessComponent.js │ │ └── index.js │ └── yarn.lock ├── 11th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.js │ │ ├── components │ │ │ └── Post.js │ │ ├── data │ │ │ └── posts.js │ │ ├── index.js │ │ └── style │ │ │ └── Post.css │ └── yarn.lock ├── 12th_challenge │ ├── challenge.js │ ├── index.html │ └── solution.js ├── 13th_challenge │ ├── index.html │ └── solution.js ├── 14th_challenge │ ├── .env │ ├── .env.example │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── assets │ │ │ └── bg.gif │ │ ├── classes │ │ │ └── Task.js │ │ ├── components │ │ │ ├── AddTask.js │ │ │ ├── Header.js │ │ │ ├── TaskComponent.js │ │ │ └── Tasks.js │ │ ├── helpers │ │ │ └── Helper.js │ │ ├── index.js │ │ └── services │ │ │ └── task.service.js │ └── yarn.lock ├── 15th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.css │ │ ├── App.js │ │ ├── components │ │ │ ├── Entry.js │ │ │ ├── Post.js │ │ │ └── Posts.js │ │ ├── index.js │ │ ├── layouts │ │ │ └── Nav.js │ │ └── pages │ │ │ └── NotFound.js │ └── yarn.lock ├── 16th_challenge │ ├── app.js │ └── index.html ├── 17th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── components │ │ │ ├── Post.js │ │ │ └── User.js │ │ ├── containers │ │ │ ├── App.js │ │ │ └── Root.js │ │ ├── data │ │ │ └── data.js │ │ ├── index.css │ │ ├── index.js │ │ ├── layouts │ │ │ └── Nav.js │ │ ├── pages │ │ │ ├── Home.js │ │ │ ├── NotFound.js │ │ │ ├── Posts.js │ │ │ ├── Users.js │ │ │ └── index.js │ │ └── redux │ │ │ ├── actionCreators.js │ │ │ ├── configureStore.js │ │ │ ├── postReducer.js │ │ │ ├── rootReducer.js │ │ │ ├── types.js │ │ │ └── userReducer.js │ └── yarn.lock ├── 18th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── containers │ │ │ ├── App.js │ │ │ └── Root.js │ │ ├── index.js │ │ ├── pages │ │ │ └── Home.js │ │ └── redux │ │ │ ├── actionCreators.js │ │ │ ├── apiMiddleware.js │ │ │ ├── configureStore.js │ │ │ ├── currentTime.js │ │ │ ├── rootReducer.js │ │ │ ├── testMiddleware.js │ │ │ └── types.js │ └── yarn.lock ├── 19th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── components │ │ │ └── App │ │ │ │ ├── App.js │ │ │ │ └── index.js │ │ ├── index.js │ │ ├── registerServiceWorker.js │ │ └── styles │ │ │ ├── global.js │ │ │ └── palette.js │ └── yarn.lock ├── 1st_challenge │ ├── challenge.js │ └── solution.js ├── 20th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── components │ │ │ └── App │ │ │ │ ├── App.js │ │ │ │ └── index.js │ │ ├── index.js │ │ ├── registerServiceWorker.js │ │ ├── store │ │ │ ├── app │ │ │ │ ├── actions.js │ │ │ │ └── reducer.js │ │ │ ├── index.js │ │ │ ├── middleware.js │ │ │ ├── reducer.js │ │ │ └── utils │ │ │ │ └── index.js │ │ └── styles │ │ │ ├── global.js │ │ │ └── palette.js │ └── yarn.lock ├── 21th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── components │ │ │ ├── App │ │ │ │ ├── App.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Home │ │ │ │ ├── Home.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── List │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ListItem │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Login │ │ │ │ ├── Login.js │ │ │ │ └── index.js │ │ │ ├── Nav │ │ │ │ ├── Nav.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── News │ │ │ │ ├── News.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── index.js │ │ ├── registerServiceWorker.js │ │ ├── store │ │ │ ├── app │ │ │ │ ├── actions.js │ │ │ │ └── reducer.js │ │ │ ├── index.js │ │ │ ├── middleware.js │ │ │ ├── reducer.js │ │ │ └── utils │ │ │ │ └── index.js │ │ ├── styles │ │ │ ├── global.js │ │ │ └── palette.js │ │ └── utils │ │ │ └── index.js │ └── yarn.lock ├── 22th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── App │ │ │ │ ├── App.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Home │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── List │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ListItem │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Login │ │ │ │ ├── Login.js │ │ │ │ ├── SignInWidget.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Nav │ │ │ │ ├── Nav.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── News │ │ │ │ ├── News.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── index.js │ │ ├── registerServiceWorker.js │ │ ├── store │ │ │ ├── app │ │ │ │ ├── actions.js │ │ │ │ └── reducer.js │ │ │ ├── index.js │ │ │ ├── middleware.js │ │ │ ├── reducer.js │ │ │ └── utils │ │ │ │ └── index.js │ │ ├── styles │ │ │ ├── global.js │ │ │ └── palette.js │ │ └── utils │ │ │ └── index.js │ └── yarn.lock ├── 23th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── App │ │ │ │ ├── App.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Home │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── List │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ListItem │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Login │ │ │ │ ├── Login.js │ │ │ │ ├── SignInWidget.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Nav │ │ │ │ ├── Nav.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── News │ │ │ │ ├── News.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── index.js │ │ ├── registerServiceWorker.js │ │ ├── services │ │ │ ├── Api.js │ │ │ └── hackerNewsApi.js │ │ ├── store │ │ │ ├── app │ │ │ │ ├── actions.js │ │ │ │ └── reducer.js │ │ │ ├── index.js │ │ │ ├── middleware.js │ │ │ ├── reducer.js │ │ │ └── utils │ │ │ │ └── index.js │ │ ├── styles │ │ │ ├── global.js │ │ │ └── palette.js │ │ └── utils │ │ │ └── index.js │ └── yarn.lock ├── 24th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── App │ │ │ │ ├── App.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Home │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── List │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ListItem │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Login │ │ │ │ ├── Login.js │ │ │ │ ├── SignInWidget.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Nav │ │ │ │ ├── Nav.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── News │ │ │ │ ├── News.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── index.js │ │ ├── registerServiceWorker.js │ │ ├── services │ │ │ ├── Api.js │ │ │ └── hackerNewsApi.js │ │ ├── store │ │ │ ├── app │ │ │ │ ├── actions.js │ │ │ │ └── reducer.js │ │ │ ├── index.js │ │ │ ├── middleware.js │ │ │ ├── reducer.js │ │ │ ├── story │ │ │ │ ├── actions.js │ │ │ │ └── reducer.js │ │ │ └── utils │ │ │ │ └── index.js │ │ ├── styles │ │ │ ├── global.js │ │ │ └── palette.js │ │ └── utils │ │ │ └── index.js │ └── yarn.lock ├── 25th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── App │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Home │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── List │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ListItem │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Login │ │ │ │ ├── Login.js │ │ │ │ ├── SignInWidget.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Nav │ │ │ │ ├── Nav.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── News │ │ │ │ ├── News.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── index.js │ │ ├── registerServiceWorker.js │ │ ├── services │ │ │ ├── Api.js │ │ │ └── hackerNewsApi.js │ │ ├── store │ │ │ ├── app │ │ │ │ ├── actions.js │ │ │ │ └── reducer.js │ │ │ ├── index.js │ │ │ ├── middleware.js │ │ │ ├── reducer.js │ │ │ ├── story │ │ │ │ ├── actions.js │ │ │ │ └── reducer.js │ │ │ └── utils │ │ │ │ └── index.js │ │ ├── styles │ │ │ ├── global.js │ │ │ └── palette.js │ │ └── utils │ │ │ └── index.js │ └── yarn.lock ├── 26th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── index.html │ │ └── manifest.json │ ├── src │ │ ├── assets │ │ │ └── logo.png │ │ ├── components │ │ │ ├── App │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Home │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── List │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── ListItem │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Login │ │ │ │ ├── Login.js │ │ │ │ ├── SignInWidget.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ ├── Nav │ │ │ │ ├── Nav.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ │ └── News │ │ │ │ ├── News.js │ │ │ │ ├── index.js │ │ │ │ └── styles.js │ │ ├── index.js │ │ ├── registerServiceWorker.js │ │ ├── services │ │ │ ├── Api.js │ │ │ └── hackerNewsApi.js │ │ ├── store │ │ │ ├── app │ │ │ │ ├── actions.js │ │ │ │ └── reducer.js │ │ │ ├── index.js │ │ │ ├── middleware.js │ │ │ ├── reducer.js │ │ │ ├── story │ │ │ │ ├── actions.js │ │ │ │ ├── reducer.js │ │ │ │ └── selectors.js │ │ │ └── utils │ │ │ │ └── index.js │ │ ├── styles │ │ │ ├── global.js │ │ │ └── palette.js │ │ └── utils │ │ │ └── index.js │ └── yarn.lock ├── 27th_challenge │ ├── challenge.js │ ├── index.html │ └── solution.js ├── 28th_challenge │ ├── .env │ ├── .gitignore │ ├── README.md │ ├── package.json │ ├── public │ │ └── index.html │ ├── src │ │ ├── App.js │ │ ├── User.js │ │ ├── Users.js │ │ ├── index.js │ │ └── useStorage.js │ └── yarn.lock ├── 2nd_challenge │ ├── index.html │ └── solution.js ├── 3rd_challenge │ ├── challenge.js │ ├── index.html │ └── solution.js ├── 4th_challenge │ ├── index.html │ └── solution.js ├── 5th_challenge │ ├── index.html │ └── solution.js ├── 6th_challenge │ ├── index.html │ └── solution.js ├── 7th_challenge │ ├── challenge.js │ ├── index.html │ └── solution.js ├── 8th_challenge │ ├── challenge.js │ ├── index.html │ └── solution.js └── 9th_challenge │ ├── challenge.js │ ├── index.html │ └── solution.js ├── README.md ├── img ├── flux-diagram.png └── thanks.jpg ├── log.md └── rules.md /Code/10th_challenge/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | -------------------------------------------------------------------------------- /Code/10th_challenge/.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 | -------------------------------------------------------------------------------- /Code/10th_challenge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "10th_challenge", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.3", 7 | "react-dom": "^16.8.3", 8 | "react-scripts": "2.1.5" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /Code/10th_challenge/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Pure Components 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /Code/10th_challenge/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import PureComp from './components/PureComponent' 4 | import StatefullComponent from './components/StatefullComponent' 5 | import StatelessComponent from './components/StatelessComponent' 6 | 7 | class App extends Component { 8 | 9 | state = { 10 | date: '' 11 | } 12 | 13 | componentWillMount = () => { 14 | this.timerID = setInterval(this.tick, 1000); 15 | } 16 | 17 | componentWillUnmount = () => { 18 | clearInterval(this.timerID); 19 | } 20 | 21 | tick = () => { 22 | const date = new Date().toLocaleTimeString(); 23 | this.setState({date}); 24 | } 25 | 26 | render() { 27 | 28 | const {date} = this.state; 29 | 30 | return ( 31 |
32 | 33 | 34 | 35 |

{date}

36 |
37 | ); 38 | } 39 | } 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /Code/10th_challenge/src/components/PureComponent.js: -------------------------------------------------------------------------------- 1 | import React, { PureComponent } from 'react'; 2 | 3 | class PureComp extends PureComponent { 4 | 5 | render() { 6 | 7 | console.log('Pure Component is re rendered') 8 | 9 | return ( 10 |

PureComponent

11 | ); 12 | } 13 | } 14 | 15 | export default PureComp; -------------------------------------------------------------------------------- /Code/10th_challenge/src/components/StatefullComponent.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class StatefullComponent extends Component { 4 | 5 | render() { 6 | 7 | console.log('Statefull Component is re rendered') 8 | 9 | return ( 10 |

StatefullComponent

11 | ); 12 | } 13 | } 14 | 15 | export default StatefullComponent; -------------------------------------------------------------------------------- /Code/10th_challenge/src/components/StatelessComponent.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const StatelessComponent = () => { 4 | 5 | console.log('Stateless Component is re rendered') 6 | 7 | return ( 8 |

StatelessComponent

9 | ); 10 | 11 | } 12 | 13 | export default StatelessComponent; -------------------------------------------------------------------------------- /Code/10th_challenge/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /Code/11th_challenge/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | -------------------------------------------------------------------------------- /Code/11th_challenge/.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 | -------------------------------------------------------------------------------- /Code/11th_challenge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "10th_challenge", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.3", 7 | "react-dom": "^16.8.3", 8 | "react-scripts": "2.1.5" 9 | }, 10 | "scripts": { 11 | "start": "react-scripts start", 12 | "build": "react-scripts build", 13 | "test": "react-scripts test", 14 | "eject": "react-scripts eject" 15 | }, 16 | "eslintConfig": { 17 | "extends": "react-app" 18 | }, 19 | "browserslist": [ 20 | ">0.2%", 21 | "not dead", 22 | "not ie <= 11", 23 | "not op_mini all" 24 | ] 25 | } 26 | -------------------------------------------------------------------------------- /Code/11th_challenge/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Lists, Keys and Conditional Rendering 6 | 7 | 8 | 9 |
10 | 11 | 12 | -------------------------------------------------------------------------------- /Code/11th_challenge/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import Post from './components/Post' 4 | 5 | import './style/Post.css'; 6 | 7 | import posts from './data/posts' 8 | 9 | class App extends Component { 10 | 11 | constructor(props){ 12 | super(props); 13 | 14 | this.state = { 15 | posts, 16 | } 17 | } 18 | 19 | asc = () => { 20 | let {posts} = this.state; 21 | 22 | posts.sort((a, b) => { 23 | if(a.title > b.title) 24 | return 1; 25 | 26 | if(a.title < b.title) 27 | return -1; 28 | 29 | return 0; 30 | }); 31 | 32 | this.setState({posts}); 33 | } 34 | 35 | desc = () => { 36 | let {posts} = this.state; 37 | 38 | posts.sort((a, b) => { 39 | if(a.title < b.title) 40 | return 1; 41 | 42 | if(a.title > b.title) 43 | return -1; 44 | 45 | return 0; 46 | }); 47 | 48 | this.setState({posts}); 49 | } 50 | 51 | render() { 52 | 53 | const {posts} = this.state; 54 | 55 | return ( 56 |
57 | { 58 | posts.map(post => ) 59 | } 60 | 61 | 62 | 63 |
64 | ); 65 | } 66 | } 67 | 68 | export default App; 69 | -------------------------------------------------------------------------------- /Code/11th_challenge/src/components/Post.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | class Post extends Component { 4 | 5 | constructor(props){ 6 | super(props); 7 | 8 | this.state = { 9 | active: false, 10 | } 11 | } 12 | 13 | toggleBody = () => { 14 | this.setState((state) => ({ 15 | active: !state.active 16 | })); 17 | } 18 | 19 | render() { 20 | 21 | const {post} = this.props; 22 | const {active} = this.state; 23 | 24 | return( 25 |
26 |

{post.title}

29 | {active && 30 |

{post.body}

31 | } 32 |
33 | ); 34 | } 35 | } 36 | 37 | export default Post; -------------------------------------------------------------------------------- /Code/11th_challenge/src/data/posts.js: -------------------------------------------------------------------------------- 1 | const posts = [{"id": 1,"title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit","body": "quia et suscipit suscipit recusandae consequuntur expedita et cum reprehenderit molestiae ut ut quas totam nostrum rerum est autem sunt rem eveniet architecto"},{"id": 2,"title": "qui est esse","body": "est rerum tempore vitae sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut reiciendis qui aperiam non debitis possimus qui neque nisi nulla"},{"id": 3,"title": "ea molestias quasi exercitationem repellat qui ipsa sit aut","body": "et iusto sed quo iure voluptatem occaecati omnis eligendi aut ad voluptatem doloribus vel accusantium quis pariatur molestiae porro eius odio et labore et velit aut"},{"id": 4,"title": "eum et est occaecati","body": "ullam et saepe reiciendis voluptatem adipisci sit amet autem assumenda provident rerum culpa quis hic commodi nesciunt rem tenetur doloremque ipsam iure quis sunt voluptatem rerum illo velit"},{"id": 5,"title": "nesciunt quas odio","body": "repudiandae veniam quaerat sunt sed alias aut fugiat sit autem sed est voluptatem omnis possimus esse voluptatibus quis est aut tenetur dolor neque"}]; 2 | 3 | export default posts; -------------------------------------------------------------------------------- /Code/11th_challenge/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /Code/11th_challenge/src/style/Post.css: -------------------------------------------------------------------------------- 1 | .active { 2 | border-radius: 5px 5px 0 0 !important; 3 | margin: 0 !important; 4 | } 5 | 6 | .active::before { 7 | border-bottom: 5px solid #fff !important; 8 | border-top: 5px solid transparent !important; 9 | bottom: 10px !important; 10 | } 11 | 12 | .title { 13 | position: relative; 14 | background: #607D8B; 15 | text-align: center; 16 | padding: 5px; 17 | border-radius: 5px; 18 | margin: 0 0 10px 0; 19 | cursor: pointer; 20 | } 21 | 22 | .title::before { 23 | content: ''; 24 | position: absolute; 25 | bottom: 5px; 26 | right: 10px; 27 | width: 0px; 28 | height: 0px; 29 | border-left: 5px solid transparent; 30 | border-right: 5px solid transparent; 31 | border-top: 5px solid #fff; 32 | border-bottom: 5px solid transparent; 33 | } 34 | 35 | .body { 36 | background: #607d8bb0; 37 | padding: 10px; 38 | border-radius: 0 0 5px 5px; 39 | margin: 0 0 5px 0; 40 | } -------------------------------------------------------------------------------- /Code/13th_challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Remote Data 8 | 9 | 33 | 34 | 35 | 36 | 37 |
38 | 39 | 40 | 41 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /Code/14th_challenge/.env: -------------------------------------------------------------------------------- 1 | REACT_APP_API_URL=https://jsonplaceholder.typicode.com 2 | 3 | SKIP_PREFLIGHT_CHECK=true 4 | -------------------------------------------------------------------------------- /Code/14th_challenge/.env.example: -------------------------------------------------------------------------------- 1 | REACT_APP_API_URL=https://jsonplaceholder.typicode.com 2 | -------------------------------------------------------------------------------- /Code/14th_challenge/.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 | -------------------------------------------------------------------------------- /Code/14th_challenge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "10th_challenge", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.3", 7 | "react-dom": "^16.8.3", 8 | "react-scripts": "2.1.5", 9 | "uniqid": "^5.0.3" 10 | }, 11 | "scripts": { 12 | "start": "react-scripts start", 13 | "build": "react-scripts build", 14 | "test": "react-scripts test", 15 | "eject": "react-scripts eject" 16 | }, 17 | "eslintConfig": { 18 | "extends": "react-app" 19 | }, 20 | "browserslist": [ 21 | ">0.2%", 22 | "not dead", 23 | "not ie <= 11", 24 | "not op_mini all" 25 | ], 26 | "devDependencies": { 27 | "dotenv": "^6.2.0" 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /Code/14th_challenge/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | TODO APP 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Code/14th_challenge/src/assets/bg.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/geeksblabla/30DaysOfReact/f0803958f820dd04e542258b7b25629dbb144196/Code/14th_challenge/src/assets/bg.gif -------------------------------------------------------------------------------- /Code/14th_challenge/src/classes/Task.js: -------------------------------------------------------------------------------- 1 | let uniqid = require('uniqid') 2 | 3 | class Task { 4 | 5 | constructor(description, completed = false, id = uniqid()) { 6 | this.id = id; 7 | this.description = description; 8 | this.created_at = new Date(); 9 | this.completed = completed; 10 | } 11 | } 12 | 13 | export default Task; -------------------------------------------------------------------------------- /Code/14th_challenge/src/components/Header.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const Header = () => { 4 | 5 | const date = new Date(); 6 | 7 | return ( 8 |
9 |
10 |

Hola

11 |

{ 12 | date.toDateString() 13 | }

14 |
15 |
16 | ); 17 | } 18 | 19 | export default Header; -------------------------------------------------------------------------------- /Code/14th_challenge/src/components/Tasks.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import TaskComponent from './TaskComponent' 4 | 5 | const Tasks = (props) => { 6 | 7 | const {tasks, deleteTask, editTask, toggleTask, alert} = props; 8 | 9 | return ( 10 |
11 | {!tasks.length ? 12 |

There is no tasks

13 | : 14 | tasks.map(task => { 15 | return 22 | }) 23 | } 24 |
25 | ); 26 | } 27 | 28 | export default Tasks; -------------------------------------------------------------------------------- /Code/14th_challenge/src/helpers/Helper.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Generate the header 3 | * This will help better in case we have additional parameters for the header 4 | * i.e Authorization in the authentication case. 5 | */ 6 | export function Header() { 7 | 8 | const header = { 9 | 'Content-Type': 'application/json; charset=UTF-8', 10 | }; 11 | 12 | return header; 13 | } 14 | 15 | /** 16 | * @param response 17 | * handle the response of each request 18 | * return either the data or fire a reject 19 | */ 20 | export function handleResponse(response) { 21 | 22 | return response.json().then(data => { 23 | 24 | if (!response.ok) { 25 | 26 | const { status } = response; 27 | const error = response.status === 404 ? 'Not Found' : 'There is an error'; 28 | 29 | return Promise.reject({status, error}); 30 | } 31 | 32 | return data; 33 | 34 | }); 35 | } -------------------------------------------------------------------------------- /Code/14th_challenge/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /Code/15th_challenge/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | -------------------------------------------------------------------------------- /Code/15th_challenge/.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 | -------------------------------------------------------------------------------- /Code/15th_challenge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "10th_challenge", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.3", 7 | "react-dom": "^16.8.3", 8 | "react-router-dom": "^4.3.1", 9 | "react-scripts": "2.1.5", 10 | "uniqid": "^5.0.3" 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 | "devDependencies": { 28 | "dotenv": "^6.2.0" 29 | } 30 | } 31 | -------------------------------------------------------------------------------- /Code/15th_challenge/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | React Router 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Code/15th_challenge/src/App.css: -------------------------------------------------------------------------------- 1 | * {margin: 0;padding: 0} 2 | 3 | .not-found { 4 | position: absolute; 5 | background: #fff; 6 | color: #607c8a; 7 | height: 100%; 8 | width: 100%; 9 | top: auto; 10 | display: grid; 11 | justify-content: center; 12 | align-items: center; 13 | animation: animate 1s infinite alternate; 14 | } 15 | 16 | @keyframes animate { 17 | from {color: #607c8a;} 18 | to {color: #f44336} 19 | } 20 | 21 | nav { 22 | background-color: #607D8B; 23 | padding: 10px; 24 | } 25 | 26 | nav > ul > li { 27 | list-style: none; 28 | display: inline; 29 | } 30 | 31 | nav > ul > li > a { 32 | padding: 10px; 33 | color: white; 34 | text-decoration: none; 35 | } 36 | 37 | nav > ul > li > .active { 38 | background: #fff; 39 | color: #607D8B; 40 | } 41 | 42 | .posts { 43 | display: flex; 44 | flex-direction: column; 45 | padding: 10px; 46 | } 47 | 48 | .entry { 49 | display: flex; 50 | flex-direction: column; 51 | padding: 5px; 52 | margin: 5px 0; 53 | box-shadow: 0px 1px 5px #eee; 54 | } 55 | 56 | .entry > a { 57 | align-self: flex-end; 58 | } 59 | 60 | .post { 61 | padding: 10px; 62 | display: flex; 63 | flex-direction: column; 64 | } 65 | 66 | .post > p { 67 | letter-spacing: 1px; 68 | padding: 5px 0; 69 | } -------------------------------------------------------------------------------- /Code/15th_challenge/src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; 3 | 4 | import Nav from './layouts/Nav'; 5 | import NotFound from './pages/NotFound'; 6 | import Post from './components/Post'; 7 | import Posts from './components/Posts'; 8 | 9 | import './App.css' 10 | 11 | class App extends Component { 12 | 13 | render() { 14 | 15 | return ( 16 | 17 |
18 |
27 | 28 | ); 29 | } 30 | } 31 | 32 | export default App; -------------------------------------------------------------------------------- /Code/15th_challenge/src/components/Entry.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { Link } from "react-router-dom"; 3 | 4 | const Entry = (props) => { 5 | 6 | const {id, title} = props; 7 | 8 | return ( 9 | 10 |
11 |

{title}

12 | Read more 13 |
14 | ); 15 | } 16 | 17 | export default Entry; -------------------------------------------------------------------------------- /Code/15th_challenge/src/components/Post.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { Route, Redirect } from "react-router-dom"; 3 | 4 | class Post extends Component { 5 | 6 | constructor(props) { 7 | super(props); 8 | 9 | this.state = { 10 | error: {}, 11 | loading: false, 12 | post: {}, 13 | } 14 | } 15 | 16 | componentDidMount() { 17 | 18 | this.setState({loading: true}); 19 | 20 | const {params: {postId}} = this.props.match; 21 | 22 | fetch(`https://jsonplaceholder.typicode.com/posts/${postId}`) 23 | .then(response => { 24 | 25 | if(!response.ok) { 26 | return Promise.reject(response.status); 27 | } 28 | 29 | return response.json(); 30 | }) 31 | .then(post => { 32 | this.setState({post, loading: false}); 33 | }).catch(status => { 34 | this.setState({error: {status}}); 35 | }); 36 | } 37 | 38 | render() { 39 | const {loading, post, error: {status}} = this.state; 40 | 41 | return ( 42 | 43 | 44 | {status ? 45 | } /> 46 | : 47 |
48 | {loading ? 49 |

Loading...

50 | : 51 | 52 |

{post.title}

53 |

{post.body}

54 | 55 | } 56 |
57 | } 58 | 59 | ); 60 | } 61 | } 62 | 63 | export default Post; -------------------------------------------------------------------------------- /Code/15th_challenge/src/components/Posts.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | 3 | import Entry from './Entry'; 4 | 5 | class Posts extends Component { 6 | 7 | constructor(props) { 8 | super(props); 9 | 10 | this.state = { 11 | loading: false, 12 | posts: [], 13 | } 14 | } 15 | 16 | componentDidMount() { 17 | 18 | this.setState({loading: true}); 19 | 20 | fetch('https://jsonplaceholder.typicode.com/posts') 21 | .then(response => response.json()) 22 | .then(posts => { 23 | this.setState({posts, loading: false}); 24 | }); 25 | } 26 | 27 | render() { 28 | const {loading, posts} = this.state; 29 | 30 | return ( 31 | 32 |
33 | {loading ? 34 |

Loading...

35 | : 36 | posts.map(post => ) 37 | } 38 |
39 | ); 40 | } 41 | 42 | } 43 | 44 | export default Posts; -------------------------------------------------------------------------------- /Code/15th_challenge/src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import App from './App'; 4 | 5 | ReactDOM.render(, document.getElementById('root')); 6 | -------------------------------------------------------------------------------- /Code/15th_challenge/src/layouts/Nav.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NavLink } from "react-router-dom"; 3 | 4 | 5 | const Nav = () => { 6 | 7 | return ( 8 | 18 | ); 19 | } 20 | 21 | export default Nav; -------------------------------------------------------------------------------- /Code/15th_challenge/src/pages/NotFound.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const NotFound = () => { 4 | 5 | return ( 6 |

Not Found

7 | ); 8 | } 9 | 10 | export default NotFound; -------------------------------------------------------------------------------- /Code/16th_challenge/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Redux Without React 8 | 9 | 10 | 11 |

12 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Code/17th_challenge/.env: -------------------------------------------------------------------------------- 1 | SKIP_PREFLIGHT_CHECK=true 2 | -------------------------------------------------------------------------------- /Code/17th_challenge/.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 | -------------------------------------------------------------------------------- /Code/17th_challenge/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "10th_challenge", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "react": "^16.8.3", 7 | "react-dom": "^16.8.3", 8 | "react-redux": "^6.0.1", 9 | "react-router-dom": "^4.3.1", 10 | "react-scripts": "2.1.5", 11 | "redux": "^4.0.1", 12 | "uniqid": "^5.0.3" 13 | }, 14 | "scripts": { 15 | "start": "react-scripts start", 16 | "build": "react-scripts build", 17 | "test": "react-scripts test", 18 | "eject": "react-scripts eject" 19 | }, 20 | "eslintConfig": { 21 | "extends": "react-app" 22 | }, 23 | "browserslist": [ 24 | ">0.2%", 25 | "not dead", 26 | "not ie <= 11", 27 | "not op_mini all" 28 | ], 29 | "devDependencies": { 30 | "dotenv": "^6.2.0" 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /Code/17th_challenge/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Redux for react 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | -------------------------------------------------------------------------------- /Code/17th_challenge/src/containers/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import {BrowserRouter as Router, Route, Switch} from 'react-router-dom'; 3 | 4 | import { Home, Users, Posts, NotFound } from '../pages'; 5 | import Nav from '../layouts/Nav'; 6 | 7 | const App = () => ( 8 | 9 | 10 |