React vs JavaScript - Reusable Components and JSX

Though this course assumes some experience with the use of React, we're going to cover some core concepts of React in this lesson to bring everyone up to speed and provide a quick revision on topics we may not have heard about for a while now. In traditional HTML and JavaScript applications, JavaScript is used to directly manipulate the DOM, or in other words, the document object model. To make changes in our UI, we have to make references to the DOM and imper atively declare the changes we'd want. For example, assume we had a simple header element that said "Hello World" and a button with a click event listener. Let's say we're interested in toggling the text content of the element, the header elements, when the button is clicked. To do so in traditional JavaScript, we have to get the reference to the DOM node in question, and only then will we be able to change the text content of the DOM node we'd want. This works fine, but the problem a lot of engineers noticed with large applications is things get difficult to track very quickly. Then certain libraries came into the scene to help structure things better with the Model View Controller pattern or even the Model View Presenter pattern, but React came into the scene with a pretty unique way of solving this. React changed the paradigm of how we make changes to our UI with the help of something known as the Virtual DOM. The Virtual DOM is a cool terminology for essentially just JavaScript objects that represent the structure of the actual DOM. When we make changes in React, we never make changes directly to the actual DOM . We make changes to this Virtual DOM. This is because it's a lot less expensive to. React then has the responsibility to compare the difference between the changes in the Virtual DOM with the actual DOM and it then patches the changes made to the actual DOM. This has introduced a different way of building UI with React. React gives us the ability to use JSX in non-standard syntax, which helps us create markup in JavaScript. Here's an example of the use of the React DOM render function to render and react elements on a particular DOM node. This is often the starting point of React applications and here we have a header element that says Hello World. This header element is essentially JSX, XML-like syntax in JavaScript. React has also given us the capability to create and use reusable components. Components are the building blocks of React applications and are essentially functions or classes that return a React element. Reusability and maintainability are some of the huge benefits to having well- structured components in a large application. Here we have a Hello World functional component, which simply returns a header element of Hello World and this Hello World component is now placed in the React DOM render function. The heart of every React component is its state. State is an object that determines how a React component behaves. When we make changes in React, we never make changes to the DOM directly. We make changes to state and React is responsible in rendering and re-rendering components based on changes made to state. Here is a very similar implementation to what we had with the native JavaScript example we've shown earlier, but in this case we're doing this with React and the capability of state to update our UI. We use the use state hook to return a message and set message state properties. The message property is being returned as part of the component template and the set message function is used to update the message state property whenever the change message function is called. This is a good example of the data-driven mindset of building applications in React. We change data, or in other words, state and React is responsible in telling the UI and how it should be shaped based on the change in data. To pass a data from one component to another, React gives us the ability to use something known as props to do this. React's or other words just data can only flow in a single direction from parent components down to child components and further down. When a change in state is made in a parent, React will recognize that these values have changed and will cause the components that depend on these values to re-render, whether it's the parent component that's created the state or the children component that's receiving props from the parent. Here we have the parent pass a message prop with a string value of hello world and the component simply receives it and renders the prop value directly. React gives us the ability to create components in one of two ways, with classes or functions. In either case, a React element is expected to be returned. Here we have a class component that creates a message state property and returns it as part of the returned element. A component did mount lifecycle method is being used to run a console log whenever the component first mounts. Here's the functional component alternative, where in this case we use a use state hook to create our state value and a use effect hook to have this effect that logs a message to the console when the component first mounts. Traditionally, class components had to be used to declare state as well as any lifecycle effects a component can have. That's why traditionally, a container presentational structure often arise where container class components will contain the state and lifecycle and pass that information down to more dummy function components. Well, as of recently, this pattern isn't really encouraged any longer thanks to a major feature to react is introduced known as react hooks. We'll be taking a deeper dive into hooks in a few lessons from now. Okay, this is by all means not a thorough introduction to react, but instead aims to serve a refresher for some of the main core concepts such as JSX, props, states , etc. We'll be familiarizing ourselves with a lot of these concepts as we begin to build our react components throughout the course. [ Silence ]