React Fundamentals: Hello World - First Component

This is the first lesson in a series of lessons that take a look at the core fundamentals of UI development with React. Hello world. Transcript To get started creating our first React component, we're going to need to import React from our React package. We're going to go ahead and set up our first class component, so, class, the name of our class or component. I'm going to say, "extends React.component." Here, in the extension of React.component, we can do all sorts of different things, but in a class component, we are always going to have a render method. A render method is expected to return other elements or components. In our case, we're going to use something called JSX, which is an HTML-like syntax. Here, inside this H1, I'm just going to say, "Hello world." Then, down here, I'm just going to go ahead and export, by default, our app component. Now we've got our app component, which is rendering an H1 with an innerHTML of "Hello world." Like I said, JSX is HTML-like, but there are some differences. We will be covering those, but all JSX gets transpiled into JavaScript. Just to show you what that looks like, the H1 ends up getting passed to this function, called "React.createElement." The first argument there is the element we want to create. In our case, it's an H1. The second argument is for props, which we'll talk about later. The last argument can either be another element, or it can be just a string that's meant to be the innerHTML of our element. Here, I'm just going to say, "Hello guys." Save that. We can see on the right we've got "Hello guys." In this series, we are going to be using JSX, so I'm just going to go ahead and put that guy back. Now that that's back, I'm going to go ahead and comment this out. We'll take a look at another way we can create a component. This is called a stateless function component. I'm creating a constant variable here, called "app." That's going to be equal to a function that simply returns our JSX. Save that. Now we've got our "Hello eggheads" there on the right. The difference between these two guys is that a class component can have what's called "state." Again, we'll be talking more about that later, whereas a stateless function component will not have state.