Solutions: 🙋
Display simple JSX
https://codepen.io/angelo_jin/pen/xxXrZLd
Display array of users to browser
https://codepen.io/angelo_jin/pen/wvreMpZ
Show/Hide Element on Screen
https://codepen.io/angelo_jin/pen/abLwyrL
2 way data binding in ReactJS
https://codepen.io/angelo_jin/pen/yLzvMop
Disable a button
https://codepen.io/angelo_jin/pen/dyVmyYz
Update the parent state
https://codepen.io/angelo_jin/pen/KKXoKgO
Dynamically add child components (React Children)
https://codepen.io/angelo_jin/pen/MWEVJNb
Sum of Two Numbers
https://codepen.io/angelo_jin/pen/BawrWzy
Create Counter App 🕒
https://codepen.io/angelo_jin/pen/yLzKMXX
Fetch data from an API
https://codepen.io/angelo_jin/pen/zYEWZdW
-
Style A Header Based On Designs
Tasks: Implement the header based on the designs. The navigation links should point to /, /products, /documentation, and /pricing. The "Open Dashboard" link already exists but needs to be adjusted to match the designs. -
Toggle A Modal Tasks: Implement the modal UI. The "Cancel" button should close the modal and the "Open Email App" should open the user's email client. The modal should open when the user clicks the contact button. Don’t use a modal library.
- FocusableInput(easy)
- ToggleMessage(easy)
- TextInput(easy)
- TodoList(easy)
- Username(mid)
- GroceryApp(mid) Cards Widget, Error Catcher, Product Rating, Click Button, Email Input, List Wrapper, Subscription, Login Form, Product Search, Async Paragraph, Shopping List, Pet Form, Tooltip Component, Simple Calculator, Tab Strip, Theme Context Switcher, Player Status, Reorder, Contact Form, Email Form, Post Comment, Details.
- feed
For each page you will need to fetch this JSON feed feed/sample.json, then:
Display the first 21 entries
Where the entry has a releaseYear attribute value >= 2010
Sorted by the title attribute value in ascending alphanumeric order - autoComplte
- infinite scroll
- dragable
- component recursive rendering
- Tab
- Tree component
- Timer components
npm install @reduxjs/toolkit react-redux -S