1. Code
  2. React

Learn React 18: Building Your First React App

Scroll to top
Contents
Scroll to top
Contents
Read Time: 4 mins

It's possible to build applications with React without using any tool-chains—just with the React library and pure JavaScript. In this lesson from our free full-length beginner course on React 18, you'll learn how. 

Have you ever wanted to learn how to do web development with frameworks and libraries like React but got intimidated by the complexity of the process?

There are two things that might make it difficult for people to learn React if they haven't used anything like this before. First, it requires a change in your way of thinking and how you implement things. Second, some tutorials might require you to learn a bunch of other stuff first. Now, this other stuff is actually important, and you will have to learn it eventually if you want to do some serious web development. However, it is not absolutely necessary to get started with the library.

In this tutorial, I'll show you how to create a React app with no extra tooling or specialized knowledge: just a single HTML page!

1. Import the Libraries

We will create our first React app without the use of any fancy tools. The only thing that you need to do to get started is include the library in your webpage by adding the following script tags.

The first one is our core React library meant for building the user interface. The second library, React-DOM, gives us access to some DOM-specific methods so that our application can work inside browsers.

2. Create an index.html Page

To start, create an index.html file with the following contents:

3. Code the App

We will begin the creation of our app by using the React.createElement() method. This method creates and returns a React element of our specified type. These React elements are very different from regular DOM elements. React elements are simply objects that are used as references by React DOM in order to create matching browser DOM elements. Add this code to the script tag inside body.

The above line will create a React object that will finally render as an h1 level heading with the id set to greeting and the class attribute set to hello. You might have noticed that we are using className instead of class to set the value of the class attribute. This is because class is a reserved keyword.

As I said earlier, React will be rendering the React element we just created to output an actual DOM element on the webpage. So we need to specify a location or parent DOM element where we want that rendering to happen. In our case, this will be a div element with the id attribute set to root. You can set the id attribute to some other value as well. 

Add the following element to your HTML body:

Now it is time to call the ReactDOM.createRoot() method and pass it a reference to our root element. Once we have the root element, we can use the render() method to render our React element as an actual DOM element.

The contents of the body tag should now be as shown below:

4. Run the App in a Browser

In later parts of the course, we will be running the webpage on a server. However, you can simply open it up in a browser for now. You should see an h1 level heading with the text "Hello, World". Open the inspector tool in your browser, and it will have the following markup.

First React App: Rendered HTMLFirst React App: Rendered HTMLFirst React App: Rendered HTML

5. Style the App With CSS

We can even provide some CSS that will be applied to the heading so that it looks slightly better. Here is an example:

Refresh the browser and you will see a heading that looks like the image below:

First React App: Final ResultFirst React App: Final ResultFirst React App: Final Result

6. CodePen Demo

The following CodePen demo shows the result of executing the above code in a browser. Try making minor changes to different attributes and see how it affects the final markup.

Final Thoughts

There you have it: we have successfully created our first React app. It doesn't do much at all, but you should now be feeling a little more comfortable with React than you were when we began.

In the next few tutorials, we will learn about many more React concepts and features so that you can finally create a fully functioning app with real-world utility.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.