├── .eslintrc.json ├── .gitignore ├── deploy.sh ├── index.html ├── package-lock.json ├── package.json ├── src ├── App.css ├── App.jsx ├── components │ ├── Character.jsx │ └── CharacterList.jsx ├── favicon.svg ├── index.css ├── logo.svg └── main.jsx └── vite.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "react-app" 3 | } -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /deploy.sh: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env sh 2 | 3 | # abort on errors 4 | set -e 5 | 6 | # build 7 | npm run build 8 | 9 | # navigate into the build output directory 10 | cd dist 11 | 12 | # if you are deploying to a custom domain 13 | # echo 'www.example.com' > CNAME 14 | 15 | git init 16 | git checkout -b main 17 | git add -A 18 | git commit -m 'deploy' 19 | 20 | # if you are deploying to https://.github.io 21 | # git push -f git@github.com:/.github.io.git main 22 | 23 | # if you are deploying to https://.github.io/ 24 | git push -f git@github.com:faztweb/react-rick-and-morty.git main:gh-pages 25 | 26 | cd - -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Vite App 8 | 9 | 10 | 11 | 12 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-rick-and-morty", 3 | "private": true, 4 | "version": "0.0.0", 5 | "scripts": { 6 | "dev": "vite", 7 | "build": "vite build", 8 | "preview": "vite preview" 9 | }, 10 | "dependencies": { 11 | "gh-pages": "^4.0.0", 12 | "react": "^18.0.0", 13 | "react-dom": "^18.0.0", 14 | "vite-plugin-eslint": "^1.6.1" 15 | }, 16 | "devDependencies": { 17 | "@types/react": "^18.0.0", 18 | "@types/react-dom": "^18.0.0", 19 | "@vitejs/plugin-react": "^1.3.0", 20 | "bootstrap": "^5.1.3", 21 | "eslint": "^8.18.0", 22 | "eslint-config-react-app": "^7.0.1", 23 | "vite": "^2.9.9" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | height: 40vmin; 7 | pointer-events: none; 8 | } 9 | 10 | @media (prefers-reduced-motion: no-preference) { 11 | .App-logo { 12 | animation: App-logo-spin infinite 20s linear; 13 | } 14 | } 15 | 16 | .App-header { 17 | background-color: #282c34; 18 | min-height: 100vh; 19 | display: flex; 20 | flex-direction: column; 21 | align-items: center; 22 | justify-content: center; 23 | font-size: calc(10px + 2vmin); 24 | color: white; 25 | } 26 | 27 | .App-link { 28 | color: #61dafb; 29 | } 30 | 31 | @keyframes App-logo-spin { 32 | from { 33 | transform: rotate(0deg); 34 | } 35 | to { 36 | transform: rotate(360deg); 37 | } 38 | } 39 | 40 | button { 41 | font-size: calc(10px + 2vmin); 42 | } 43 | -------------------------------------------------------------------------------- /src/App.jsx: -------------------------------------------------------------------------------- 1 | import { CharacterList } from "./components/CharacterList"; 2 | 3 | function App() { 4 | return ( 5 |
6 |

Rick And Morty

7 | 8 |
9 | ); 10 | } 11 | 12 | export default App; 13 | -------------------------------------------------------------------------------- /src/components/Character.jsx: -------------------------------------------------------------------------------- 1 | export function Character(character) { 2 | return ( 3 |
4 |

{character.name}

5 | {character.name} 6 |

{`Origin: ${character.origin && character.origin.name}`}

7 |
8 | ); 9 | } 10 | export default Character; 11 | -------------------------------------------------------------------------------- /src/components/CharacterList.jsx: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | import { Character } from "./Character"; 3 | 4 | function NavPage({ page, setPage }) { 5 | return ( 6 |
7 |

Page: {page}

8 | 9 | 15 |
16 | ); 17 | } 18 | 19 | export function CharacterList() { 20 | const [loading, setLoading] = useState(true); 21 | const [characters, setCharacters] = useState([]); 22 | const [page, setPage] = useState(1); 23 | 24 | useEffect(() => { 25 | async function fetchData() { 26 | const data = await fetch( 27 | `https://rickandmortyapi.com/api/character?page=${page}` 28 | ); 29 | const { results } = await data.json(); 30 | setCharacters(results); 31 | setLoading(false); 32 | } 33 | fetchData(); 34 | }, [page]); 35 | 36 | return ( 37 |
38 | 39 | 40 | {loading ? ( 41 |
Loading...
42 | ) : ( 43 |
44 | {characters.map((character) => ( 45 |
46 | 52 |
53 | ))} 54 |
55 | )} 56 | 57 | 58 |
59 | ); 60 | } 61 | 62 | export default CharacterList; 63 | -------------------------------------------------------------------------------- /src/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: 'Roboto', sans-serif; 4 | } 5 | 6 | code { 7 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 8 | monospace; 9 | } 10 | -------------------------------------------------------------------------------- /src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /src/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import ReactDOM from "react-dom/client"; 3 | import App from "./App"; 4 | import "bootstrap/dist/css/bootstrap.min.css"; 5 | 6 | import "./index.css"; 7 | 8 | ReactDOM.createRoot(document.getElementById("root")).render( 9 | 10 | 11 | 12 | ); 13 | -------------------------------------------------------------------------------- /vite.config.js: -------------------------------------------------------------------------------- 1 | import { defineConfig } from "vite"; 2 | import react from "@vitejs/plugin-react"; 3 | import eslint from "vite-plugin-eslint"; 4 | 5 | // https://vitejs.dev/config/ 6 | export default defineConfig({ 7 | base: "https://faztweb.github.io/react-rick-and-morty/", 8 | plugins: [react(), eslint()], 9 | }); 10 | --------------------------------------------------------------------------------