From the course: React Essential Training

How React works - React.js Tutorial

From the course: React Essential Training

Start my 1-month free trial Buy for my team

How React works

“

- [Instructor] Before we get into the course, let's think a bit about how React works. The core building block of a React application is a React element. An element describes what you see on the screen, like an HTML tag. So, if I create an element using React .createElement, I'm creating an h1, I pass that as the first argument to that function, I pass null for the second because I don't want it to have any properties, and then any child elements of that like Hello World, I'm going to add as the third argument so that that displays when I come to the page. So, this is a DOM node that displays Hello World. React apps are made up of React components. React components are typically one or more React elements nested together. We create a React component using a function that returns part of our UI. In this case, we're returning an h1. Here, we're using a syntax called JSX. This is a tag-based syntax that compiles to plain JavaScript before we run it in the browser. We then create an app that is made up of a bunch of different components. Think of these components as making up the DOM tree. So, I have a header, a main, and a footer. All of these can be rendered together from the app. React has a concept called props, where we can display dynamic data inside of a component. So, here, in our function called header, we pass in props as an argument, and then props.title will display whatever property that I've passed in to the header. In this case, it's vite. Then when the data changes, our component will re-render, but React knows how to re-render in the most efficient way possible so that we can hold onto the parts that don't change, and just make updates to the parts that do. We will be getting hands-on experience with all of this, but this will give us a good vocabulary to get us started.

Contents