React Hello World Application with Setup


In this article, we will take a look at react hello world application. Well, In the previous article, we learned how to set up the application using npm command. We also learn about file structure and the use of package.json file uses. Now we will set up the application and create our first hello world program.

hello world

So, first of all, set up the application using npm. Make sure you installed node.js in the application before you move ahead. After node.js installation, we will write this command to install node.js globally. You are free to install it locally.

This command will install react app globally. Now we need the next command to be executed to create react application.

This command will create the boilerplate for your application.

After the installation, you will get the src folder directory. In this directory just create a new component or use the existing one. So at this time, I am using the existing one. So just open the src folder and open App.js file.

App.js

In this file let’s put this code to print hello world on the document. So you just need to create a div tag with className attribute and specify the App class. Using this App class your text will be centered. This class is created in the App.css file already. So you don’t need to create a new CSS file and class.

So in this div tag create h1 heading tag with hello world text. After you put your text you need to render your component in the browser. So you need to use the render method of the reactDOM module. Render() method is used to render the UI in the browser.

Open Index.js file and render the component.

In react index.js is the entry point of your application. So make sure do not delete this file. You can see your default app component is already placed in the reader method. You don’t need to render it manually. If you create a new component then You need to place that component in the render method to render it.

Now just execute your application using npm command. Open the terminal using (Ctrl+`)

This command will serve the application on the browser. Now you can see hello world text. Right.

JSX Component

Now let’s create a new JSX component. In the src folder create a new directory and name it Component. In this directory create a new file Order.jsx. You can see we specify .jsx extension to this file. The benefit of using .jsx extension is you can create jsx element rapidly like you create html tags.

In Order.jsx put this code.

This component seems like a complicated one but it is not. In this component, we created a JSX Method.  Because react Component is a class you can create any type of method in the component. These methods can help you to reuse the component logic. To call this method in jsx you can use {} curly braces.  as you know curly braces used to print data of the variable.

You can call your method in the render method or also you can call it manual

You can see we also provided property to the component. Which is  href={this.props.url} this property specifies href attribute value. When we call this component in the render method we call this property and specify a value to it.

So Now let’s call the Component in the render method. Open the index.js file and put this code.

Finally, Execute npm start command.

As a result, you can see your component is rendering in the browser. Now you know how to set up and create a new component in react application. In the next article, we will explore some more concepts about react.

If you have any question you can ask me any time in the comment section.

Leave a Reply

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