Fundamental concepts in React

As it stands right now, React is the most popular library for designing and building interactive UIs. It’s fairly easy to learn, but the library still introduces a number of concepts that might be new to you even if you’ve worked with similar JavaScript frameworks before.

In this article, we will talk about those features that make React unique. We will cover three concepts that you need to do anything with React. These concepts are JSX, reusable components, and props for passing data between these components.

To understand this guide, you will need some JavaScript knowledge, including newer ES6 features. Arrow functions and destructuring of arrays and objects feature heavily in this guide, as they do in React.

If you’re curious to learn more about React, chances are you already know quite a lot about JavaScript, HTML and CSS. First React feature we will discuss is actually a mix of JavaScript and HTML.

What is JSX?

JSX is an abbreviation of JavaScript XML. Simply put, it’s an HTML-like syntax for writing JavaScript. Why would this be necessary? Well, React components are essentially JavaScript, but each one also has a presentation view to specify what it should look like.

You can technically build React components by making a bunch of calls to core React API. But the code will be difficult to understand. Instead, React allows them to write JSX code, which is ultimately compiled into the same calls to the core React API. The only difference is that with JSX, developers don’t have to worry about it.

Perhaps the biggest advantage of JSX is that it looks like HTML. Many developers are already familiar with the markup language, and can hit the ground running with JSX in no time. As a cherry on top, JSX allows you to do a number of useful things like implement JavaScript expressions inside the code. You can use this ability to implement features like render a component on click of a button.

Is JSX optional?

Short answer: yes, it’s up to developers to use JSX. You can technically use React API to work with plain HTML files, but methods like createElement are quite confusing for beginner developers. JSX, on the other hand, is pretty straightforward and anyone familiar with HTML can learn JSX in no time.

Overall, beginner React developers have a lot more to gain than lose from using JSX over React API.

What to keep in mind when working with JSX

There are certain naming conventions that differentiate JSX from HTML. Specifically:

1. In JSX, you can use custom components. This is a bit like creating and using your own custom elements in HTML. Each component represents a small functional part of the web application, like a mechanical gear. These small components make up the entire application. Name for custom components must always be capitalized. This helps other React developers read your JSX code and differentiate between plain elements and custom components.
2. Every element must return only one element in JSX. This can be a parent element that wraps around children, so there’s no limitation to the complexity of a component. There is, however, a rule that all components must return only one React element in JSX. React elements are essentially copies of HTML elements recreated for React. For example, you can use in HTML as well as React.
3. JSX may look like HTML, but it is actually JavaScript. Elements attributes are essentially an object, where each key-value pair represents attribute and its corresponding value. For this reason, you can not use reserved JavaScript words like class and for in JSX. Instead, you need to use className and htmlFor. Yet other HTML attributes may become camelCased. For example, onchange in HTML becomes onChange in React. This is simply to keep JSX code easy to read and compatible with JavaScript syntax.

Reusable components in React

Every React application is essentially a component tree. Great thing about React is that the developer doesn’t need to write a component with a certain bit of functionality over and over. You can write it once and simply reuse components throughout application.

Components are like pieces of the puzzle. To have a functional web application, you need to render multiple components in React. For example, a list of products on a website. Skeleton of a product layout will be the same. Every item needs to display product name, price, picture, and its availability. You build this skeleton once, and then render them multiple times, using props to pass information into components so they know what to render.

Depending on the syntax and their structure, there are two types of components – functional and class components. Differences between them are significant. Class components are based on class syntax from JavaScript, whereas functional components are just functions that return JSX code.

In short, class components can be summarized as more complex, but also having more features and capabilities. Functional components are lean, and prior to React 16.8, they used to be called ‘dumb’ components. But since then, hooks gave them features and capabilities functional components didn’t have before.

Props

We can’t discuss React features without talking about props. These are like arguments to the component. They are a way to pass ‘data’ into a component, which will process that data and output finished result.

Previously we talked about rendering a list of products on the page. Props allow you to pass data to describe individual products. Every product has its own name, image, availability, and so on. Sometimes this data is organized as an array of objects. Then you can use map() filter() or similar methods to go over objects in the array and render a product for each one. These methods allow you to take data from every object and pass it into rendered components as props.

This way, props play a crucial role in building interactive and dynamic web applications in React. Children components that receive props can access data via props object and display that data.

Final words

In this article, we described core features of React. These features enhance React and make dynamic user interfaces easy to build.