Current section: Raw React APIs 22 exercises
lesson

Intro to Raw React APIs

Loading lesson

Transcript

00:00 All right, we're going to bring in React, but we're not going to do anything much more interesting than this hello world thing. We're going to just take baby steps, make sure that you're really feeling comfortable with React, and we're not also going to use JSX, which you've probably heard of as well. We're going to use raw React APIs so that we can inch

00:18 our way into what React actually is and everything. So we're going to start out with just some raw React stuff. What's interesting is because we learned about how to create elements with document create element, this is what React is built on top of.

00:35 And so you can find in the React GitHub code base where that create element happens. So we have owner document, this is, yeah, adds a whole bunch of stuff when you're talking about like potential iframes and stuff like that. But yeah, so we've got our document create element, and then the type could be like our string of div

00:54 or p tag or whatever. And that's our DOM element. And then they're going to append that or change properties, all of that stuff. So there's certainly a fair bit of stuff you need to think about when you're building a whole framework for giving us this nice declarative API over the imperative one that we're used to.

01:13 But yeah, you can, like, it is source code that you can read and you can go through it and see what they're talking about in there, which is kind of interesting. Finally, the other thing you need to know about is React is more than just a single package. There are actually two packages that we're going to be using that are relevant for the web.

01:31 And that is the React package and the React DOM package. And so React is responsible for programmatic features. So hooks we'll talk about later, components, the different APIs and directives and stuff, which we'll get into throughout all of the workshops in Epic React.

01:49 And then React DOM is responsible for the DOM side of things. So turning React elements into something that can be rendered to the DOM and creating that element. And it does have some stuff around components and hooks and these different APIs that are some, like,

02:09 specific to the web. And we'll get into all of this stuff. But React can also be used in VR and in native desktop applications and even in a terminal. So you have these different renders and React DOM is one of those renders that's responsible for taking React elements and those components and turning those into something

02:29 that can be rendered to the screen. So as we're going through this exercise, you're going to have React and React DOM on the page. Those will be loaded from our public directory and we've got those linked out to wherever you can find those packages. And you're gonna be using React to create elements

02:49 and React DOM to append those elements to the page and turn those elements into some DOM. And so it's React DOM that's responsible for creating document or document create element and that sort of thing. So have a good time with this Hello World with raw React APIs. I think you'll love it.