What you need to learn before you dive into React/React Native

Are you just starting to learn Javascript and you are already overwhelmed by those "big words" in the industry? Or you've even learned how to code in Javascript and you want to be sure if you are ready to start learning a library or a framework, then this article is for you!

What is React? What is React Native?

React is a Javacript library for building user interface, it was developed by Facebook. React lets you compose complex User Interface from small and isolated pieces of code called “components”.

React Native is an open-sourced mobile framework, it was also created by Facebook. "RN" as I love to call it, is used to develop applications for Android, iOS and Web. RN enables you to use Javascript(React) with native platform capabilities.

Enough of introduction! Let's get into the real business. As these two technologies sound attractive and it feels like you should jump into it and start learning, there are some foundations you need to make for yourself before you learn React or React Native. I am not saying without these "foundations", you won't grab React when you start learning, but in my experience, people that do this tend to struggle at it and at the end of the day, they might come back to solidify their foundation.

Let me give you a list of these key things you need to learn before explaining how to go about learning it, approximated time to spend on each and resources you can make use of.

1. HTML/CSS
2. Javascript
3. Basics of ES2015(ES6+)
4. React
5. React Native.

Sounds easy right? Yeah it is! At the same time, it is not!

Don't let that scare you, in this article, I will break down why, how, when and where you can learn these aforementioned technologies.

HTML/CSS

If you are going into web development, this two are the first technologies you will be advised to learn, and I can't stress it enough that it is important you learn them.
I will be giving you my personal steps to learn(I used this method and I have seen many people use it too).

1. Learn the basics of HTML and CSS from W3schools , this website is really great to get you started.

2. Sign up on Freecodecamp , Freecodecamp is an interactive learning web platform where there is a curriculum to follow, you practice as you learn a feature. Check it out! It is free and a very good resource to solidify your knowledge.

3. If you prefer to learn with videos, there are tons of youtube channels you can learn from. I recommend Traversy Media

4. Start building 'stuffs'. The only way to get better at coding is to experiment with the things you learn, don't just learn and feel you know it, BUILD SOMETHING!!, Real world project! I know you are already wondering why I am screaming at you, but you can't just skip that step. Luckily, Freecodecamp has a lot of projects for you to test your skills.

I feel one month or less is okay for you to get a good grasp of HTML and CSS(I am not saying you will become a Pro in one month), but you will have a solid knowledge of how these two technologies work and what you can do with them.

JAVASCRIPT

It is very important you have a good grasp of Javacript before you think of learning React. Why? React is Javascript, when you start learning React, many tutorials you will find online will assume you have the knowledge of Javascript, do not let anybody deceive you that you can know React without learning Javascript, there is no shortcut to it. Even if you manage to do that in some way, you will still always come back to learn how some things work in vanilla Javascript.
Hey Tobi, what is vanilla Javascript again??? Chill, it's just another name for Javascript, it is pure Javascript, the vanilla is just a general term to stress it, as in your normal vanilla ice-cream, without flavors.

Back to business!

Resources to learn Javascript

There are many resources online to learn Javascript that you might get lost on which to use. Yeah! I was once in your shoes!
But just like the steps I wrote for HTML/CSS. You can follow that to also learn Javascript.

1. Start with W3schools to get both the basics and advance knowledge of Javascript.

2. Hands down to Freecodecamp when it comes to Javascript, they have over 300 interactive lessons on Javascript and more than 10 Projects to build after learning.

3. For videos, I will also recommend Traversy Media .

I don't think I need to remind you that the key to understanding Javascript is to build real-world applications. Shoutout to Well Paid Geek for his constant reminder on this!
It is very important aspect of programming, you can't get better till you start doing it yourself, video tutorials might show you how to do it, but doing it yourself will build your brain muscles.

I can't really tell you a timeline to learn Javascript because you can't stop learning it! But I would say 4-6 months is a reasonable time to go through aforementioned resources.

So Tobi, is this the right time to learn React?

No chill bro, aren't you missing something? ES2015+!!!

What is ES2015+ or ES6+?
LevelUp Tuts does justice to this question in this short video.

But in summary, ES6 and above are modern version of Javascript, there are different changes such as arrow functions, the rest/spread operator, import/export statements, variable destructuring, etc. and it is essential you know them as they are used by frameworks and libraries(React in our case).

Resources to learn ES6
These days, modern website, tutorials and books teach ES6 with Javascript, as it is Javascript itself, but if you find yourself in a situation where you feel you didn't learn enough of it in any resources you used, you can check out this Mozilla tutorial or this introductory course by Academind , Traversy Media also has tons of tutorials on ES6.

I said earlier that 4-6 months should be enough to go through these resources, but it doesn't mean you will be a Pro in this period of time, nobody does unless they've been doing it for years!

"So Tobi when is the right time to dive into React?"

"The question should be how many projects have I built with Javascript?"

If your answer is not between the range of 10-infinity, then you should get to work.

Because everybody is learning React doesn't mean you have to jump into it too. Solidify your Javascript foundation, master your craft very well! It is very important! Do not rush yourself.

Spend good amount of time, practice, practice and practice.

Even if you have exhausted all the resources I have given above, try learning more in-depth Javascript.

I will recommend this Book series by Kyle Simpson and also Eloquent Javascript .

These two books are books I still reference till date.

Fast forward to a year later!!!
You can now start learning React. smiles

Some people might argue that a year is too much to learn the prerequisites to React, but it doesn't matter, so far you are confident in yourself that your Javascript knowledge is solid enough, you can start learning React.

So the big question comes in. How do I start learning React
Even though it is out of the scope of this article, but I will give brief intro to it and maybe in my next article, we will discuss this further.

Maybe you have read nice things about React Native(like me when I started) and you would rather become a full React Native developer that being a Web developer/React developer.

You might start asking, Should I learn React before React Native?

Yes! Yes!! and Yes!!!

Some people may still disagree with me on this, but the truth of the matter is React Native is still React, the only difference is that you are building for mobile for one and one is for the web.

"Okay, Tobi, I am confused here, if React Native is React, why shouldn't I just go ahead and learn React Native and start building apps instead of wasting my time on React?"

Well, the reason is that you will hardly find React Native tutorials, courses or videos that will teach you React, most will assume you have the knowledge of React. Even the official documentation of React Native does not teach you React. You should know the underlying principles before jumping into React Native.

So where should you start from?

I would say the Official documentation of React is the best place to start.

Like I said before, learning React is out of the scope of this article.
The goal of this article is to tell you the important things to learn before diving into React.

If you have any questions or contributions, let me know in the comment section.

Happy Hacking!!!