React has become one of the most popular tools to build websites and apps in recent years. But what is React, why are so many people and projects now using it and how can you start learning it?

What is React?

React is a JavaScript library used to build user interfaces, including websites and apps. It’s a component based library, meaning that all the UI elements can be built as individual and re-usable components.

A component is like a building block that can have it’s own set of functions, styles and state making applications more modular. You could create a button, navigation menu or a form as a component which can be re-used many times across your application.

Why use React?

Building an application using components is useful for a number of reasons. If you make a change to a component, it updates everywhere you’ve used it in your application.

React uses JSX which allows you write JavaScript and HTML in the same file. Instead of HTML and JavaScript being separate, this allows you to define the UI inside JavaScript functions.

React also uses a virtual DOM which allows for efficient updates to individual components when a change occurs, rather than reloading the entire page.

What do I need to know to use React?

React builds upon the foundations of HTML, CSS and JavaScript, so having a good understanding of these technologies will make learning React much easier.

You should know about HTML elements such as divs, buttons, headers and sections, and how to apply CSS to them using classes.

As React is a JavaScript library, you should have a good understanding of variables, data types and functions. Knowing some advanced features such as destructuring, rest and spread operators and Array methods would also be very useful.

How can I get started with React?

Install Node.js on your system, which should also install NPM and NPX. Then execute the following command in a terminal or command prompt to create a new React project in a location of your choice.

npx create-react-app your_app_name

This will set up the project with all the files and dependencies you need for a basic React app. In the project you’ll find a file called App.js inside the src directory which is the main component in this project.

function App() {
  return (
    

      
Hello, React! 🚀
      
Welcome to my first React app.
    
  );
}

export default App;

Next, we’ll look at an overview of components, what they are and how they can be used.