From the course: React Essential Training

Creating React elements - React.js Tutorial

From the course: React Essential Training

Start my 1-month free trial Buy for my team

Creating React elements

“

- [Instructor] We've created our project using Vite, and I want to make some changes to the project so that it is rendering what I expect it to. So over here in the REACT project, inside of the src directory, we want to open the file that says App.jsx. So let's strip this way back and we're going to get rid of everything that's inside of the App component for the most part, and we'll just write an <h1> that says Hello React! Then, because we're not using these resources at the top, let's go ahead and remove them. Nice. Let's also open up the main.jsx file. And just to take a look at this, what the main.jsx file is doing is it's selecting the getElementById("root"), in other words, it's going into this index.html file, It's finding the div that has the id of "root", and it's using the rules of JavaScript over here to inject whatever should be added to the page. So if we take a closer look at this, we can delete StrictMode for now. Let's delete it here and here. There we go. And all we're really saying with this main.jsx file is go find that element and render this component. This is an example of a REACT component that we're adding to the page. Then if we look at this file, it's just a component. It's just an <h1> that we've added. So now if we open up localhost:5173, we need to make sure our project is running. So from the react-project folder, we'll run npm run dev. Then if we go to the browser, this is telling us that the project is working. We have our <h1> added to the page. From here, we could make any changes that we want. Hello world!! Back here, automatically our code will update, our browser will update to reflect all of those changes. So this is our first example of creating a REACT element. We've added a return statement that wraps around the Hello World!! This is an <h1> that is added to the page right here. So if we take a look at the elements in the browser by hitting Command + Option + J and we go to Elements, you'll notice that there's the div with the ID of "root", and this <h1> has been injected right there into that page. In the next video, we'll talk a little bit more about JSX and all the powers that it gives us to create these REACT elements to hold dynamic values.

Contents