React Stock Market
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
Task 1
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
Task 2
Make Stuff Faster
The page is super slow! Users are suffering, your attention is needed
Task 3
Oops-y
The server is throwing errors on one of the stock. You should handle that properly for the user
Task 4
Data Glitch
A user reports the data between the list view and detail view is out of sync, fix it!
Task 5
Hook things up
Your boss says we are now using Hooks. So you better get started.
React Calculator
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
Task 1
Create Your First Component
Create your first class component and functional component to kick start
Unlock to solve
Task 2
Build Your UI with Data
Hook up your UI element with data in the React states
Task 3
Why it doesn't update
You'll properly manage your app by understanding life cycles in React
Task 4
Interact with Multiple Modules
Organize your code in a modern way. Orchestrate your codes with multiple files.
Task 5
Test Your App
Add appropriate tests to your app so that future develoeprs won't mess up with it