Intro
So, you want to learn and master how to develop frontend apps using React?
But, what should you learn first to make React easier for you to grasp and work with?
Here are some of the prerequisite skills you need to have before you start learning ReactJS.
Time Investment in the Fundamentals
So, approximately how much time will you need to invest in learning the basics before you move on to React?
Depending on how dedicated you are (among other factors), you may need to invest:
- About 5 hours of study to learn HTML
- About 7 hours of study and coding to learn to properly use CSS
- About 7 days (of between 3 - 5 hours daily) of both studying and coding to get good at the fundamentals of the JavaScript language
- About 1 - 3 days of study and coding (depending on your focus and other factors) to learn many of the basics of working with the DOM using your JavaScript and HTML skills.
So, let's dive into details about each of these foundational web technologies that you need to know before you start learning how to create frontend apps using React.
1: HTML
If you are going to put something on a web page on the Internet for your users (or the Internet public), you need to create that page using HTML. HyperText Markup Language (HTML for short) is the "language" that the web is written in.
It is not so much a programming language as it is the system for structuring the elements on a web page.
So, what about HTML do you need to learn before you start studying ReactJS?
Here are a few:
- Tags: These are the basic building blocks of any web page. These are the `<body>`, `<div>`, `<p>`, the `<h1>` to `<h6>` header tags, `<span>`, `<ul>`, `<li>`, `<form>`, `<section>`, etc.
You can pick up a book on HTML, check online tutorials, head to the Mozilla Developer Network's (MDN) website's HTML documentation or visit the W3Schools' HTML Tutorial to (re)learn about the many HTML tags you need to know and how to properly use them to create a web page.
Not to worry, you can probably learn most (if not all) of them in a matter of one to three hours depending on how focused you are and how much time you can invest in your studies at a time.
You also need to learn about some very important parts of HTML tags such as HTML attributes.
- Forms: If the website you are going to build will have some form of user input or data submission, then your HTML will need to code some forms into the web page. As such, you need to learn about the HTML `<form>` element, the `<input />` element with its various types (such as `email`, `number`, `text`, `radio`, `checkbox`, etc.).
You should also learn about the `<label>` and `<select>` elements as well as what the `<button type="submit">` element is supposed to do on a form (which is almost self-revealing.)
While you are at it, learn about the common form-related elements props like:
- `for`: (as in `<label for="username"`>)
- `type`: (as in `<input type='text' />`)
- and so on.
Understanding how these form attributes and properties work will be very helpful when you start to work with forms in your React components.
What you will be using to write the markup for your React components' UI is called JSX. It is a smarter form of HTML. It is an "extension" of JavaScript. As such, behind the scenes it is actually wrapped as a JavaScript object. But you can think of it, for now at least, as just HTML.
So, learn and master as much HTML as you can before you start learning React. This way, you don't have to worry about differentiating between whether a markup element is just 'good ole' HTML or is JSX.
2: CSS
Once you have a good understanding of HTML markup and how to use them, you should now learn how to style the elements you have put on your web page.
Cascading Style Sheets (or simply, "CSS") is what you will be using to give your HTML elements the look, feel, coloring and positioning you want. If HTML is what puts stuff on your web page, CSS is what makes their appearance appealing to your users.
You should learn about the common properties (like `padding`, `margin`, `color`, `background-color`, `font-family`, etc,) and their respective values.
You should also learn how to create CSS selectors (both classes and ids) that you can use to define a set of CSS properties that you can reuse in any number of similar HTML elements just by passing the name of the CSS class to the `class` attribute of the HTML element you are trying to style.
Also, learn how to write CSS inside your HTML tags using the HTML elements' `style` attribute.
Also, learn how to import and reference a CSS stylesheet file into your HTML page so that you can reuse any of the CSS styles defined in that stylesheet inside the host HTML file.
HTML
CSS Preprocessors like SASS are useful to know but not an absolute necessity when you are just starting out. If you have the time, it is good to know them. If you are a beginner and just want to get the basics, you may skip SASS (and any other CSS preprocessors) for now until you have learned and worked on a few React apps.
3: JavaScript
Once you learn how to put elements on a web page (using HTML) and can style them (using CSS), you should next learn how to make your website interactive using the language of the web and the lingua franca of web browsers everywhere => JavaScript!
JavaScript is what helps you write code that tells a user that they need to add a valid password before they submit the login form.
It is what enables you to write code to display a confirmation (or error) message (in a popup or modal) after a user submits the registration form on your website. And, so on.
If your website is going to be interactive, you are sure going to need to write JavaScript code into it.
JavaScript is also what makes your web app:
- Enable zooming on Google Maps (or any other mapping applications you use)
- Respond to a user clicking on, focusing on or moving away from an HTML element on your web page.
- highlight the current form input element your user is entering data into or give it a red border if there is an input error.
It is also what lets your web page render your React app. Remember that your React app is basically one giant JavaScript file with HTML, CSS and other JavaScript code wrapped inside it. That's why your modern frontend web app (built with Angular, ReactJS, Svelte, VueJS, etc.) is considered a "Single Page App" (SPA).
So, what about JavaScript should you learn to be skilled enough to be able to learn to create frontend apps using React?
You should learn and know about:
- Declaring Variables: Learn about how to declare JavaScript variables using `const`, `var` and `let`. Know the difference among these and why you should use one instead of the others when declaring a variable and the implication of that.
- Data Types: Know about strings, numbers, arrays, booleans and other data types used in JavaScript.
It is guaranteed that in every React component you create, you will have one or more of these data types in the component.
So, learn about these data types and the JavaScript methods used to work with them (to add, remove, update and delete the values of the data types).
Learn, for example, how to use the `map()`, `reduce()` and `filter()` methods to work with arrays. (You will be doing a lot of these while creating React apps and working with component state/data.)
- Functions: Learn about JavaScript functions, how to use function parameters and return one object or an array of objects from a function.
Your modern React component is basically a JavaScript function that `return()`s the HTML/JSX used to render your component's UI.
- OOP: Modern JavaScript supports the Object-Oriented Programming (aka "OOP") paradigm.
Learn how to create JavaScript classes, class functions (aka "methods"), how to use static methods and how to create instances of a JavaScript class.
Also, learn how to export and import the JavaScript class from one file and into another to use it.
Before React 18, React components were basically JavaScript classes with a `render()` method that returns the JSX/HTML of your component.
Modern React (i.e version 18 onwards) uses JavaScript functions to create the components. But there are instances where you need to create and use JavaScript classes such as when creating your API logic (if you are using classes instead of hooks/functions) for those.
- Higher-Order Functions: This is one step above functions. A High Order Function (aka "HOF") is a function that can take another JavaScript function as input and can return a function as the output.
So, essentially, a HOF takes a function in and spits a function out.
This has uses in React and you should learn them as this skill becomes handy when you are working on an app that requires a lot of logic, data wrangling and other things that you need to do and could be tempted to push all of it into one function.
- JavaScript Objects: Learn about JavaScript objects and how to add, update or delete object properties or their values. When working with API data (from a backend server) or user-submitted data (such as from an HTML form), you will be working with JavaScript objects.
You should also learn how to transform a JavaScript object into `JSON` and vice-versa.
- Conditional Logic: Learn how to conditionally-display a value in JavaScript. For example, you may only want to display "you passed the class" if a user's score is above 70%.
You also want to know how to handle multiple cases of a condition. For example, render "you passed" if the user's score is above 70% and render "you failed" if the user scored below 70%.
Learn how to use the `for` loop. Master how to use the `if()...else()` and `switch()` statements to conditionally-render data based on the input or output you have. You will find yourself very much in need of this skill when creating global state management for your React app.
Some great resources for learning JavaScript include:
4: Working with the DOM
Once you have learned how to write HTML markup, use CSS to style your HTML elements and know basic JavaScript, you should next learn how to use your JS skills to work withe DOM (that's basically your web page.)
You should learn about:
- Accessing DOM Elements: Learn how to use JavaScript to grab elements on your web page (using their HTML ids, tag name, CSS selectors, etc.) This involves the use of such functions as `getElementById()`, `getElementsByTagName()`, and so on.
- Basic DOM Manipulation: Next, learn how to manipulate the values of those HTML elements you can now access/grab using JavaScript. This might be to validate user input, update the UI (based on user input and interactions such as clicks, etc.) or redraw the web Canvas in reaction to user input.
In React, you may not need to do this as often. But it comes in very useful when the need arises in one use case or another.
There is a very good guide for learning how to do basic DOM manipulation on the MDN website if you want to learn, re-learn or upskill your DOM manipulation capability. You should also check out this great article on how the DOM works.
- Browser/DOM Inspections using Developer Tools: One skill that you will need to fall back on almost everytime you work on a frontend app (using React or other frontend frameworks) is inspecting the DOM or your web page.
If all you want to do is see the markup for the page, you can view the "page source" using the menu on the browser you are using.
In Chrome, this is in the "View >> Developer >> View Source" menu.
In Firefox, it is at "Tools >> Browser Tools >> Page Source".
If you use another browser, check the toolbars and menus to see where this functionality is.
If, however, you need to do more than just viewing the "page source", you need to "inspect" the page. This is where the "Developer Tools" come in. In Google Chrome, you can either right-click the web page and select the "Inspect" option or use the "View >> Developer" menu and select the "Developer Tools", "Inspect Elements" or "JavaScript Console" options.
Irrespective of which browser you use, learn about the various tabs in your "Developer Tools" section to help you see and use the network, console and elements sections.
Every once in a while, you will find yourself in a "sticky" situation when developing React apps and one good place you can search for answers is your "Developer Tools" section. So, learn about it and how to properly use it.
A good Developer Tools Guide is available at the https://developer.mozilla.org/en-US/docs/Glossary/Developer_Tools
5: Good-to-Know
Learning about HTML, CSS, JavaScript, basic DOM manipulation and your browser's Developer Tools is the most basic foundation for learning about website development.
There is, however, a "great to know" corollary to these basic skills.
These include:
- How the Web Works: As you build more complex React apps, you will have to take into account your app's interaction with external websites and apps.
So, you will need to understand how the world wide web works. This includes knowing how the HTTP requests and responses work (and the data each one sends and how to read them).
You should also know about "Content Types" and CORS (both of which come in handy when making API calls from your React apps.)
There are other skills but these are the foundational ones when it comes to knowing how the Internet works.
Some good resources for learning about these include:
- Working with APIs: Unless your web apps are just going to render static texts (that rarely change), your React app will need to make calls over HTTP to an API backend server somewhere to GET, POST, UPDATE and DELETE React component data. You should, therefore, learn how web APIs work.
You don't need to be a master at this at the beginning, but knowing the basics about APIs is very useful and very much needed as you will be writing code to make API calls from your React components in almost every React app you develop.
So, you need to know what format the data you will be sending from your React app should be in (usually `JSON`), how to inspect the API's HTTP response that you get back and how to render that data in your React components.
But, just like learning [How the Web Works, you just need to have a good familiarity with APIs and not be a master at it, for now.
A good resource for learning How APIs work can be found on https://www.postman.com/what-is-an-api/.
Like with anything worthwhile in life, learning about website development is a continuous journey of professional development. But, if you start with a strong foundation, learning to develop React apps should be much simpler and easier for you.
So, get good (err, great) on the basics and you will be thankful for it for a long time to come.
Technical Reference
Here are some resources to help you learn (and, even maybe master) some of the foundational skills of developing frontend websites.