Published in ·
--
If you have been learning web development for a while, you might have heard of the popular JavaScript front-end library called React. As a motivated beginner, you may be wondering: when should I finally start learning it and what should I learn before React?
I had the same questions for many months, and when I finally got to learn React in a coding bootcamp, I saw two types of students:
- The ones that got excited about the new capabilities that the framework could provide, and…
- The ones that struggled with the new concepts so much, they got discouraged from continuing with web development entirely
In this article, I want to provide a comprehensive checklist that will help you decide whether or not you are ready for React. By no means this article was written to stop you from learning React — if you don’t know 100% of the concepts described in this article, but still feel highly excited about React — go for it!
- HTML and CSS concepts
- Basic programming concepts
- JavaScript DOM manipulation
- ES6+ syntax
- Advanced programming concepts
- Additional tools
- What to do now?
This is the foundation of web development. You should at least know how and when to use:
- Different HTML semantic tags
- How to style elements with CSS using inline styles, styles declared in the head or in separate CSS files
- Element block model
- Set up the page layout with either floats or flexbox
- Position elements with position: absolute and fixed
- Use forms and inputs
- Use images using both <img /> tag and background-image property
HTML and CSS are only good for the static content and design, but what about the real programming? Thus, you should also be extremely comfortable with the basic programming concepts, and I should emphasize the word extremely here. Why? Because whatever you can do with React, you can do with pure JavaScript. React is a great tool that makes your development workflow faster, consistent and more maintainable. So, if you really want to appreciate React, try to build things without it.
- Variables
- Assignment operators
- Math operators
- Logical operators && conditionals
- Data types and structures (booleans, numbers, strings, arrays, objects, etc.)
- Loops (while, do while, for)
- Functions
- Primitive vs reference data types
Is this enough to learn before tackling React? Not really. Once you know the basic programming syntax, which can be JavaScript or Python, you should familiarize yourself with manipulating the Document Object Model (DOM). For this, you will eventually need to learn JavaScript. The DOM is basically a tool that describes the structure of an HTML page.
Although in most cases React will manipulate the DOM for you, you should know what’s going on under the hood.
- Knowing the window and document objects
- Traversing and modifying the DOM
- Listening to various DOM events
As soon as you are familiar with the basic JavaScript syntax, it’s time to refresh the latest ES6+ JavaScript syntax. React community uses the ES6+ syntax extensively, thus you will be expected to use it as well.
- let/const vs var
- Arrow functions
- ES6 Classes
- Spread operator
- Array and Object Destructuring
- Array functions (map, filter, reduce etc.)
- ES6 Imports and Exports
Everything so far looks pretty simple, doesn’t it? This is where it gets really interesting. If you master the following concepts, you can truly call yourself a developer and feel like a fish in a barrel with React. In fact, you might already have touched them while drilling your way up to this point. Let’s take a look:
Asynchronous JavaScript: XmlHttpRequest, Fetch, JSON data structure, Callbacks and Higher-Order functions, Promises, JavaScript Call Stack, Event loop, Heap, Queues, Browser API’s
- HTTP basics
- Object-Oriented Programming
- Popular design patterns like Modular, Singleton, Factory, Observer, State Pattern etc.
Please tell me that’s all I need to learn before going for React? Yes! Finally, you are now 100% ready to start learning React.
Along with the concepts, you will most likely have used the following tools while learning how to deploy your web apps.
- Command Line
- Git
- NPM
How did you do? Hopefully, you are excited to hit the learning road. If you are missing some of the concepts, it is totally fine! That’s why you are reading this article.
Now that you know what to learn, it’s time to find out where you can get the best online courses to prepare yourself for React. Among the free material, I would recommend starting with the freeCodeCamp, where you can learn the basics of HTML, CSS and JavaScript algorithms. There is also a highly helpful YouTube channel about JavaScript called Traversy Media. It has a ton of modern JavaScript tutorials aimed specifically for making web apps. After the freeCodeCamp and Traversy Media, take a 30-day-JavaScript-Challenge that will take your creativity with JavaScript to the next level. By the time you complete the above, you will be a well-rounded front-end developer ready to tackle React.
Alternatively, you can purchase a course or two on Udemy. This is what I did to learn all of the above and I feel it gave me the most complete knowledge of JavaScript. You can sort Udemy courses by popularity and ratings, and choose whichever one you like the most.
Still not sure what Udemy course to take? You can follow my steps and take the course by Brad Traversy, the creator of Traversy Media YouTube channel. The course covers pretty much everything I mentioned in this post: Modern JavaScript From The Beginning (affiliate link).
P.S. Do not buy a Udemy course if it costs more than $30. They often have discounts, and you can buy a course for less than $15.
How did you find this article? Share your thoughts in the comments and add me in social media!
