Build your first React app

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

There are two things that could make it difficult for people to learn React if they have never used anything like this before. First, it requires a change in your way of thinking and the way you implement things. Secondly, some tutorials may require you to learn a lot of other things first. Now, this other stuff is really important and you will eventually have to learn it if you want to do some serious web development. However, it is not absolutely necessary to start with the library.

In this tutorial, I’ll show you how to build a React app without any additional tools or specialist knowledge. Just a single HTML page!

1. Import libraries

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

The first is our basic 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 run inside browsers.

2. Create an index.html page

To get started, create a index.html file with the following content:

3. Code the app

We will start building our app 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 a reference by React DOM to create corresponding browser DOM elements. Add this code to script label inside body.

The line above will create a React object that will finally be rendered as a h1 level header with id set to greeting And class attribute set to hello. You may have noticed that we are using className instead of class to set the value of the class attribute. This is why class is a reserved keyword.

As I said earlier, React will render the React element we just created to produce a real DOM element on the web page. So we need to specify a location or parent DOM element where we want the rendering to take place. In our case, this will be a div element with the id attribute set to root. You can set the id also attribute to some other value.

Add the following element to your HTML body:

Now is the 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 make our React element like a real DOM element.

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

4. Run the app in a browser

In the later parts of the course, we will run the web page on a server. However, for now you can just open it in a browser. You should see a h1 level header with the text “Hello WorldOpen 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 also provide some CSS that will be applied to the header so that it looks a little better. Here is an example:

Refresh your browser and you will see a header similar to 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 small changes to several attributes and see how it affects the final markup.

Final thoughts

That’s it, we have successfully created our first React app. It doesn’t go a long way, but you should feel a little more comfortable with React now than when we started.

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

Source link

By LocalBizWebsiteDesign

Leave a Reply

Your email address will not be published. Required fields are marked *