One great way to really get your feet wet with React is to put the documentation aside and just get down to work with a code challenge. What is a code challenge? A code challenge is a way to challenge yourself to put what you’ve learned to work with some tasks ranging from simple to complex. They’re designed to get you started with React so you can learn the basics by heart before moving to bigger products.
What are the best coding challenges for someone just getting started in ReactJS? In this guide, we’ll share the top 5 so you can master your own skills in no time.
1. Hello World
The first challenge is also the easiest. Created by Sean Groff, this is designed to get you started if you’re not sure you’re ready to even start coding. He urges you to start by creating a React app in CodeSandbox that outputs Hello World (or any other message) on the screen.
Though it might be tempting, avoid looking at the sample code until you’ve exhausted all of your resources. This is how you start to gain your own confidence.
2. Hello Visitor
The second challenge is also from Sean Groff since he has a great grasp on what skills best help newbies to React. His second challenge is to take the input from the text input field and output this input to the screen in real-time.
Again, don’t check the finished code until you’ve created your own working app. It’s really exciting to see a functional product, even if it just completes a basic action. You’ve got this!
3. Social Cards
Social cards are all over the web, so learning how to build some on your own is a great building block for any type of project where you want to display both an image and some data. See an example from Twitter below.
Here, you can break down a UI into React components. Once you have the basics of Social Cards down, you can begin to make a list of them with whatever false data you have. This is an excellent practice.
Also Read: 5 Apps To Get Better At Programming
4. Weather App
Another great type of challenge is to build a 5-day weather forecast. With this, you can just use fake, hard-coded data. It’s very similar to the Social Card app idea before, but this time you can use an image for sunny/rainy/snowy and so on as well as corresponding high and low temperatures.
To take this up a level, add the ability to click on a day and see hourly data. You can also add React Router to add routes and show the specific forecast for a specific day. If you really want to be specific, you can get a free API key from Open Weather Map for a real-time 5-day forecast to use in your app.
5. Free Code Camp
Finally, the last challenge is to use the different lessons and challenges from the Free Code Camp. This free tool walks you through the basics as well as more advanced React components. The best part is it has built-in projects and challenges for you to implement everything you learn into real-life coding examples.
To take this up a level, add the ability to click on a day and see hourly data. You can also add React Router to add routes and show the specific forecast for a specific day. If you really want to be specific, you can get a free API key from Open Weather Map for a real-time 5-day forecast to use in your app. After you can connect it to a Java log parser tool and check how your data is being processed and the app is working.
If you’ve never tried a challenge for yourself, now’s the time. This list will help you find the perfect place to start regardless of your experience level.