Learning how to become a confident React developer takes hard work. But not knowing the right way to become one can make it much harder.
Learning React doesn't have to be a chore.
Let's break down the 10 steps that will make the time and effort you put into becoming a React developer easier and more fun. And they'll help you deliver consistent, career-changing results along the way.
If you want to watch this article as an interactive video (along with some extra bonuses), be sure to check out the 3-day React email course.
Let's get started!
Step 1. Commit to 4-5 hours of coding per weekday
The most important factor in deciding how soon you will be able to learn React is time, and how you use it.
You need to keep a regular schedule of coding throughout the week. Without this, it will be almost impossible to reach your coding goals on time. The truth is most people will never excel at React because they cannot dedicate enough time and focus to coding.
If you plan on coding every day from nine to five once you’re on the job, you need to have a similar schedule for yourself while learning. Ideally, you should spend around four to five hours of focused coding every weekday.
Why exactly four to five hours? I'll cover that in step 3.
Step 2. Spend your time doing focused coding
What do I mean by focused coding? Focused coding is coding without distraction. In a separate quiet space, where you can sit upright at your computer, and focus entirely on the process of coding.
During this time, much of what you’re doing will not be 100% coding. As you code, you’ll be reading documentation, reading an article, taking notes, and so on.
If you’re focused on your work, four to five hours should be all that you need. The idea of coding 12 hours a day is not realistic, especially if you are getting started.
If you can spend more time and you do feel focused, go ahead. But it’s very hard to code and consume new information while you’re already tired.
Step 3. Use the Pomodoro technique for optimal time management
There is a special technique that will help you make the most out of that four to five hours. It’s called the Pomodoro technique. It’s an approach that’s made for optimal productivity and it consists of working in 25 minute periods at a time.
You start your timer and after each period, or pomodoro, you take a five minute break. During this break, get up from your chair. Have something to drink. Adjust your focus away from your computer or your phone. In short, take a real mental and physical break from what you’re doing.
Taking breaks with purpose and giving your brain and body a rest will help you make the most of your time. Instead of trying to work for hours on end. And after every fourth 25 minute period or pomodoro, you take a longer 15 minute break.
If you do 8-10 pomodoros of solid work, you will have a very productive day, guaranteed. I use this technique every day I code and it is the best technique to ensure consistent results day-in and day-out. Consistent results are the only thing that is going to make the difference between learning React in months versus a year or more.
There are many free pomodoro timers that you can find online. I’ll link to a couple of them below:
Be Focused - Pomodoro Timer for Mac
Online Pomodoro Timer - Pomofocus
Step 4. Read through ReactJS.org from front to back
We’ve talked about how to work and the amount of time to spend working, but how do you approach learning the skills needed to be a React developer?
Many developers would recommend diving right into whatever you can find. To look through various websites, articles, YouTube videos, and ebooks. In fact, there’s one best place to go to first to start working with and learning React. And that is reactjs.org.
Go through their documentation from front to back. It’s the best guide that you will find online, and every working React developer relies upon it. It’s guaranteed to be up to date, will get you familiar with the concepts you need, and best of all, it'll give you a lot of examples to work with. As you read through the site, take the code examples they provide and run them yourself.
How do you run the React code you find? Instead of trying to create a React application on your own computer, create a React app in the browser.
To create a new React app in two seconds, go to react.new. It will create a brand new React app in your browser that you can start working with.
Then start experimenting with examples from the React.js documentation. On your own, type in the code from the guides, run it, and see what works and what doesn’t.
Instead of reading a book and being told what code does, run the code yourself. See what happens when you try different things. To test the boundaries of React and what it can do is the best thing possible to understand how it works.
Step 5. Start small. Build small apps and learn to add features as you go
Once you have gone through the documentation at reactjs.org, start building small things. Try to build a todo application from scratch. If not a todo application, a basic CRUD application, a note-taking application, and so on. Make a complete app that consists of simple, clearly divisible parts.
As you build your project, you'll encounter the questions all React developers ask themselves throughout their app planning:
How do I go about making this app? Are there any extra packages I need besides React?
What basic features do I need to build out?
What components will I need and how are they organized?
Where will my app data live?
Sign up for a Github account if you don’t have one already. Not only to save your React projects to your Github for easy access, but it will allow you to search for how other people built similar apps themselves.
Once you have something small you’ve built, add more features. If you’re making a todo app, you might ask:
How can I search through todos?
How can I save my todos between visits?
How do I add authentication to my todo app (to make it for only authenticated users)?
How do I add different pages to my app?
How do I style it with a component library like Material UI?
Add new features based around what you want to learn. The possibilities are endless and will drive your learning forward.
Step 6. Asking questions is essential. Always ask questions.
Be aware that it’s fine to search the web when you have a question or when you're stuck in your coding. It’s what all React developers do by searching sites like StackOverflow or Github. Asking your own questions is essential.
Make sure to keep track the questions you ask. Whenever I have a problem with a React project that I need to solve, I write it down and search for the answer. When I find the solution to it, I make sure to record the answer and bookmark it in my browser for future reference.
To record your questions and the answers you find for them is essential. If you have a problem once, I can almost guarantee that you will run into the same problem sometime in the future. Recording your questions and answers will not only serve as a great resource, but also save you large amounts of time and frustration.
Step 7. Actively coding is your key to success
This approach we’ve been talking about is very different than reading a book or article.
Reading or consuming information alone is called passive learning and is much slower. Actively coding yourself is active learning.
Active learning is what will drive you to code more, ask questions, fail more often in the short term, but succeed and grow faster in the long term.
Step 8. Build apps similar to the ones you use daily (and know well)
After building your todo app, ask yourself can I make a small version of Twitter? Can I build a small version of Facebook or some other social network? Can I build a small version of Instagram?
Try to build something based on other apps that you use and are familiar with. You’ll be able to see that as time goes on, these applications all share similar features. Being able to see common features among apps and develop them yourself is what will take you from an average to an impressive, self-directed developer.
Step 9. Deploy your best work and put it on your resume for employers
And finally, after building larger and larger applications, make sure to put all these projects on your resume. To do that, you’ll need to deploy them to the web first.
Deploying React apps is very simple. You need only learn how to use basic hosting services like Netlify or Heroku which are free and as simple as can be.
Include links to each project on your resume as well as a description of the app and the technologies you used to build it. Doing so will immediately show the value that you can bring to potential employers.
If you’re interested in becoming an independent app developer, try turning one of these projects into an actual business. You’d be surprised how many people are able to do that. They learn React, start building projects, and turn one of them into an app or service which they sell for a profit.
Step 10. Have fun!
I'll be the first to admit it: learning React can be very frustrating. Even once you become a professional developer, it will still be very frustrating at times.
There will be problems you come across as you become a skilled React developer, but none that can't be overcome.
My final advice to you is to become involved with fun, engaging React projects that you want to build or be a part of. You will not only learn more easily, but discover what you like most about being a React developer. All of which will give you confidence and help take you where you want to be in your career.
.gif)
0 Comments