Table of Contents
It seems like everybody and everything is looking for someone with React expertise. Given how popular React has become, a common question I get goes something like this:
My answer typically looks like this (and yes, it is actually longer):
In this article, I want to dive a bit deeper into the answer I provided and a bit of my thought process behind it.
Onwards!
React is a strange looking creature. While it looks like its own programming language, it is really just another JavaScript library at the end of the day:
This means that it still builds on top of and relies on HTML, CSS, and JS for all its functioning. Here is why this detail is important. There are a number of things you can exclusively do inside the React layer when learning and working on simple examples. As you get more familiar with React and start to build more complex applications, you will need to access the traditional HTML, CSS, and JavaScript layers as well, often mixing and matching React and traditional web code seamlessly as highlighted in the following weather app (click the Play icon to watch the video of the app in action):
A simple weather app built in @reactjs using the @OpenWeatherMap API. Details and source here: https://t.co/bJ3KTU6EVI ⛅️ #webdev #ui pic.twitter.com/INI6aId2xA
— KIRUPA 🍊 (@kirupa) April 18, 2019
This app is a good example of something that is in the medium complexity bucket. React plays a big role in how the UI is structured, but the actual definition of the content, the layout, the colors, and the logic for fetching the data, and so on is defined in a combination of HTML, CSS, and JavaScript. You can take a look at this weather app's source code to get a better idea of what to expect.
This really is the million dollar question, and the answer depends on how much you know right now. If you are already familiar with the basics and can build a simple web page with some interactivity, then you should probably be in good shape to get started with React and be successful in learning it. If you aren’t too familiar with HTML or CSS, you may have some difficulty getting your app to look right. That doesn't immediately block you from learning React. Now, if you have little to no JavaScript knowledge, then that is a different story. While I would prefer you learn everything in my free JavaScript 101 course, if I had to selectively list some topics you should be familiar with, they would be: Working with let and const Variables, JavaScript Objects, Closures, Using Classes in JavaScript, and Arrow Functions. There may be a few other things to learn or brush up on, but you can learn those things on an as-needed basis.
To figure out where your current knowledge of HTML, CSS, and JS stands, take a look at the first couple of React tutorials and see if you are able to make progress and understand what is happening. If you are getting stuck a little too much, then I would encourage you to take a detour and learn the JS basics first. You will be glad you did.
A big factor in how successful you will be in learning React depends on where exactly you are learning it from. If you are learning from a resource whose introductory React tutorial expects you to know how to setup your build environment, use all the latest JavaScript (aka ES6+) features, and perform other complex tasks, that complexity can be overwhelming if you don’t have some prior familiarity with all of these requirements:
If you are learning instead from a resource that doesn’t introduce all this complexity (like the React for Beginners tutorials found here) at the very beginning, you will have a much easier time ramping:
There is no right or wrong approach here. The end result of both approaches when you reach an arbitrary deadline of Day 100 is that you still learn the important parts of React you need to be dangerous. The only difference is in the steepness of the path you take to get there. You should ensure you pick a resource that matches your current level of HTML, CSS, and JavaScript understanding so that you learn at a pace that you are happy with.
In an ideal world where you have no obligations and plenty of free time, going deep and broad on HTML, CSS, and JS first before learning React is the right thing to do. Too bad we don’t live in an ideal world. You may be asked to suddenly jump head first into an existing React code base to help. You may be applying for a job that needs React skills, and you want to learn as much as quickly as you can to pass the interview. Or you may just have heard a lot about React and you want to learn more about it. Whatever your reason, my goal and the goal of many others who spend time creating learning resources isn’t to discourage you from learning something new. You should just be aware of what issues you may encounter if you jump into React without first knowing some common HTML, CSS, and JS concepts.
Next tutorial: Introducing React
Just a final word before we wrap up. If you have a question and/or want to be part of a friendly, collaborative community of over 220k other developers like yourself, post on the forums for a quick response!
