React is the best library to learn to start a front-end development career. It is the most widely used by front-end teams all around the world. But in order to really master React, you need to know the fundamentals of front-end development – HTML, CSS, and JavaScript. The former for structuring the apps, CSS for styling elements, and JavaScript for adding dynamic features.
This article isn’t about specific steps to master HTML, CSS or JavaScript. It’s about understanding React in the context of these languages, so you can easily transition from these to React.
Beyond the fundamentals and React itself, you still need to be skilled with Git, but let’s leave that for later, and for now focus on foundations of React.
HTML
If you’ve ever looked at code behind React apps, you’ve probably noticed code that looks like HTML. Usually it is returned by functional components, or in case of class components, returned by the render() function. This code is not actually HTML, but JavaScript made to look like HTML. It’s templating language called JSX.
What is the purpose? Most front-end developers are used to building apps in HTML. Structuring various elements is one of the first things you learn as a front-end developer. You can use the exact same elements in JSX - <div>, <h1>, and so on.
Using JSX to define the layout structure is an easy way to define React components, which are just small bits of UI. You also get the predictable behavior of HTML elements that you’re used to, without having to learn new rules. That facilitates and speeds up development, especially compared to using top-level React API. Calls to React.createElement() get complicated very quickly once your application has multiple components nested inside one another.
There are few minor changes when going from HTML to JSX. Most important is the ability to include dynamic expressions within structure of your app. You can do that with JSX because in reality, it is not HTML, but JavaScript disguised as HTML. You only need to use curly braces to tell React that the following is a JavaScript expression. Also adding a new line in string is not the same as it is in HTML. More about that on SimpleFrontEnd:
https://simplefrontend.com/new-line-in-react/ .
Another set of changes are to attributes. Some HTML attributes like ‘class’ and ‘for’ are reserved words in JavaScript. Because JSX is JavaScript, it needed to change the names of these attributes to avoid unexpected errors. So if you need to set a class to an element in JSX, you use className, not class. And if you want to associate a label to an input, you use htmlFor, not for.
Event handlers work more or less the same way in JSX as they do in HTML. With few exceptions – names of event handlers are camelCased – so onchange in HTML becomes onChange in React. Also they are set to real inline functions, not function written as a string as you do in HTML. You do need to use curly braces, but React makes it much clearer what’s a dynamic code and what’s HTML and CSS.
Don’t be confused – the purpose of JSX, and the entire React library for that matter – is to make it easier to develop interactive apps in a readable way. Once everything is done, the entire thing is compiled into same HTML, CSS, and JS. It would just take too long to implement Reactive features without React.
CSS
CSS serves the same purpose in React as it does in HTML. Make the app look beautiful and responsive on the page. Once again, JSX allows you to use CSS the same way you’re used to in HTML. You can use CSS via external stylesheets, as well as set inline styles. More importantly, you can set inline styles to dynamic values, so the elements’ appearance can change in response to users inputs or other external events. This is a powerful feature for building interactive web applications.
React also goes beyond the basic styling you may be familiar with. Community has created multiple ‘CSS in JS’ libraries for additional possibilities of dynamic styling. Many job descriptions require you to know at least one of the ‘CSS in JS’ libraries. Learning this skill will dramatically increase your chances of getting a good job. This is important now more than ever, when there are fewer opportunities for front-end developers.
Regardless, the foundational knowledge of CSS is still necessary to build an interactive React app. Names of properties are the same, and values work more or less the same. Basics of CSS is pretty easy, but mastering CSS can take years, and sometimes even senior developers are not sure why something doesn’t work.
JS
React may look different at first, but it’s all JavaScript. And a deep knowledge of JavaScript will help you understand React as well. You will also need to write JavaScript for essential features of your component, like event handlers. Without it, you can not have an interactive app. Knowing JavaScript allows you to use all the tools at your disposal. For example, the useNavigate function from react-router which is necessary to go to external URL in React.
State and props, two of the most important features in React, are also structured as JavaScript objects. You will need to be working with state and props to implement even basic dynamic features in React. It is essential to know how to work with objects as well as arrays – what methods to use, how to access properties, and so on.
Finally, specific JavaScript concepts are also very important to know. Personally, I find that I use ternary operators, AND and OR logical operators, and arrow functions the most. The knowledge of methods like map() and filter() will come in handy as well, as you’re going to use these to render components based on an array that you received from external API.
Summary
These three languages are essential for mastering React. Make sure to learn them and your journey towards becoming a successful front-end developer will be that much easier.
Top comments (0)