9 React Common Terms Explained In A Few Words
By: Piero Borrelli
Tags: Programming, Technology, JavaScript, React, Web Development

9 React Common Terms Explained In A Few Words

In case you have an interview tomorrow

The React universe can be daunting

Learning a programming language is quite similar to learning a “real” language. There are words to use, verbs, and rules. Words, in particular, are what we combine to create a dictionary of stuff we will use daily.

Whether it’s how to say “How are you”, or how to define a user interface, a dictionary is the base for everything more complicated we will do with a language.

Here is a quick guide trying to teach you the meaning of common terms when learning React. It will form your basic grammar for starting with the library today, and mastering it later.

#1 Library

You have probably seen a hundred comparing articles of the best Javascript frontend frameworks. And React is always there. But that is technically incorrect since when talking about it, we’re dealing with a library.

A library is simply a collection of class definitions, helping its user to accomplish a specific task. In the case of React, to define UIs.

#2 Components

React components are very similar to functions. They accept input, in the form of props, and then produce some output. This output defines what should appear on the screen. Components are great to build UIs, because they let you define independent pieces of it, and you can use and handle them however you want.

A component can be either a class component, meaning it is basically a class which will return something to render on screen

Or similarly, a function. Which has the same purpose of describing the UI, but with some difference when it comes to other factors such as lifecycle methods or hooks.

#2 Props

Nothing is truly fun if not customizable a little right? Well just like how you pass data to a add(val1, val2) function to add numbers, you pass them to React components.

Props are just that, meaningful input you pass to your React components.

#3 State

A component needs state when it requires some way to store local data, which can change over time. Like an isChecked info in the state for a CheckBox component. Or show inside the state of an Accordion .

And remember, the biggest difference between state and props is where they come from. Props come from a parent component, while state is managed by the component you’re defining itself. Props can’t be changed, but the state can.

#4 JSX

React components are not defined in a syntax you are probably familiar with. React uses JSX, which is a syntax extension for Javascript. Your JSX will get compiled to React.createElement() calls, which will return plain JavaScript objects called “React elements”.

#5 Javascript Compiler

A Javascript compiler takes Javascript code, transforms it, and then return it under a different format. The most common case is when you want to use the newest ES6 features, which are still not supported by older browsers. Babel is the compiler most commonly used with React.

#6 ES6

Acronym referring to one of the latest versions of the ECMAScript Language Specification standard, which the JavaScript language is an implementation of. This version included many news such as let and const, arrow functions, and template literals.

#7 Bundler

A bundler helps you taking different JS and CSS modules, and combine them into just a few files better optimized for the browsers. The most common bundler used with React is Webpack.

#8 Elements

React elements are the building blocks of React applications. One might confuse elements with components. An element describes what you want to see on the screen. And remember, elements are immutable.

#9 Lifecycle Methods

Components can be considered just like living creatures. They go through stages of their lives, and we can access these stages via lifecycle methods. For example, when a component is born, we call it mounting and use the componentDidMount() method to manage this part of its lifecycle. Or when it changes, we say it updates, and so we use the componentDidUpdate() .

Conclusion

Hopefully, this was a useful bird-eye view on the dictionary of common words used by React developers. This can give you an idea of how React works and the main concepts behind it.

— Piero

Resources

All the icons are made by the amazing icons8 website

A note from JavaScript In Plain English

We have launched three new publications! Show some love for our new publications by following them: AI in Plain English, UX in Plain English, Python in Plain English — thank you and keep learning!

We are also always interested in helping to promote quality content. If you have an article that you would like to submit to any of our publications, send us an email at submissions@plainenglish.io with your Medium username and we will get you added as a writer. Also let us know which publication/s you want to be added to.