How to Compile a React Application and Import an Image in ReactJS

Was one of your goals for 2021 to enhance your coding skills? If so, then you’ve come to the right place. This article will guide you through how to compile a React application and import an image in ReactJS.

In order to compile a React application, make sure you first meet all the prerequisites which include; having a good installer, having the Node Package Manager(NPM), and having a good text editor in your system.

Below, I've outlined the steps compile a React application and import an image in ReactJS. I have also created this video tutorial walking you through these steps.

‍

To start, know that there are two methods to compile a React application namely, the NPX method and the NPM method.

The NPX Method

We use the npx command in order to initiate the React App in our system. In this method, you will be using the below-mentioned command: 

{% code-block language="js" %}
npx create-react-app<project_name> 
‍{% code-block-end %}

This method includes the React App which basically acts as an interface tool for you. We will use the create React app, which acts as a command-line interface tool.

Next, follow the below steps:

• Open the integrated terminal in Visual Studio and enter the following command:
  

 npx create-react-app hello-world

• Now use the yarn start command
• After using the yarn start command, you should have http://localhost:3000/ running with your application.
• The next step is to go back to your Visual Studio, click on the “hello world” folder, then expand the SRC folder. Then open “ App.js”, edit the text, and save your work. 

Now, your first React application is ready!

NPM Method:

There’s also the NPM method, where you create the React app globally.

Following this method, use the below commands:

{% code-block language="js" %}
npm-install-create-react-app-g
create-react-app<project_name>
‍{% code-block-end %}

We recommend you use the NPX method over the NPM method, as with it you don’t need to install the package globally, thus it's more simple and smooth.

The above was a brief guide on how to compile a React application. If you want more comprehensive instructions, this article will guide you in a more in-depth way.

Importing an Image in ReactJS

Next comes the task of importing an Image in ReactJS. Adding images in ReactJS is quite challenging, however, using the techniques outlined below, the process should be made pretty simple.

First of all, you need to define your component, as shown here:

What Not to Do When Adding an Image

Something most people do wrong at this step, is trying to add an image through the source (src) folder. They go within the src folder and create an image folder then, add their images to that image folder.

This may sound simple and attractive to you but when you do something like this, your image won’t pop up. This is because your image is inside the public folder and even though you thought you referred to the public folder, it won’t work using this method.

How to Correctly Import Images in React JS

In the previous method, we explained how it was incorrect to refer to the public folder that contained the image. Now we'll go over how to properly tell React that we are referring to a particular public folder. Remember when we used to create React app and it came with a local web server environment available for us. This helped to serve that public folder as a local server. 

Above you can see we went wrong in our command, anything available in the public folder can be accessed by putting a “/” before the name of the item you are referring to - instead of the long command noted earlier.

This can be done as shown below:

{% code-block language="js" %}
<img src='/images/import_image.jpg' className="App-logo" alt="logo" />
‍{% code-block-end %}

Here, we needed to get access to the image folder and “import_image” was the name of the image. Enter this command and ‘voila’, your image is right in front of you.

Altering the Image Size

Once you’ve got the image in front of you, you might find the image to be too large. In order to change its size, you’ll need to add some CSS commands. Here’s how to do that:

• Go into your CSS by clicking on App.css 
• There you can easily enter in the numbers in inches and React JS will know the size in which it should display your image
• As you can see, the following CSS can be used to perform the size alteration task

{% code-block language="js" %}
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
‍{% code-block-end %}

Now when you refresh the page, your image will be presented in the desired size.

Conclusion

We also recommend that you add all of your image tags within the public folder, no matter what they are.  Then it can be referred to by the commands outlined earlier in the article. We’ve purposely highlighted this information multiple times to make sure that you don’t add the images folder in the src folder, because that is simply irrelevant. 

You should now be able to compile a React Application and import an image in ReactJS. You can visit the GitHub repo to further understand the code.

We hope this article has clarified each and every step from compiling a React application in node.JS, to adding an image into your work, to altering its size. Now you can perform all those tasks without any trouble.

‍