├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── favicon.png └── index.html └── src ├── App.css ├── App.js ├── images └── city.jpg └── index.js /.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Introduction 2 | This is a code repository for the corresponding video tutorial. 3 | 4 | In this video, we will create an interesting react project from scratch - A React Advice App. We're going to use React on the front end and we'll make get requests to Advice Slip JSON API. 5 | 6 | By the end of this video, you will have a strong understanding of basic React workflow as well as how to make get requests in React Apps. 7 | 8 | Setup: 9 | - run ```npm i && npm start``` 10 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "advice_app", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^4.2.4", 7 | "@testing-library/react": "^9.4.1", 8 | "@testing-library/user-event": "^7.2.1", 9 | "axios": "^0.19.2", 10 | "react": "^16.12.0", 11 | "react-dom": "^16.12.0", 12 | "react-scripts": "3.4.0" 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 | "production": [ 25 | ">0.2%", 26 | "not dead", 27 | "not op_mini all" 28 | ], 29 | "development": [ 30 | "last 1 chrome version", 31 | "last 1 firefox version", 32 | "last 1 safari version" 33 | ] 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrianhajdin/advice_app/1f1086fc0b3a8e52535786d29cc04e9fb2ccc0b7/public/favicon.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Advice App 10 | 11 | 12 | 13 |

14 | 15 | 16 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #root, html, body { 2 | margin: 0; 3 | padding: 0; 4 | height: 100vh; 5 | box-sizing: border-box; 6 | } 7 | 8 | .app { 9 | height: 100%; 10 | background: linear-gradient( rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3) ), url('./images/city.jpg'); 11 | background-size: cover; 12 | background-position: center; 13 | display: flex; 14 | justify-content: center; 15 | align-items: center; 16 | text-align: center; 17 | } 18 | 19 | .card { 20 | background: whitesmoke; 21 | width: 40%; 22 | height: 20%; 23 | display: flex; 24 | align-items: center; 25 | flex-direction: column; 26 | border-radius: 25px; 27 | padding: 2%; 28 | box-shadow: 10px 10px; 29 | } 30 | 31 | .heading { 32 | display: flex; 33 | align-items: center; 34 | height: 582px; 35 | } 36 | 37 | .button { 38 | position: relative; 39 | outline: none; 40 | text-decoration: none; 41 | border-radius: 50px; 42 | display: flex; 43 | justify-content: center; 44 | align-items: center; 45 | cursor: pointer; 46 | text-transform: uppercase; 47 | height: 200px; 48 | width: 210px; 49 | opacity: 1; 50 | background-color: #ffffff; 51 | border: 1px solid rgba(22, 76, 167, 0.6); 52 | } 53 | 54 | .button span { 55 | color: #164ca7; 56 | font-size: 12px; 57 | font-weight: 500; 58 | letter-spacing: 0.7px; 59 | } 60 | 61 | .button:hover { 62 | animation: rotate 0.7s ease-in-out both; 63 | } 64 | 65 | .button:hover span { 66 | animation: storm 0.7s ease-in-out both; 67 | animation-delay: 0.06s; 68 | } 69 | 70 | @keyframes rotate { 71 | 0% { 72 | transform: rotate(0deg) translate3d(0, 0, 0); 73 | } 74 | 25% { 75 | transform: rotate(3deg) translate3d(0, 0, 0); 76 | } 77 | 50% { 78 | transform: rotate(-3deg) translate3d(0, 0, 0); 79 | } 80 | 75% { 81 | transform: rotate(1deg) translate3d(0, 0, 0); 82 | } 83 | 100% { 84 | transform: rotate(0deg) translate3d(0, 0, 0); 85 | } 86 | } 87 | 88 | @keyframes storm { 89 | 0% { 90 | transform: translate3d(0, 0, 0) translateZ(0); 91 | } 92 | 25% { 93 | transform: translate3d(4px, 0, 0) translateZ(0); 94 | } 95 | 50% { 96 | transform: translate3d(-3px, 0, 0) translateZ(0); 97 | } 98 | 75% { 99 | transform: translate3d(2px, 0, 0) translateZ(0); 100 | } 101 | 100% { 102 | transform: translate3d(0, 0, 0) translateZ(0); 103 | } 104 | } 105 | 106 | @media only screen and (max-width: 600px) { 107 | .card { 108 | width: 80%; 109 | height: 30%; 110 | } 111 | } -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import axios from 'axios'; 3 | 4 | import './App.css'; 5 | 6 | class App extends React.Component { 7 | state = { 8 | advice: '', 9 | } 10 | 11 | componentDidMount() { 12 | this.fetchAdvice(); 13 | } 14 | 15 | fetchAdvice = () => { 16 | axios.get('https://api.adviceslip.com/advice') 17 | .then((response) => { 18 | const { advice } = response.data.slip; 19 | 20 | this.setState({ advice }); 21 | }) 22 | .catch((error) => { 23 | console.log(error); 24 | }); 25 | } 26 | 27 | render() { 28 | return ( 29 |

30 |

31 |

{this.state.advice}

32 | 35 |

36 |

37 | ); 38 | } 39 | } 40 | 41 | export default App; -------------------------------------------------------------------------------- /src/images/city.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/adrianhajdin/advice_app/1f1086fc0b3a8e52535786d29cc04e9fb2ccc0b7/src/images/city.jpg -------------------------------------------------------------------------------- /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 | --------------------------------------------------------------------------------