Create React Elements

[00:00] So, we've got Marty the Moneybag helping us out a little bit here to help us import these files. And so, if I save that and we go take a look at our network, we're going to see we're loading in React and ClientJS, so that is working as expected.

[00:15] And now, we still can get the root element, so we've got our HTML ID of root here. And so, we're going to grab that root element. We still want to append something to it, but it's going to be a little bit different with React. So, we still need to create an element that's a little bit different with React as well. So, rather than document create element, we're just going to use create element from React.

[00:35] And we are going to create a div, but in React, you don't typically mutate the elements you create. Instead, you pass the properties that you want that element to take. So, we're going to have our class name and our text content here. So, in React, this is also called class name, so we'll say class name, and that's a container.

[00:55] And then, in React, rather than using text content, we're using children, and this prompt can be called children, or you can set it as a third argument. So, if we move this over here and remove that, those are functionally equivalent to one another,

[01:13] and they do have some slight differences that we can talk about as we dive into the children prompt a little bit more later. Okay, so then we're also going to need to append this. If I were to save this right now, then we're going to get object to object in the page

[01:28] because the browser's like, wait, you're appending just an object, it's not a DOM thing, so I guess I'll two-string it, and that's what we're appending. So, that's not exactly what we're going for here. So, instead, we're going to tell React, hey, I've got this React element. In fact, let's take a look at that.

[01:44] Console log element, and this is what a React element looks like. It's got this type of thing, that's how React knows that it's a proper React element, is this special symbol. It has a type, that's the type of element we're creating, and then it also has props,

[02:03] and the props are children and class name. Sweet. So, it's like what we provided. So, this is just like a description. We called it UI descriptor of this element that is supposed to be on the page.

[02:16] So, we need to turn this from a React element into a document or a DOM element, and we're going to use create root with the render API to make that happen. So, we're going to say create root, the root of our application will be this root element,

[02:35] and then we're going to render this element into that root. So, if I save that now, we're going to get our hello world, we can take a look at our UI, and yep, inside of that root element, this is our root for our application, we're going to render this element, which we created right here.

[02:53] So, that is how we create a React element and get it onto the page using the create element and create root APIs from React. Awesome job.

[00:00] So, for this exercise, we need to bring React and ReactDOM onto the page and use their Create Element and Create Root APIs. You can dive into the public directory of the workshop repo to see what these files are. But, yeah, that's how we're going to get React on the page. As a reminder, this is not typically how you bring React on the page.

[00:19] Typically you're going to have a whole build tool and a build pipeline, all that stuff, because you want to have typings and you want to have bundling and all that stuff, optimizations But, for us, we're doing things as simple as possible, so we're just bringing in React and ReactDOM this way.

[00:36] And you're going to change from Document Create Element and all of that stuff into React Create Element and how that all works. So it should be a fun little migration. By the end of it, your app should look exactly the same as it does now, but it will be made with declarative React APIs instead. So have a good time with this. We'll see you when you're done.

Ever found yourself staring at React code, feeling like you're missing something crucial? You're not alone. Many developers use React without understanding the fundamentals in depth.

This can leave you struggling when faced with more complex challenges down the road.

But you can build a rock-solid React foundation that will transform how you approach React development for the rest of your career.

This tutorial guides you through the essential building blocks of React. You'll start from scratch and gradually build up to creating custom components, gaining invaluable insights along the way. By understanding not just the 'how', but the 'why' behind React's functionality, you'll transform your approach to React development.

### What to Expect:

- **Hello World in JS**: Pure JavaScript to understand the basics.

- **Raw React APIs:** Use React and ReactDOM without JSX.

- **JSX:** Explore the power and syntax of JSX.

- **Custom Components:** Create and use your first React component.

By the end of this tutorial, you'll have a deeper understanding of:

- The relationship between JavaScript and React

- How React elements are created and rendered

- The purpose and power of JSX

- The nature of React components and their role in building UIs

<Callout ctaLink="https://epicreact.dev/buy">
This tutorial is an excerpt from the React Fundamentals workshop
</Callout>

Learn React from scratch: build components, understand JSX, and master core concepts. Understand the 'why' and 'how' behind React's functionality. 

Get Started With React

Get Started With React

Transcript

Create React Elements

Transcript