Workouts – Learn by doing real developer projects
source link: https://real.dev/workouts
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Unlock for $9.99
Description
Bored of reading React tutorials? Let's be honest, reading some random code does not equal to being able to do it.
In this track, we're building a stock market app using React. You'll be able to get your hands dirty with the following topics
- How to prevent re-render (or what it even means)
- How to handle errors properly in React
- How to fetch data from a server
- How to pass data among components at different levels of the render tree
- Finally, we're going to try the new hottie: Hooks, and see the difference in a real project
This track consists of the following 5 tasks. You have a basic version of the app, with some polished components, like a stock price chart view, a basic stock list, and a detail view. The previous frontend dev is only good at UI, so he filled the code with some hard coded data. Your journey as the frontend guru of the team starts here.
Screenshot
Task1
Get Those Data
Backend guy just told you the API is ready. Instead of some fake data, you should plug the data into your view now
Unlock to solve
Task2
Make Stuff Faster
The page is super slow! Users are suffering, your attention is needed
Task3
Oops-y
The server is throwing errors on one of the stock. You should handle that properly for the user
Task4
Data Glitch
A user reports the data between the list view and detail view is out of sync, fix it!
Task5
Hook things up
Your boss says we are now using Hooks. So you better get started.
Unlock for $9.99
Description
Are you new to React and want to be a awesome React developer? This is a great start! The best way to learn a new thing is by doing it. We will handhold you to start learning by doing a project.
In this track, we're building a calculator app using React. All instructions and test cases are covered in the project. Believe us, not every so-called React developer can get this done. You'll be able to get your hands dirty with the following topics
- Build a class component and a functional componenent
- Use controlled concomponent to manange data in UI
- Build and play with React life cycles to understand how it works
- How to interact between modules and reuse existing components
- Finally, we cover testings to properly test your own components
This track consists of the following 5 tasks. You're asked to implement features step by step. In the end, you'll learn and be able to build a fully-fledged project - Calculator in React! Time to get your hands dirty and start coding!
Screenshot
Task1
Create Your First Component
Create your first class component and functional component to kick start
Unlock to solve
Task2
Build Your UI with Data
Hook up your UI element with data in the React states
Task3
Why it doesn't update
You'll properly manage your app by understanding life cycles in React
Task4
Interact with Multiple Modules
Organize your code in a modern way. Orchestrate your codes with multiple files.
Task5
Test Your App
Add appropriate tests to your app so that future develoeprs won't mess up with it
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK