Table of Contents
Most of the people while learning javascript have a very similar question like how much javascript is necessary to learn to react. In this blog post, I will break all your myths and list down all the important topics that we need to know before you start learning React or any other framework of javascript like (Angular, Vue), etc.
1. Html and CSS
As we all know that Html and CSS are the core components of a webpage as they are used for giving the structure and the styling to the webpage. So before jumping into React one should have a good hold on writing Html and CSS code. The topics you should be well versed in are as follows :
- How to write semantic tags in Html.
- CSS selectors
- Box model
- Flexbox
- make a responsive webpage using HTML and CSS.
2. JSX (Javascript XML) & Babel
Most of the time while working in React you will work with JSX which looks very similar to HTML code flavored with Javascript. In easy words, you can say that JSX is the easiest way to add HTML code inside javascript.
So in order to work with React, you should have a complete understanding of what JSX is before learning about React.
While looking at the above code you would have got confused for the first time. Thoughts like is it an Html code? Javascript code? or something else ? might come to your mind. It is for sure that when you try to run the above code then it will not run. Basically, JSX is known for extending the Ecmascript so that XML/HTML can coexist along with the javascript React code. You can understand it from the picture given below:
Apart from these, you should also have a good understanding of Babel. Babel is generally a javascript compiler that is known for transforming HTML-Like text found in the javascript files. It is known for taking the features from Ecmascript 2015+ (ES6+) and bringing them down to ES5 or regular javascript. You can check out the conversion by following this link.
3. Core Concepts of Javascript and ES6
If you want to be good with your React skills then it is for sure that you should know all the javascript concepts very well. While giving interviews javascript plays a major role as their interviewer will judge you based on your javascript skills more as compared to your react skills. So make sure to cover all the basic concepts of javascript before jumping into the advanced version of ES5 and ES6. For your convenience, we have jotted down a few of the important topics below so that you can go through them:
- Learn about the basic concepts like variables, functions, strings and make your concepts clear on the basic fundamentals.
- Also learn about other basic concepts like operators, conditionals, functions, loops, javascript keywords, array, objects, and other basic fundamentals.
- Now you should learn about Event handling, DOM manipulation, working of this keyword in javascript.
- Also, have a deep understanding of the Higher-order function, callback function, arrow function, state, class & constructors, extends and inheritance, map, reduce, filter, promises, modules, closures, const, let ( basic difference between var, let, and const) and other features of ES5 and ES6. For this you can follow the playlist given below:
4. Package Manager
While working with React you have to install many small packages while implementing the tasks. A package is known for containing all the files needed for a module and all the modules are generally javascript libraries. Packages generally contain package.json files and js files. For downloading these packages you need a package installer that can help you to download and install software packages easily without worrying about the dependencies. You can either use node or yarn for managing these software packages.
Before learning about React you should have a good understanding of the NPM packages(Node package manager) registry and know about how to install packages using NPM.
5. Good Understand of Git and CLI
As a developer, you must have a good knowledge of Git(version control system) as you have to store your projects on Github, Bitbucket, and Gitlab. These tools generally help a developer track and host different versions of the project files.
As a developer, it becomes an essential skill to know about how git and these code hosting platforms work. In day-to-day life developers generally use Git commands to track the version of their files. So knowing about commands such as push, pull, add, commit, etc. Also having a deep understanding of how we can do the merging, branching, handling merging conflicts, etc can be a plus point.
Most of the time while working with React you will do all the things using CLI(Command Line Interface). So you should have a deep understanding of all the general CLI commands in order to work efficiently.
