Preparing for React — What You Should Know First
You’re gearing up to learn React — the reigning JavaScript library champion since 2017 — but you aren’t sure if there are prerequisites. Let me confirm for you, there absolutely are. So, let’s take a look at some knowledge and skills that I feel will best prepare you for this wild ride.
HTML, CSS, JavaScript
HTML, CSS, and JavaScript are the basics of React, so if you’re not comfortable with at least the basics of these three languages, keep practicing them until you are, especially JavaScript, otherwise, it will make for a rough start with React. The reason: React is JavaScript, with some razzle-dazzle. Don’t know what that means? Neither did I. That combination of JavaScript and razzle-dazzle is called JavaScript XML (JSX)… You know how if you were to make out with Papa Smurf, you’d probably walk away with a blue tongue? Well, it’s like HTML is Papa Smurf and JavaScript made-out with it; JSX is JavaScript with markup in it. JSX is not required to be utilized in React, but it is the primary language used by developers in React because it provides a visual aid when working with UI inside of the JavaScript.
Here’s an example:
Again, this sly combination is why it is important to have a good understanding of both JavaScript and HTML before learning React. The following JavaScript concepts are what I recommend really honing in on:
- Data types: Boolean, number, string, null, undefined, etc.
- Data structures: objects, and arrays
- Destructuring objects and arrays
- .filter(), .map(), and spread operator
- Functions — special focus on arrow functions
- Asynchronous JavaScript
Imperative vs. Declarative
Understanding the difference between imperative and declarative programming approaches will help you get in the right mindset of how you’re going to get from beginning to end when developing an application in React with JSX as opposed to vanilla JavaScript. Here’s a quick look at the differences: JavaScript requires an imperative approach, which describes how a program should behave based on explicit steps the entire way. On the other hand, React encourages a declarative approach, which describes what the end result should be, leaving the how up to the program. To take a deeper dive into the differences, here’s a solid resource to checkout: Imperative vs Declarative Approach to Programming.
Wait, there’s more
In addition to laying the ground work for React with the previously mentioned languages and differentiating between imperative and declarative approaches, it is also recommended that you are familiar with Git and Command Line Interface (CLI) along with Package Manager (Node + npm)… as much as I would love to explore these topics in this blog for you, I have unfortunately run out of time to write that part and will leave you with some resources to further explore:
