When learning a new technology, especially frameworks, beginners often fall in the trap of trying to bit more than they can chew. To learn React, instead of writing one fully-featured application, we propose building several tiny applications that implement simple ideas. The component-based nature of React plays really well with this approach, tiny applications can be as small as a single component or they can later become part of a bigger application. Either way, you'll get tons of practice by being exposed to different problems and patterns.
Tiny applications should be achievable goals, small projects that you can start and finish in a matter of days and you can potentially improve or scale later. Finishing a project, no matter how small, will give you momentum and the boost of confidence that you need to keep developing your skills.
Another great benefit of building several tiny apps is that you get to show future employers a wider range of skills by choosing to use different libraries and approaches.
If you're not feeling too confident, we recommend building a to-do list and gradually building up to more complicated functionality (similar to the lecture example).
Constrain yourself to just 1 or 2 features. Only think about extending your app after implementing the core idea. Think of a common problem that you face daily or an app on your phone that you don't quite like how it works. What could you do better?
-
To-Do List. Show tasks needing to be done, be able to add a new one, delete tasks. Maybe rank by due-date?
-
Noughts and Crosses. Track scores - could you make this so you could programmatically make different size boards?
-
Recipe idea generator: plug in some ingredients and get a random algorithmically created method.
-
Hangman. Choose from different categories, keep track of scores... how will you represent it graphically? (You could look into svg, html5 canvas, or just find some images online)
-
A resource management game - have a look at Universal Paperclips for inspiration (think how you will need to use setTimeout / setInterval).
-
Build a Calculator app that replicates the functionality and looks of your operating system's calculator. You could head into scientific territory if you feel brave...
We've attached a checklist that applies to all React project development. There will be a few things you don't know about yet so you can ignore those steps; for now, the most important things to think about are planning out your app, then constructing a static version with no method or functionality, then making it do stuff!
REMEMBER: Commit changes after finishing a meaningful unit of work (a component, a feature of functionality, a successful refactor) never hurt anyone.
Use create-react-app to bootleg your project. We recommend you do this with npx create-react-app <project-name> - this means you don't need to globally install create-react-app and risk it becoming outdated. More on npx.
The idea for React tiny apps comes from the following article by Andrew Farmer: