├── .DS_Store ├── .github └── workflows │ └── manual.yml ├── .gitignore ├── L2. Rendering UI with React └── 1. JavaScript Expressions with JSX │ ├── Instructions.md │ ├── Solution │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo192.png │ └── Starter │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── index.css │ ├── index.js │ └── logo192.png ├── L3. State Management ├── .gitkeep ├── 1. Passing Data I │ ├── Instructions.md │ ├── Solution │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ └── logo.svg │ └── Starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── 2. Passing Data II │ ├── Instructions.md │ ├── Solution A │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── Dashboard.js │ │ │ ├── MovieCard.js │ │ │ ├── UserList.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ └── logo.svg │ ├── Solution B │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── MovieCard.js │ │ │ ├── MovieCardsList.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ └── logo.svg │ ├── SolutionExplanation.md │ ├── Starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ └── logo.svg │ ├── package-lock.json │ └── package.json ├── 3. Managing State │ ├── Instructions.md │ ├── Solution │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── corgi.jpg │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ └── logo.svg │ └── Starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── corgi.jpg │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── 4. Controlled Components I │ ├── Instructions.md │ ├── Solution │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ └── logo.svg │ └── Starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── 5. Controlled Components II │ ├── Instructions.md │ ├── Solution │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── CreateNewItem.js │ │ │ ├── DeleteLastItem.js │ │ │ ├── Item.js │ │ │ ├── ItemList.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ └── logo.svg │ └── Starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg └── 6. All Together │ ├── Instructions.md │ ├── Solution │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── AddUser.js │ │ ├── App.css │ │ ├── App.js │ │ ├── User.js │ │ ├── UserList.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ ├── SolutionExplanation.md │ └── Starter │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── index.css │ ├── index.js │ └── logo.svg ├── L4. Hooks ├── 1. State Management Recap │ ├── Instructions.md │ ├── Solution │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── AddMessage.js │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── ChatWindow.js │ │ │ ├── MessageHistory.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ └── logo.svg │ ├── SolutionExplanation.md │ └── Starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg ├── 2. State and Side Effects │ ├── Instructions.md │ ├── Solution │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ │ ├── favicon.ico │ │ │ ├── index.html │ │ │ ├── manifest.json │ │ │ └── robots.txt │ │ └── src │ │ │ ├── App.css │ │ │ ├── App.js │ │ │ ├── Game.js │ │ │ ├── Score.js │ │ │ ├── index.css │ │ │ ├── index.js │ │ │ └── logo.svg │ └── Starter │ │ ├── .gitignore │ │ ├── README.md │ │ ├── package-lock.json │ │ ├── package.json │ │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg └── 3. Side Effect Cleanup │ ├── Instructions.md │ ├── Solution │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ │ ├── favicon.ico │ │ ├── index.html │ │ ├── manifest.json │ │ └── robots.txt │ └── src │ │ ├── App.css │ │ ├── App.js │ │ ├── ChildComponent.js │ │ ├── index.css │ │ ├── index.js │ │ └── logo.svg │ └── Starter │ ├── .gitignore │ ├── README.md │ ├── package-lock.json │ ├── package.json │ ├── public │ ├── favicon.ico │ ├── index.html │ ├── manifest.json │ └── robots.txt │ └── src │ ├── App.css │ ├── App.js │ ├── ChildComponent.js │ ├── index.css │ ├── index.js │ └── logo.svg └── README.md /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/.DS_Store -------------------------------------------------------------------------------- /.github/workflows/manual.yml: -------------------------------------------------------------------------------- 1 | # Workflow to ensure whenever a Github PR is submitted, 2 | # a JIRA ticket gets created automatically. 3 | name: Manual Workflow 4 | 5 | # Controls when the action will run. 6 | on: 7 | # Triggers the workflow on pull request events but only for the master branch 8 | pull_request_target: 9 | types: [opened, reopened] 10 | 11 | # Allows you to run this workflow manually from the Actions tab 12 | workflow_dispatch: 13 | 14 | jobs: 15 | test-transition-issue: 16 | name: Convert Github Issue to Jira Issue 17 | runs-on: ubuntu-latest 18 | steps: 19 | - name: Checkout 20 | uses: actions/checkout@master 21 | 22 | - name: Login 23 | uses: atlassian/gajira-login@master 24 | env: 25 | JIRA_BASE_URL: ${{ secrets.JIRA_BASE_URL }} 26 | JIRA_USER_EMAIL: ${{ secrets.JIRA_USER_EMAIL }} 27 | JIRA_API_TOKEN: ${{ secrets.JIRA_API_TOKEN }} 28 | 29 | - name: Create NEW JIRA ticket 30 | id: create 31 | uses: atlassian/gajira-create@master 32 | with: 33 | project: CONUPDATE 34 | issuetype: Task 35 | summary: | 36 | Github PR [Assign the ND component] | Repo: ${{ github.repository }} | PR# ${{github.event.number}} 37 | description: | 38 | Repo link: https://github.com/${{ github.repository }} 39 | PR no. ${{ github.event.pull_request.number }} 40 | PR title: ${{ github.event.pull_request.title }} 41 | PR description: ${{ github.event.pull_request.description }} 42 | In addition, please resolve other issues, if any. 43 | fields: '{"components": [{"name":"Github PR"}], "customfield_16449":"https://classroom.udacity.com/", "customfield_16450":"Resolve the PR", "labels": ["github"], "priority":{"id": "4"}}' 44 | 45 | - name: Log created issue 46 | run: echo "Issue ${{ steps.create.outputs.issue }} was created" 47 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | bundle.js 3 | bundle.js.map -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Instructions.md: -------------------------------------------------------------------------------- 1 | # JavaScript Expressions with JSX 2 | 3 | One of the most useful features of JSX is the ability to embed JavaScript expressions directly into it. In this exercise, you'll get practice using expressions in page elements and attributes. 4 | 5 | 1. Run `npm install` to install dependencies. 6 | 2. Run `npm start` to start the development server. 7 | 3. Open `./src/App.js`. 8 | 4. Within the `div` tag in the return statement, use JSX to embed JavaScript and render: 9 | - The React logo 10 | - The name of the library 11 | - Some facts about React 12 | Hint: you'll probably want to create at least three different elements (e.g., an `` element, etc.)! 13 | 5. Visit `http://localhost:3000/` to view your application! 14 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/.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 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/public/favicon.ico -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/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 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/src/App.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo192.png"; 2 | import "./App.css"; 3 | 4 | const App = () => { 5 | const name = "React"; 6 | 7 | const facts = { 8 | releaseDate: "May 2013", 9 | language: "JavaScript", 10 | license: "MIT", 11 | }; 12 | 13 | const aboutReact = (facts) => 14 | `Release date: ${facts.releaseDate}. Language: ${facts.releaseDate}. License: ${facts.license}.`; 15 | 16 | return ( 17 |
18 | React logo 19 |

{name}

20 |

{aboutReact(facts)}

21 |
22 | ); 23 | }; 24 | 25 | export default App; 26 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/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 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/src/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L2. Rendering UI with React/1. JavaScript Expressions with JSX/Solution/src/logo192.png -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/.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 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/public/favicon.ico -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/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 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/src/App.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo192.png"; 2 | import "./App.css"; 3 | 4 | const App = () => { 5 | const name = "React"; 6 | 7 | const facts = { 8 | releaseDate: "May 2013", 9 | language: "JavaScript", 10 | license: "MIT", 11 | }; 12 | 13 | const aboutReact = (facts) => 14 | `Release date: ${facts.releaseDate}. Language: ${facts.releaseDate}. License: ${facts.license}.`; 15 | 16 | return
; 17 | }; 18 | 19 | export default App; 20 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/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 | -------------------------------------------------------------------------------- /L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/src/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L2. Rendering UI with React/1. JavaScript Expressions with JSX/Starter/src/logo192.png -------------------------------------------------------------------------------- /L3. State Management/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/.gitkeep -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Instructions.md: -------------------------------------------------------------------------------- 1 | # Passing Data I 2 | 3 | 1. Run `npm install` to install dependencies. 4 | 2. Run `npm start` to start the development server. 5 | 3. Open `./src/App.js`. 6 | 4. Use the `profiles`, `users`, and `movies` data to display a list of users alongside their favorite movies. 7 | 8 | ## Example 9 | 10 | The `users` object has the user "Jane Cruz": 11 | 12 | ```js 13 | const users = { 14 | 1: { 15 | id: 1, 16 | name: "Jane Cruz", 17 | userName: "coder", 18 | }, 19 | // ... 20 | }; 21 | ``` 22 | 23 | And the `profiles` array has a combination of which users like which movies: 24 | 25 | ```js 26 | const profiles = [ 27 | { 28 | id: 1, 29 | userID: "1", 30 | favoriteMovieID: "1", 31 | }, 32 | // ... 33 | ]; 34 | ``` 35 | 36 | From this information, one of the list items might look like this: 37 | 38 | > Jane Cruz's favorite movie is Planet Earth 1. 39 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Solution/.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 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/1. Passing Data I/Solution/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Solution/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 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Solution/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Solution/src/App.css: -------------------------------------------------------------------------------- 1 | .App-logo { 2 | animation: App-logo-spin infinite 20s linear; 3 | height: 80px; 4 | } 5 | 6 | .App-header { 7 | background-color: #222; 8 | height: 150px; 9 | padding: 20px; 10 | text-align: center; 11 | color: white; 12 | } 13 | 14 | .App-title { 15 | font-size: 1.5em; 16 | } 17 | 18 | .App-intro { 19 | font-size: large; 20 | } 21 | 22 | @keyframes App-logo-spin { 23 | from { 24 | transform: rotate(0deg); 25 | } 26 | to { 27 | transform: rotate(360deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Solution/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Solution/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 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Solution/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/.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 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/1. Passing Data I/Starter/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/src/App.css: -------------------------------------------------------------------------------- 1 | .App-logo { 2 | animation: App-logo-spin infinite 20s linear; 3 | height: 80px; 4 | } 5 | 6 | .App-header { 7 | background-color: #222; 8 | height: 150px; 9 | padding: 20px; 10 | text-align: center; 11 | color: white; 12 | } 13 | 14 | .App-title { 15 | font-size: 1.5em; 16 | } 17 | 18 | .App-intro { 19 | font-size: large; 20 | } 21 | 22 | @keyframes App-logo-spin { 23 | from { 24 | transform: rotate(0deg); 25 | } 26 | to { 27 | transform: rotate(360deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import logo from "./logo.svg"; 3 | 4 | // Use React and the data below to display a list of users alongside their favorite movies. 5 | // For detailed instructions, refer to Instructions.md. 6 | 7 | const profiles = [ 8 | { 9 | id: 1, 10 | userID: "1", 11 | favoriteMovieID: "1", 12 | }, 13 | { 14 | id: 2, 15 | userID: "2", 16 | favoriteMovieID: "1", 17 | }, 18 | { 19 | id: 3, 20 | userID: "4", 21 | favoriteMovieID: "5", 22 | }, 23 | { 24 | id: 4, 25 | userID: "5", 26 | favoriteMovieID: "2", 27 | }, 28 | { 29 | id: 5, 30 | userID: "3", 31 | favoriteMovieID: "5", 32 | }, 33 | { 34 | id: 6, 35 | userID: "6", 36 | favoriteMovieID: "4", 37 | }, 38 | ]; 39 | 40 | const users = { 41 | 1: { 42 | id: 1, 43 | name: "Jane Cruz", 44 | userName: "coder", 45 | }, 46 | 2: { 47 | id: 2, 48 | name: "Matthew Johnson", 49 | userName: "mpage", 50 | }, 51 | 3: { 52 | id: 3, 53 | name: "Autumn Green", 54 | userName: "user123", 55 | }, 56 | 4: { 57 | id: 4, 58 | name: "John Doe", 59 | userName: "user123", 60 | }, 61 | 5: { 62 | id: 5, 63 | name: "Lauren Carlson", 64 | userName: "user123", 65 | }, 66 | 6: { 67 | id: 6, 68 | name: "Nicholas Lain", 69 | userName: "user123", 70 | }, 71 | }; 72 | 73 | const movies = { 74 | 1: { 75 | id: 1, 76 | name: "Planet Earth 1", 77 | }, 78 | 2: { 79 | id: 2, 80 | name: "Selma", 81 | }, 82 | 3: { 83 | id: 3, 84 | name: "Million Dollar Baby", 85 | }, 86 | 4: { 87 | id: 4, 88 | name: "Forrest Gump", 89 | }, 90 | 5: { 91 | id: 5, 92 | name: "Get Out", 93 | }, 94 | }; 95 | 96 | const App = () => { 97 | return ( 98 |
99 |
100 | logo 101 |

ReactND - Coding Practice

102 |
103 |

Favorite Movies

104 |
105 | ); 106 | }; 107 | 108 | export default App; 109 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/1. Passing Data I/Starter/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Instructions.md: -------------------------------------------------------------------------------- 1 | # Passing Data II 2 | 3 | Let's do something a little bit more challenging than the previous exercise. Instead of displaying a list of users and their movies, this time you need to display a list of movies. 4 | 5 | 1. Run `npm install` to install dependencies. 6 | 2. Run `npm start` to start the development server. 7 | 3. Open `./src/App.js`. 8 | 4. For each movie in the list, there are two options: 9 | 10 | - Option 1: If the movie has been favorited, display a list of all of the users who said that this movie was their favorite. 11 | - Option 2: If the movie has _not_ been favorited, display some text stating that no one favorited the movie. 12 | 13 | As you go about tackling this exercise, try to make the app _modular_ by breaking it into resusable React components. 14 | 15 | ## Example 16 | 17 | ```html 18 |

Forrest Gump

19 |

Liked By:

20 |
    21 |
  • Nicholas Lain
    • 22 |
23 | 24 |

Get Out

25 |

Liked By:

26 |
    27 |
  • John Doe
    • 28 |
  • Autumn Green
    • 29 |
30 | 31 |

Autumn Green

32 |

None of the current users liked this movie

33 | ``` 34 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/.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 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/2. Passing Data II/Solution A/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/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 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/src/App.css: -------------------------------------------------------------------------------- 1 | .App-logo { 2 | animation: App-logo-spin infinite 20s linear; 3 | height: 80px; 4 | } 5 | 6 | .App-header { 7 | background-color: #222; 8 | height: 150px; 9 | padding: 20px; 10 | text-align: center; 11 | color: white; 12 | } 13 | 14 | .App-title { 15 | font-size: 1.5em; 16 | } 17 | 18 | .App-intro { 19 | font-size: large; 20 | } 21 | 22 | @keyframes App-logo-spin { 23 | from { 24 | transform: rotate(0deg); 25 | } 26 | to { 27 | transform: rotate(360deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/src/Dashboard.js: -------------------------------------------------------------------------------- 1 | import MovieCard from "./MovieCard"; 2 | 3 | // Instead of passing in the entire props object, we are destructuring via ES6. 4 | // That is, we're getting the profiles, users, and movies properties from the props 5 | // passed into this component. If you need a refresher on this syntax, check 6 | // out this course: https://www.udacity.com/course/es6-javascript-improved--ud356 7 | const Dashboard = ({ usersByMovie, users, movies }) => { 8 | const movieCards = Object.keys(movies).map((id) => ( 9 | 15 | )); 16 | 17 | return
    {movieCards}
; 18 | }; 19 | 20 | export default Dashboard; 21 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/src/MovieCard.js: -------------------------------------------------------------------------------- 1 | import UserList from "./UserList"; 2 | 3 | // Instead of passing in the entire props object, we are destructuring via ES6. 4 | // That is, we're getting the profiles, users, and movies properties from the props 5 | // passed into this component. If you need a refresher on this syntax, check 6 | // out this course: https://www.udacity.com/course/es6-javascript-improved--ud356 7 | const MovieCard = ({ users, usersWhoLikedMovie, movieInfo }) => { 8 | return ( 9 |
  • 10 |

    {movieInfo.name}

    11 |

    Liked By:

    12 | 13 |
    • 14 | ); 15 | }; 16 | 17 | export default MovieCard; 18 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/src/UserList.js: -------------------------------------------------------------------------------- 1 | // Instead of passing in the entire props object, we are destructuring via ES6. 2 | // That is, we're getting the profiles, users, and movies properties from the props 3 | // passed into this component. If you need a refresher on this syntax, check 4 | // out this course: https://www.udacity.com/course/es6-javascript-improved--ud356 5 | const UserList = ({ users, usersWhoLikedMovie }) => { 6 | if (!usersWhoLikedMovie || usersWhoLikedMovie.length === 0) { 7 | return

    None of the current users liked this movie.

    ; 8 | } 9 | 10 | const listofItems = usersWhoLikedMovie.map((id) => ( 11 |
  • 12 |

    {users[id].name}

    13 |
    • 14 | )); 15 | 16 | return
      {listofItems}
    ; 17 | }; 18 | 19 | export default UserList; 20 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution A/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 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/.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 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/2. Passing Data II/Solution B/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/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 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/src/App.css: -------------------------------------------------------------------------------- 1 | .App-logo { 2 | animation: App-logo-spin infinite 20s linear; 3 | height: 80px; 4 | } 5 | 6 | .App-header { 7 | background-color: #222; 8 | height: 150px; 9 | padding: 20px; 10 | text-align: center; 11 | color: white; 12 | } 13 | 14 | .App-title { 15 | font-size: 1.5em; 16 | } 17 | 18 | .App-intro { 19 | font-size: large; 20 | } 21 | 22 | @keyframes App-logo-spin { 23 | from { 24 | transform: rotate(0deg); 25 | } 26 | to { 27 | transform: rotate(360deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/src/MovieCard.js: -------------------------------------------------------------------------------- 1 | // Instead of passing in the entire props object, we are destructuring via ES6. 2 | // That is, we're getting the profiles, users, and movies properties from the props 3 | // passed into this component. If you need a refresher on this syntax, check 4 | // out this course: https://www.udacity.com/course/es6-javascript-improved--ud356 5 | const MovieCard = ({ users, usersWhoLikedMovie, movieInfo }) => { 6 | return ( 7 |
  • 8 |

    {movieInfo.name}

    9 |

    Liked By:

    10 | 11 | {!usersWhoLikedMovie || usersWhoLikedMovie.length === 0 ? ( 12 |

    None of the current users liked this movie.

    13 | ) : ( 14 |
      15 | {usersWhoLikedMovie && 16 | usersWhoLikedMovie.map((userId) => { 17 | return ( 18 |
    • 19 |

      {users[userId].name}

      20 |
      • 21 | ); 22 | })} 23 |
    24 | )} 25 |
    • 26 | ); 27 | }; 28 | 29 | export default MovieCard; 30 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/src/MovieCardsList.js: -------------------------------------------------------------------------------- 1 | import MovieCard from "./MovieCard"; 2 | 3 | // Instead of passing in the entire props object, we are destructuring via ES6. 4 | // That is, we're getting the profiles, users, and movies properties from the props 5 | // passed into this component. If you need a refresher on this syntax, check 6 | // out this course: https://www.udacity.com/course/es6-javascript-improved--ud356 7 | const MovieCardsList = ({ profiles, users, movies, usersByMovie }) => { 8 | const movieCards = Object.keys(movies).map((id) => ( 9 | 15 | )); 16 | return
      {movieCards}
    ; 17 | }; 18 | 19 | export default MovieCardsList; 20 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Solution B/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 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Starter/.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 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/2. Passing Data II/Starter/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Starter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Starter/src/App.css: -------------------------------------------------------------------------------- 1 | .App-logo { 2 | animation: App-logo-spin infinite 20s linear; 3 | height: 80px; 4 | } 5 | 6 | .App-header { 7 | background-color: #222; 8 | height: 150px; 9 | padding: 20px; 10 | text-align: center; 11 | color: white; 12 | } 13 | 14 | .App-title { 15 | font-size: 1.5em; 16 | } 17 | 18 | .App-intro { 19 | font-size: large; 20 | } 21 | 22 | @keyframes App-logo-spin { 23 | from { 24 | transform: rotate(0deg); 25 | } 26 | to { 27 | transform: rotate(360deg); 28 | } 29 | } 30 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Starter/src/App.js: -------------------------------------------------------------------------------- 1 | import "./App.css"; 2 | import logo from "./logo.svg"; 3 | 4 | // Display a list of movies where each movie contains a list of users that favorited it. 5 | // For detailed instructions, refer to Instructions.md. 6 | 7 | const profiles = [ 8 | { 9 | id: 1, 10 | userID: "1", 11 | favoriteMovieID: "1", 12 | }, 13 | { 14 | id: 2, 15 | userID: "2", 16 | favoriteMovieID: "1", 17 | }, 18 | { 19 | id: 3, 20 | userID: "4", 21 | favoriteMovieID: "5", 22 | }, 23 | { 24 | id: 4, 25 | userID: "5", 26 | favoriteMovieID: "2", 27 | }, 28 | { 29 | id: 5, 30 | userID: "3", 31 | favoriteMovieID: "5", 32 | }, 33 | { 34 | id: 6, 35 | userID: "6", 36 | favoriteMovieID: "4", 37 | }, 38 | ]; 39 | 40 | const users = { 41 | 1: { 42 | id: 1, 43 | name: "Jane Cruz", 44 | userName: "coder", 45 | }, 46 | 2: { 47 | id: 2, 48 | name: "Matthew Johnson", 49 | userName: "mpage", 50 | }, 51 | 3: { 52 | id: 3, 53 | name: "Autumn Green", 54 | userName: "user123", 55 | }, 56 | 4: { 57 | id: 4, 58 | name: "John Doe", 59 | userName: "user123", 60 | }, 61 | 5: { 62 | id: 5, 63 | name: "Lauren Carlson", 64 | userName: "user123", 65 | }, 66 | 6: { 67 | id: 6, 68 | name: "Nicholas Lain", 69 | userName: "user123", 70 | }, 71 | }; 72 | 73 | const movies = { 74 | 1: { 75 | id: 1, 76 | name: "Planet Earth 1", 77 | }, 78 | 2: { 79 | id: 2, 80 | name: "Selma", 81 | }, 82 | 3: { 83 | id: 3, 84 | name: "Million Dollar Baby", 85 | }, 86 | 4: { 87 | id: 4, 88 | name: "Forrest Gump", 89 | }, 90 | 5: { 91 | id: 5, 92 | name: "Get Out", 93 | }, 94 | }; 95 | 96 | const App = () => { 97 | return ( 98 |
    99 |
    100 | logo 101 |

    ReactND - Coding Practice

    102 |
    103 |

    How Popular is Your Favorite Movie?

    104 |
    105 | ); 106 | }; 107 | 108 | export default App; 109 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Starter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/package-lock.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "2. Passing Data II", 3 | "lockfileVersion": 2, 4 | "requires": true, 5 | "packages": {} 6 | } 7 | -------------------------------------------------------------------------------- /L3. State Management/2. Passing Data II/package.json: -------------------------------------------------------------------------------- 1 | {} 2 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Instructions.md: -------------------------------------------------------------------------------- 1 | # Managing State 2 | 3 | State management is the one of the core strengths of React. In this exercise, you'll practice using `useState` to create a "like" button that tracks how many times a photo is liked. To begin: 4 | 5 | 1. Run `npm install` to install dependencies. 6 | 2. Run `npm start` to start the development server. 7 | 3. Open `./src/App.js`. 8 | 4. Leveraging `useState`, create two variables: one to keep track of the amount of likes, and one to set the amount of likes. Be sure to initialize the amount of likes as 0. 9 | 5. Render the current amount of likes on the page. 10 | 6. Create a button that, when clicked, increments the amount of likes. Note that with each click, the amount of likes rendered on the page should increase as well. 11 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/.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 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/3. Managing State/Solution/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/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 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/src/App.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/src/App.js: -------------------------------------------------------------------------------- 1 | import corgi from "./corgi.jpg"; 2 | import "./App.css"; 3 | import { useState } from "react"; 4 | 5 | const App = () => { 6 | const [likes, setLikes] = useState(0); 7 | 8 | return ( 9 |
    10 |

    Like this photo!

    11 | Corgi 12 |

    Amount of likes: {likes}

    13 | 14 |
    15 | ); 16 | }; 17 | 18 | export default App; 19 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/src/corgi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/3. Managing State/Solution/src/corgi.jpg -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Solution/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 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/.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 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/3. Managing State/Starter/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/src/App.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/src/App.js: -------------------------------------------------------------------------------- 1 | import corgi from "./corgi.jpg"; 2 | import "./App.css"; 3 | 4 | const App = () => { 5 | return ( 6 |
    7 |

    Like this photo!

    8 | Corgi 9 |

    Amount of likes:

    10 |
    11 | ); 12 | }; 13 | 14 | export default App; 15 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/src/corgi.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/3. Managing State/Starter/src/corgi.jpg -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/3. Managing State/Starter/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Instructions.md: -------------------------------------------------------------------------------- 1 | # Controlled Components I 2 | 3 | The React component that renders the form also controls what happens in that form on user input. This exercise will help you practice what you've learned about Controlled Components. 4 | 5 | # Task 6 | 7 | 1. Run `npm install` to install dependencies. 8 | 2. Run `npm start` to start the development server. 9 | 3. Open `./src/App.js` and begin making edits. 10 | 4. Edit the code to make the printed text mirror what we type into the input field. When we erase all of the text, nothing should be printed to the screen. 11 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Solution/.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 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/4. Controlled Components I/Solution/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Solution/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 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Solution/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Solution/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 { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Solution/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import logo from "./logo.svg"; 3 | import "./App.css"; 4 | 5 | const App = () => { 6 | const [value, setValue] = useState(""); 7 | 8 | const handleChange = (event) => { 9 | setValue(event.target.value); 10 | }; 11 | 12 | return ( 13 |
    14 |
    15 | logo 16 |

    ReactND - Coding Practice

    17 |
    18 |
    19 | 25 |

    Echo:

    26 |

    {value}

    27 |
    28 |
    29 | ); 30 | }; 31 | 32 | export default App; 33 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Solution/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Solution/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 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Starter/.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 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/4. Controlled Components I/Starter/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Starter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Starter/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 { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Starter/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo.svg"; 2 | import "./App.css"; 3 | 4 | const App = () => { 5 | return ( 6 |
    7 |
    8 | logo 9 |

    ReactND - Coding Practice

    10 |
    11 |
    12 | 13 |

    Echo:

    14 |

    This should mirror the text you typed into the input field.

    15 |
    16 |
    17 | ); 18 | }; 19 | 20 | export default App; 21 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Starter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/4. Controlled Components I/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Instructions.md: -------------------------------------------------------------------------------- 1 | # Controlled Components II 2 | 3 | This exercise will help you to practice passing data into components, adding state to components, updating state, and creating Controlled Components. 4 | 5 | # Task 6 | 7 | The starter files give you a functioning app. But, as you can tell, the app isn't modular at all - there is only one component! 8 | 9 | Your goal is to break down this app into smaller components and make them work together to achieve the same functioning application. Remember that React components should be modular, composable (i.e., can be assembled in various ways to achieve the desired result on the page), and reusable. 10 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/.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 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "prop-types": "^15.8.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "5.0.0", 13 | "web-vitals": "^2.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/5. Controlled Components II/Solution/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/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 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/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 { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo.svg"; 2 | import "./App.css"; 3 | import { useState } from "react"; 4 | import CreateNewItem from "./CreateNewItem"; 5 | import ItemList from "./ItemList"; 6 | import DeleteLastItem from "./DeleteLastItem"; 7 | 8 | const App = () => { 9 | const [items, setItems] = useState([]); 10 | 11 | const handleAddItem = (item) => { 12 | setItems([...items, item]); 13 | }; 14 | 15 | const handleDeleteLastItem = (event) => { 16 | setItems(items.slice(0, -1)); 17 | }; 18 | 19 | const noItemsFound = () => items.length === 0; 20 | 21 | return ( 22 |
    23 |
    24 | logo 25 |

    ReactND - Coding Practice

    26 |
    27 |

    Shopping List

    28 | 29 | 33 | 34 |
    35 | ); 36 | }; 37 | 38 | export default App; 39 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/src/CreateNewItem.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | const CreateNewItem = ({ onAddItem }) => { 5 | const [value, setValue] = useState(""); 6 | 7 | const handleChange = (event) => { 8 | setValue(event.target.value); 9 | }; 10 | 11 | const addItem = (event) => { 12 | event.preventDefault(); 13 | onAddItem(value); 14 | setValue(""); 15 | }; 16 | 17 | const inputIsEmpty = () => value === ""; 18 | 19 | return ( 20 |
    21 |
    22 | 28 | 29 |
    30 |
    31 | ); 32 | }; 33 | 34 | CreateNewItem.propTypes = { 35 | onAddItem: PropTypes.func.isRequired, 36 | }; 37 | 38 | export default CreateNewItem; 39 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/src/DeleteLastItem.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const DeleteLastItem = ({ onDeleteLastItem, buttonDisabled }) => { 4 | const handleDeleteLastItem = (event) => { 5 | onDeleteLastItem(); 6 | }; 7 | 8 | return ( 9 | 12 | ); 13 | }; 14 | 15 | DeleteLastItem.propTypes = { 16 | buttonDisabled: PropTypes.func.isRequired, 17 | onDeleteLastItem: PropTypes.func.isRequired, 18 | }; 19 | 20 | export default DeleteLastItem; 21 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/src/Item.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const Item = ({ item }) => { 4 | return
  • {item}
    • ; 5 | }; 6 | 7 | Item.propTypes = { 8 | item: PropTypes.string.isRequired, 9 | }; 10 | 11 | export default Item; 12 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/src/ItemList.js: -------------------------------------------------------------------------------- 1 | import Item from "./Item"; 2 | import PropTypes from "prop-types"; 3 | 4 | const ItemList = ({ items }) => { 5 | return ( 6 |
    7 |

    Items

    8 |
      9 | {items.map((item, index) => ( 10 | 11 | ))} 12 |
    13 |
    14 | ); 15 | }; 16 | 17 | ItemList.propTypes = { 18 | items: PropTypes.array.isRequired, 19 | }; 20 | 21 | export default ItemList; 22 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Solution/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 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Starter/.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 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "prop-types": "^15.8.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "5.0.0", 13 | "web-vitals": "^2.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/5. Controlled Components II/Starter/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Starter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Starter/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 { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Starter/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo.svg"; 2 | import "./App.css"; 3 | import { useState } from "react"; 4 | 5 | const App = () => { 6 | const [value, setValue] = useState(""); 7 | const [items, setItems] = useState([]); 8 | 9 | const handleChange = (event) => { 10 | setValue(event.target.value); 11 | }; 12 | 13 | const addItem = (event) => { 14 | event.preventDefault(); 15 | setItems([...items, value]); 16 | setValue(""); 17 | }; 18 | 19 | const deleteLastItem = (event) => { 20 | setItems(items.slice(0, -1)); 21 | }; 22 | 23 | const inputIsEmpty = () => value === ""; 24 | 25 | const noItemsFound = () => items.length === 0; 26 | 27 | return ( 28 |
    29 |
    30 | logo 31 |

    ReactND - Coding Practice

    32 |
    33 |

    Shopping List

    34 |
    35 | 41 | 42 |
    43 | 44 | 47 | 48 |

    Items

    49 |
      50 | {items.map((item, index) => ( 51 |
    1. {item}
      2. 52 | ))} 53 |
    54 |
    55 | ); 56 | }; 57 | 58 | export default App; 59 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Starter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/5. Controlled Components II/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/.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 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "prop-types": "^15.8.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "5.0.0", 13 | "web-vitals": "^2.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/6. All Together/Solution/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/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 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/src/AddUser.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | import { useState } from "react"; 3 | 4 | const AddUser = ({ users, onAddUser }) => { 5 | const [userExists, setUserExists] = useState(false); 6 | const [user, setUser] = useState({ 7 | firstName: "", 8 | lastName: "", 9 | username: "", 10 | }); 11 | 12 | const checkUserExists = (currUsername) => { 13 | for (let user of users) { 14 | if (user.username === currUsername) { 15 | return true; 16 | } 17 | } 18 | return false; 19 | }; 20 | 21 | const handleSubmit = (event) => { 22 | event.preventDefault(); 23 | const userAlreadyExists = checkUserExists(user.username); 24 | 25 | if (!userAlreadyExists) { 26 | onAddUser(user); 27 | } 28 | 29 | setUserExists(userAlreadyExists); 30 | }; 31 | 32 | const handleInputChange = (event) => { 33 | const { name, value } = event.target; 34 | 35 | setUser({ ...user, [name]: value }); 36 | }; 37 | 38 | const isDisabled = () => { 39 | const { firstName, lastName, username } = user; 40 | return firstName === "" || lastName === "" || username === ""; 41 | }; 42 | 43 | return ( 44 |
    45 |

    New User

    46 |
    47 |
    48 | 55 | 62 | 69 |
    70 | 71 |
    72 | {userExists ? ( 73 |

    You cannot add a user that already exists.

    74 | ) : ( 75 | "" 76 | )} 77 |
    78 | ); 79 | }; 80 | 81 | AddUser.propTypes = { 82 | onAddUser: PropTypes.func.isRequired, 83 | users: PropTypes.array.isRequired, 84 | }; 85 | 86 | export default AddUser; 87 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/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 { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import logo from "./logo.svg"; 3 | import "./App.css"; 4 | import AddUser from "./AddUser"; 5 | import UserList from "./UserList"; 6 | 7 | const App = () => { 8 | const [users, setUsers] = useState([]); 9 | 10 | const createUser = (user) => { 11 | user.numGamesPlayed = 0; 12 | setUsers([...users, user]); 13 | }; 14 | 15 | return ( 16 |
    17 |
    18 | logo 19 |

    ReactND - Coding Practice

    20 |
    21 | 22 | 23 |
    24 | ); 25 | }; 26 | 27 | export default App; 28 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/src/User.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const User = ({ user, showGamesPlayed }) => { 4 | return ( 5 |
  • 6 |

    Username: {user.username}

    7 |

    8 | Number of Games Played: {showGamesPlayed ? user.numGamesPlayed : "*"} 9 |

    10 |
    • 11 | ); 12 | }; 13 | 14 | User.propTypes = { 15 | showGamesPlayed: PropTypes.bool.isRequired, 16 | user: PropTypes.object.isRequired, 17 | }; 18 | 19 | export default User; 20 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/src/UserList.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | import { useState } from "react"; 3 | import User from "./User"; 4 | 5 | const UserList = ({ users }) => { 6 | const [showGamesPlayed, setShowGamesPlayed] = useState(true); 7 | 8 | const toggleGamesPlayedPanel = () => { 9 | setShowGamesPlayed(!showGamesPlayed); 10 | }; 11 | 12 | const gamesPlayedButton = ( 13 |
    14 | 18 |
    19 | ); 20 | 21 | return ( 22 |
    23 |

    Users

    24 | {users && users.length > 0 ? gamesPlayedButton : ""} 25 |
      26 | {users.map((user) => ( 27 | 32 | ))} 33 |
    34 |
    35 | ); 36 | }; 37 | 38 | UserList.propTypes = { 39 | users: PropTypes.array.isRequired, 40 | }; 41 | 42 | export default UserList; 43 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/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 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Solution/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/.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 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "prop-types": "^15.8.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "5.0.0", 13 | "web-vitals": "^2.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L3. State Management/6. All Together/Starter/public/favicon.ico -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/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 { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo.svg"; 2 | import "./App.css"; 3 | 4 | const App = () => { 5 | return ( 6 |
    7 |
    8 | logo 9 |

    ReactND - Coding Practice

    10 |
    11 |
    12 | ); 13 | }; 14 | 15 | export default App; 16 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/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 | -------------------------------------------------------------------------------- /L3. State Management/6. All Together/Starter/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Instructions.md: -------------------------------------------------------------------------------- 1 | # State Management Recap 2 | 3 | In this exercise, you'll practice many of your newly aquired React skills as well as recap what you already know about the `useState` hook. 4 | 5 | # Task 6 | 7 | You are given a starter template with dummy data. Add interactivity to the app by refactoring the static code in this template. The goal is to build a React app that shows two chat windows for the two existing users: Amy and John. The messages they send to each other should appear in both chat windows. On Amy's screen, her messages should appear in green and John's messages should appear in blue. On John's screen, his messages should appear in green and Amy's messages should appear in blue. 8 | 9 | Remember to follow these steps from the [Thinking in React Guide](https://reactjs.org/docs/thinking-in-react.html) when you're building your React applications: 10 | 11 | ## Step 1. Break down the app into a hierarchy of components. Draw a box around each React component. 12 | 13 | ## Step 2. Determine the data in our app. 14 | 15 | ## Step 3. Figure out the data that should be a part of our state: 16 | 17 | 1. Is it passed in from a parent via props? If so, it probably isn’t state. 18 | 19 | 2. Does it remain unchanged over time? If so, it probably isn’t state. 20 | 21 | 3. Can you compute it based on any other state or props in your component? 22 | If so, it isn’t state. 23 | 24 | ## Step 4. Identify where each piece of state lives. 25 | 26 | 1. Identify every component that renders something based on that state. 27 | 28 | 2. If multiple components need the same piece of state, put that piece of state into those components' parent-most component. 29 | 30 | If you can’t find a component where it makes sense to own the state, create a new component simply for holding the state and add it somewhere in the hierarchy above the common owner component. 31 | 32 | ## Step 5. Add Inverse Data Flow. 33 | 34 | State should be updated inside of the component where that state lives. If we pass state down from component A to component B and then need to update the state based on something that happened in component B, we can do so via callbacks: Component A will not only pass state to Component B, but it will also pass a callback function that will fire whenever the state should be updated. 35 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/.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 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "prop-types": "^15.8.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "5.0.0", 13 | "web-vitals": "^2.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L4. Hooks/1. State Management Recap/Solution/public/favicon.ico -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/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 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/src/AddMessage.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import PropTypes from "prop-types"; 3 | 4 | const AddMessage = ({ onMessage }) => { 5 | const [message, setMessage] = useState(""); 6 | 7 | const handleInputChange = (event) => { 8 | const { value } = event.target; 9 | 10 | setMessage(value); 11 | }; 12 | 13 | const handleSubmit = (event) => { 14 | event.preventDefault(); 15 | 16 | // Call the callback function that was passed to this component from ChatWindow 17 | onMessage(message); 18 | setMessage(""); 19 | }; 20 | 21 | const isDisabled = () => { 22 | return message === ""; 23 | }; 24 | 25 | return ( 26 |
    27 |
    28 | 35 |
    36 | 39 |
    40 |
    41 |
    42 | ); 43 | }; 44 | 45 | AddMessage.propTypes = { 46 | onMessage: PropTypes.func.isRequired, 47 | }; 48 | 49 | export default AddMessage; 50 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .container { 6 | display: flex; 7 | margin-top: 5%; 8 | } 9 | 10 | .chat-window { 11 | text-align: center; 12 | width: 500px; 13 | height: 100%; 14 | margin: auto; 15 | border: 15px solid #2eb9ce; 16 | padding: 20px; 17 | border-radius: 10px; 18 | color: #019ad2; 19 | font-size: 1.2em; 20 | } 21 | 22 | .centered { 23 | position: fixed; 24 | left: 50%; 25 | } 26 | 27 | .App-logo { 28 | animation: App-logo-spin infinite 20s linear; 29 | height: 80px; 30 | } 31 | 32 | .App-header { 33 | background-color: #222; 34 | height: 150px; 35 | padding: 20px; 36 | color: white; 37 | } 38 | 39 | .App-title { 40 | font-size: 1.5em; 41 | } 42 | 43 | .App-intro { 44 | font-size: large; 45 | } 46 | 47 | @keyframes App-logo-spin { 48 | from { 49 | transform: rotate(0deg); 50 | } 51 | to { 52 | transform: rotate(360deg); 53 | } 54 | } 55 | 56 | .message-list { 57 | list-style-type: none; 58 | height: 80%; 59 | border: 1px solid; 60 | text-align: left; 61 | min-height: 400px; 62 | border-radius: 10px; 63 | padding-top: 1em; 64 | } 65 | 66 | .name { 67 | font-size: 3em; 68 | } 69 | 70 | h2 { 71 | font-size: 2.2em; 72 | text-align: center !important; 73 | } 74 | 75 | .input-group, 76 | .input-group-append { 77 | border-radius: 10px; 78 | color: #2eb9ce !important; 79 | } 80 | 81 | .submit-button { 82 | background-color: #2eb9ce; 83 | color: black; 84 | } 85 | 86 | .submit-button:hover, 87 | .submit-button:active, 88 | .submit-button:focus { 89 | border-color: #2eb9ce; 90 | color: black; 91 | outline: none !important; 92 | box-shadow: none; 93 | background-color: #3498db; 94 | } 95 | 96 | .form-control, 97 | .form-control:focus { 98 | border-color: #2eb9ce; 99 | outline: 0 !important; 100 | -webkit-box-shadow: none; 101 | box-shadow: none; 102 | color: black; 103 | } 104 | 105 | .sender { 106 | color: #29a979; 107 | } 108 | 109 | .recipient { 110 | color: #019ad2; 111 | } 112 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo.svg"; 2 | import "./App.css"; 3 | import ChatWindow from "./ChatWindow"; 4 | import { useState } from "react"; 5 | 6 | const users = [{ username: "Amy" }, { username: "John" }]; 7 | 8 | const App = () => { 9 | // `messages` is an array of objects (e.g., { usermame: 'Amy', text: 'a' }) 10 | const [messages, setMessages] = useState([]); 11 | 12 | const onMessage = (username, message) => { 13 | const newMessage = { 14 | username: username, 15 | text: message, 16 | }; 17 | 18 | setMessages(messages.concat([newMessage])); 19 | }; 20 | 21 | return ( 22 |
    23 |
    24 | logo 25 |

    ReactND - Coding Practice

    26 |
    27 |
    28 | {users.map((user) => ( 29 | 35 | ))} 36 |
    37 |
    38 | ); 39 | }; 40 | 41 | export default App; 42 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/src/ChatWindow.js: -------------------------------------------------------------------------------- 1 | import AddMessage from "./AddMessage"; 2 | import MessageHistory from "./MessageHistory"; 3 | import PropTypes from "prop-types"; 4 | 5 | /* 6 | This component passes a callback function to AddMessage (called "onMessage") 7 | because we will need to add new messages to the message history in BOTH chat windows. 8 | Because BOTH chat windows need access to the messages piece of state, that piece of 9 | state will live in the App.js file. That means that the callback function 10 | will be passed from the App Component all the way down to the AddMessage Component. 11 | */ 12 | 13 | const ChatWindow = ({ user, messages, onMessage }) => { 14 | const handleOnMessage = (message) => { 15 | onMessage(user.username, message); 16 | }; 17 | 18 | return ( 19 |
    20 |

    Super Awesome Chat

    21 |
    {user.username}
    22 | 23 | 24 |
    25 | ); 26 | }; 27 | 28 | ChatWindow.propTypes = { 29 | onMessage: PropTypes.func.isRequired, 30 | user: PropTypes.object.isRequired, 31 | messages: PropTypes.array.isRequired, 32 | }; 33 | 34 | export default ChatWindow; 35 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/src/MessageHistory.js: -------------------------------------------------------------------------------- 1 | import PropTypes from "prop-types"; 2 | 3 | const MessageHistory = ({ user, messages }) => { 4 | return ( 5 |
      6 | {messages.map((message, index) => ( 7 |
    • 15 |

      {`${message.username}: ${message.text}`}

      16 |
      • 17 | ))} 18 |
    19 | ); 20 | }; 21 | 22 | MessageHistory.propTypes = { 23 | messages: PropTypes.array.isRequired, 24 | user: PropTypes.object.isRequired, 25 | }; 26 | 27 | export default MessageHistory; 28 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/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 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Solution/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Starter/.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 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "prop-types": "^15.8.0", 10 | "react": "^17.0.2", 11 | "react-dom": "^17.0.2", 12 | "react-scripts": "5.0.0", 13 | "web-vitals": "^2.1.2" 14 | }, 15 | "scripts": { 16 | "start": "react-scripts start", 17 | "build": "react-scripts build", 18 | "test": "react-scripts test", 19 | "eject": "react-scripts eject" 20 | }, 21 | "eslintConfig": { 22 | "extends": [ 23 | "react-app", 24 | "react-app/jest" 25 | ] 26 | }, 27 | "browserslist": { 28 | "production": [ 29 | ">0.2%", 30 | "not dead", 31 | "not op_mini all" 32 | ], 33 | "development": [ 34 | "last 1 chrome version", 35 | "last 1 firefox version", 36 | "last 1 safari version" 37 | ] 38 | } 39 | } 40 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L4. Hooks/1. State Management Recap/Starter/public/favicon.ico -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Starter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Starter/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 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Starter/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .container { 6 | display: flex; 7 | margin-top: 5%; 8 | } 9 | 10 | .chat-window { 11 | text-align: center; 12 | width: 500px; 13 | height: 100%; 14 | margin: auto; 15 | border: 15px solid #2eb9ce; 16 | padding: 20px; 17 | border-radius: 10px; 18 | color: #019ad2; 19 | font-size: 1.2em; 20 | } 21 | 22 | .centered { 23 | position: fixed; 24 | left: 50%; 25 | } 26 | 27 | .App-logo { 28 | animation: App-logo-spin infinite 20s linear; 29 | height: 80px; 30 | } 31 | 32 | .App-header { 33 | background-color: #222; 34 | height: 150px; 35 | padding: 20px; 36 | color: white; 37 | } 38 | 39 | .App-title { 40 | font-size: 1.5em; 41 | } 42 | 43 | .App-intro { 44 | font-size: large; 45 | } 46 | 47 | @keyframes App-logo-spin { 48 | from { 49 | transform: rotate(0deg); 50 | } 51 | to { 52 | transform: rotate(360deg); 53 | } 54 | } 55 | 56 | .message-list { 57 | list-style-type: none; 58 | height: 80%; 59 | border: 1px solid; 60 | text-align: left; 61 | min-height: 400px; 62 | border-radius: 10px; 63 | padding-top: 1em; 64 | } 65 | 66 | .name { 67 | font-size: 3em; 68 | } 69 | 70 | h2 { 71 | font-size: 2.2em; 72 | text-align: center !important; 73 | } 74 | 75 | .input-group, 76 | .input-group-append { 77 | border-radius: 10px; 78 | color: #2eb9ce !important; 79 | } 80 | 81 | .submit-button { 82 | background-color: #2eb9ce; 83 | color: black; 84 | } 85 | 86 | .submit-button:hover, 87 | .submit-button:active, 88 | .submit-button:focus { 89 | border-color: #2eb9ce; 90 | color: black; 91 | outline: none !important; 92 | box-shadow: none; 93 | background-color: #3498db; 94 | } 95 | 96 | .form-control, 97 | .form-control:focus { 98 | border-color: #2eb9ce; 99 | outline: 0 !important; 100 | -webkit-box-shadow: none; 101 | box-shadow: none; 102 | color: black; 103 | } 104 | 105 | .sender { 106 | color: #29a979; 107 | } 108 | 109 | .recipient { 110 | color: #019ad2; 111 | } 112 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Starter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Starter/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 | -------------------------------------------------------------------------------- /L4. Hooks/1. State Management Recap/Starter/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Instructions.md: -------------------------------------------------------------------------------- 1 | # State and Side Effects 2 | 3 | In this exercise, you'll implement code to run a function at the time a component has been mounted. You'll also recap what you've learned in the course so far, including the one of the trickier parts of React: managing state. Recall that React will re-render the UI when state changes inside of the component, as well as any time the value of the component's props changes. To begin: 4 | 5 | 1. Run `npm install` to install dependencies. 6 | 2. Run `npm start` to start the development server. 7 | 3. Open `./src/App.js` to review the provided starter code containing a template with dummy data. 8 | 9 | # Task 10 | 11 | Create a game that displays an equation of the form X+Y+Z=P. Note that X, Y, and Z represent random numbers, and P represents the proposed answer. The user should be able to answer whether it is true that the sum of X, Y, and Z equals the proposed answer P. 12 | 13 | The user gets a point for each question they answer correctly. The score is displayed in this format: [number of correct answers]/[number of questions answered]. Every time the user answers a question, a new question that uses randomly generated numbers is displayed. 14 | 15 | # Hint 16 | 17 | Whenever the game initializes, it should create a new question (i.e., equation) to display to the user. Which hook can you leverage to run this effect? 18 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/.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 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L4. Hooks/2. State and Side Effects/Solution/public/favicon.ico -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/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 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | color: #306482; 4 | } 5 | 6 | .App-logo { 7 | animation: App-logo-spin infinite 20s linear; 8 | height: 80px; 9 | } 10 | 11 | .App-header { 12 | background-color: #222; 13 | height: 150px; 14 | padding: 20px; 15 | text-align: center; 16 | color: white; 17 | } 18 | 19 | .App-title { 20 | font-size: 1.5em; 21 | } 22 | 23 | .App-intro { 24 | font-size: large; 25 | } 26 | 27 | @keyframes App-logo-spin { 28 | from { 29 | transform: rotate(0deg); 30 | } 31 | to { 32 | transform: rotate(360deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import logo from "./logo.svg"; 3 | import "./App.css"; 4 | import Score from "./Score"; 5 | import Game from "./Game"; 6 | 7 | const App = () => { 8 | const [correctAnswer, setCorrectAnswer] = useState(0); 9 | const [numQuestions, setNumQuestions] = useState(0); 10 | 11 | const handleAnswer = (answerWasCorrect) => { 12 | if (answerWasCorrect) { 13 | setCorrectAnswer(correctAnswer + 1); 14 | } 15 | setNumQuestions(numQuestions + 1); 16 | }; 17 | 18 | return ( 19 |
    20 |
    21 | logo 22 |

    ReactND - Coding Practice

    23 |
    24 |
    25 |

    Mental Math

    26 | 27 | 28 |
    29 |
    30 | ); 31 | }; 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/src/Game.js: -------------------------------------------------------------------------------- 1 | import { useState, useEffect } from "react"; 2 | 3 | const Game = (props) => { 4 | const [value1, setValue1] = useState(null); 5 | const [value2, setValue2] = useState(null); 6 | const [value3, setValue3] = useState(null); 7 | const [proposedAnswer, setProposedAnswer] = useState(null); 8 | 9 | // Calls makeNewQuestion() when the component has been mounted, then sets values 10 | useEffect(() => { 11 | let valuesArray = makeNewQuestion(); 12 | setValue1(valuesArray[0]); 13 | setValue2(valuesArray[1]); 14 | setValue3(valuesArray[2]); 15 | setProposedAnswer(valuesArray[3]); 16 | }, []); 17 | 18 | const makeNewQuestion = () => { 19 | const value1 = Math.floor(Math.random() * 100); 20 | const value2 = Math.floor(Math.random() * 100); 21 | const value3 = Math.floor(Math.random() * 100); 22 | 23 | const proposedAnswer = 24 | Math.floor(Math.random() * 3) + (value1 + value2 + value3); 25 | 26 | return [value1, value2, value3, proposedAnswer]; 27 | }; 28 | 29 | const refresh = (newValuesArray) => { 30 | setValue1(newValuesArray[0]); 31 | setValue2(newValuesArray[1]); 32 | setValue3(newValuesArray[2]); 33 | setProposedAnswer(newValuesArray[3]); 34 | }; 35 | 36 | const handleAnswer = (event) => { 37 | const newValuesArray = makeNewQuestion(); 38 | refresh(newValuesArray); 39 | const answerWasCorrect = evaluateAnswer(event.target.name); 40 | props.handleAnswer(answerWasCorrect); 41 | }; 42 | 43 | const evaluateAnswer = (givenAnswer) => { 44 | const corrAnswer = value1 + value2 + value3; 45 | 46 | return ( 47 | (corrAnswer === proposedAnswer && givenAnswer === "true") || 48 | (corrAnswer !== proposedAnswer && givenAnswer === "false") 49 | ); 50 | }; 51 | 52 | return ( 53 |
    54 |
    55 |

    {`${value1} + ${value2} + ${value3} = ${proposedAnswer}`}

    56 |
    57 | 60 | 63 |
    64 | ); 65 | }; 66 | 67 | export default Game; 68 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/src/Score.js: -------------------------------------------------------------------------------- 1 | const Score = ({ numCorrect, numQuestions }) => { 2 | return ( 3 |

    4 | Your Score: {numCorrect}/{numQuestions} 5 |

    6 | ); 7 | }; 8 | 9 | export default Score; 10 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/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 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Solution/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/.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 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L4. Hooks/2. State and Side Effects/Starter/public/favicon.ico -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/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 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/src/App.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | color: #306482; 4 | } 5 | 6 | .App-logo { 7 | animation: App-logo-spin infinite 20s linear; 8 | height: 80px; 9 | } 10 | 11 | .App-header { 12 | background-color: #222; 13 | height: 150px; 14 | padding: 20px; 15 | text-align: center; 16 | color: white; 17 | } 18 | 19 | .App-title { 20 | font-size: 1.5em; 21 | } 22 | 23 | .App-intro { 24 | font-size: large; 25 | } 26 | 27 | @keyframes App-logo-spin { 28 | from { 29 | transform: rotate(0deg); 30 | } 31 | to { 32 | transform: rotate(360deg); 33 | } 34 | } 35 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/src/App.js: -------------------------------------------------------------------------------- 1 | import logo from "./logo.svg"; 2 | import "./App.css"; 3 | 4 | const value1 = Math.floor(Math.random() * 100); 5 | const value2 = Math.floor(Math.random() * 100); 6 | const value3 = Math.floor(Math.random() * 100); 7 | const proposedAnswer = Math.floor(Math.random() * 3) + value1 + value2 + value3; 8 | const numQuestions = 0; 9 | const numCorrect = 0; 10 | 11 | const App = () => { 12 | return ( 13 |
    14 |
    15 | logo 16 |

    ReactND - Coding Practice

    17 |
    18 |
    19 |

    Mental Math

    20 |
    21 |

    {`${value1} + ${value2} + ${value3} = ${proposedAnswer}`}

    22 |
    23 | 24 | 25 |

    26 | Your Score: {numCorrect}/{numQuestions} 27 |

    28 |
    29 |
    30 | ); 31 | }; 32 | 33 | export default App; 34 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/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 | -------------------------------------------------------------------------------- /L4. Hooks/2. State and Side Effects/Starter/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Instructions.md: -------------------------------------------------------------------------------- 1 | # Side Effect Cleanup 2 | 3 | When trying to updating state on an unmounted component, React will raise a warning in the console. This is true in the case of many asynchronous operations. In this exercise, you'll practice using the `useEffect` hook with cleanup. To begin: 4 | 5 | 1. Run `npm install` to install dependencies. 6 | 2. Run `npm start` to start the development server. 7 | 3. Visit `http://localhost:3000/` and demo the application. Be sure than the console is open (i.e., in Chrome DevTools if using Chrome). The text at the bottom will automatically change from "red" to "green" in 3000 milliseconds. If "Toggle" is clicked before the bottom text changes from "red" to "green", you will see a warning in the console: 8 | 9 | "Warning: Can’t perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function." 10 | 11 | Note: If the text is already "green", refresh the page to try again. 12 | 13 | 4. Open `./src/App.js` and examine how it works (you won't need to modify anything in this file). 14 | 5. Open `./src/ChildComponent.js` and examine how it works (\*see answer below). 15 | 6. Update the logic in the `useEffect` hook in `./src/ChildComponent.js` to include side effect cleanup. That is, even with `setTimeout` delay of 3000 milliseconds, clicking "Toggle" at any time would _not_ cause React to raise the warning. 16 | 17 | # Explanation for Step 5 (Above) 18 | 19 | When the user clicks "Toggle" before 3000 milliseconds is up, the component is unmounted from the DOM. Because `setTimeout` is asynchronous in nature, the `setColor()` function will try to set state on an unmounted component. This will prompt React to show a warning in the console. 20 | 21 | # Documentation 22 | 23 | For more on side effects with cleanup, check out the article in the official React documentation: 24 | 25 | https://reactjs.org/docs/hooks-effect.html#effects-with-cleanup 26 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/.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 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L4. Hooks/3. Side Effect Cleanup/Solution/public/favicon.ico -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/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 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/src/App.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import ChildComponent from "./ChildComponent"; 3 | import "./App.css"; 4 | 5 | const App = () => { 6 | const [currentToggle, setCurrentToggle] = useState(true); 7 | 8 | const handleToggle = (event) => { 9 | event.preventDefault(); 10 | setCurrentToggle(!currentToggle); 11 | }; 12 | 13 | return ( 14 |
    15 |

    16 | If "Toggle" is clicked before the text below turns "green", you'll see 17 | an error in the console. 18 |

    19 | 20 |

    (note: refresh the page to start over if green)

    21 | 22 | 23 | 24 | {currentToggle && } 25 |
    26 | ); 27 | }; 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/src/ChildComponent.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | 3 | function ChildComponent() { 4 | const [color, setColor] = useState("red"); 5 | 6 | // An alternative solution: move `color` state to the parent component 7 | // and pass down that data as a prop to . 8 | // Since (in this example) is always mounted to the DOM, 9 | // no side effect cleanup would be necessary. 10 | 11 | useEffect(() => { 12 | let unmounted = false; 13 | 14 | setTimeout(() => { 15 | if (!unmounted) { 16 | setColor("green"); 17 | } 18 | }, 3000); 19 | 20 | return () => { 21 | unmounted = true; 22 | }; 23 | }, []); 24 | 25 | return

    {color}

    ; 26 | } 27 | export default ChildComponent; 28 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/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 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Solution/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/.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 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "exercise", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@testing-library/jest-dom": "^5.16.1", 7 | "@testing-library/react": "^12.1.2", 8 | "@testing-library/user-event": "^13.5.0", 9 | "react": "^17.0.2", 10 | "react-dom": "^17.0.2", 11 | "react-scripts": "5.0.0", 12 | "web-vitals": "^2.1.2" 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": [ 22 | "react-app", 23 | "react-app/jest" 24 | ] 25 | }, 26 | "browserslist": { 27 | "production": [ 28 | ">0.2%", 29 | "not dead", 30 | "not op_mini all" 31 | ], 32 | "development": [ 33 | "last 1 chrome version", 34 | "last 1 firefox version", 35 | "last 1 safari version" 36 | ] 37 | } 38 | } 39 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/udacity/React-Fundamentals-Exercises/691a50e4b3b19c3298d5e30222691fcfd0a4230f/L4. Hooks/3. Side Effect Cleanup/Starter/public/favicon.ico -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 12 | 13 | 17 | 18 | 27 | React App 28 | 29 | 30 | 31 |
    32 | 42 | 43 | 44 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/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 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/src/App.css: -------------------------------------------------------------------------------- 1 | .container { 2 | display: flex; 3 | flex-direction: column; 4 | align-items: center; 5 | } 6 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/src/App.js: -------------------------------------------------------------------------------- 1 | import { useState } from "react"; 2 | import ChildComponent from "./ChildComponent"; 3 | import "./App.css"; 4 | 5 | const App = () => { 6 | const [currentToggle, setCurrentToggle] = useState(true); 7 | 8 | const handleToggle = (event) => { 9 | event.preventDefault(); 10 | setCurrentToggle(!currentToggle); 11 | }; 12 | 13 | return ( 14 |
    15 |

    16 | If "Toggle" is clicked before the text below turns "green", you'll see 17 | an error in the console. 18 |

    19 | 20 |

    (note: refresh the page to start over if green)

    21 | 22 | 23 | 24 | {currentToggle && } 25 |
    26 | ); 27 | }; 28 | 29 | export default App; 30 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/src/ChildComponent.js: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | 3 | function ChildComponent() { 4 | const [color, setColor] = useState("red"); 5 | 6 | useEffect(() => { 7 | setTimeout(() => setColor("green"), 3000); 8 | }); 9 | 10 | return

    {color}

    ; 11 | } 12 | export default ChildComponent; 13 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 5 | sans-serif; 6 | -webkit-font-smoothing: antialiased; 7 | -moz-osx-font-smoothing: grayscale; 8 | } 9 | 10 | code { 11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', 12 | monospace; 13 | } 14 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/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 | -------------------------------------------------------------------------------- /L4. Hooks/3. Side Effect Cleanup/Starter/src/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Workspace Exercises for React Fundamentals 2 | 3 | This repo contains the code for the in-class Workspace exercises 4 | --------------------------------------------------------------------------------