Everything You Need to Know About React JS Import

Introduction About React JS Import

React JS is an illustrative UI library for creating user-interface. It is based on different components. React JS Import permits to build summarized components that handle their own position. It provides easier programming models and great performance. React JS is used to create web applications and even mobile applications with help of React Native Extension. It is all managed by Facebook. React JS is growing as it’s easy to learn and allows reusable components. The bunch of interactive components makes the React Apps complete. From creating the components to import and export, all together make it effective.

Importing 

The JS world grew up more with the function of importing and exporting patterns with the support of ES2015. For understanding the concept of ‘importing’, we need to learn the importing of various components, react and reach domain, default import, images, and file imports. Importing needs the allowance of modules. React allows each component to be used as a module or a named parameter to import and export it and perform the basic operation. Here, we use import and from as keywords to import particular modules.

One particular value required in imports of any module, image, external files is the address. The address here refers to the relative location of these individual imported components required in the particular module, present inside the root folder of our react application. Each and every component file in React JS , needs to import the modules and other static files that are to be used in the particular module. Importing is not inherited by the file system, so any import made by a parent component doesn’t work for child components, and the child component’s react file has to make its own imports.

There are various ways to apply the import operation to React JS :

1.To import a default export –

A default import from a module in ReactJS is possible if that module has exported a module with export default given_name.  Once a module has a default export, it can be imported in another module using the import keyword.

 In order, to import the default export from any file, we use the keyword import and then the address. A GIVEN_NAME is optional, and may or may not be required, based on the modules.

Here is the syntax to follow

Syntax

import GIVEN_NAME from ADDRESS

E.g.

import React from ‘react’

The default import will lead to an error if there was no default export made in the module used for importing. Any module can make only one default export of a function or component and have to use named export if there is more than one export.

2. To import a named export –

A module may contain more than one export from its file with syntax export given_name. Since the export here does not default, the import of these particular functions or components cannot be made default. Each module or function from the module required in the current component’s ReactJS file needs to be imported and have various name parameters.

To import any named exports and for the multiple parameters we use commas to separate them and curly braces to close. This syntax is used as follows:

Syntax

import { PARA_NAME } from ADDRESS

E.g.

import { render } from ‘react-dom’

E.g.

import { Browser Router, Match, Miss } from ‘react-router’

The imports can very much be given custom names for easy access. This decision depends entirely on the programmer.

E.g.

import { Browser Router as Router, Match, Miss } from ‘react-router’

3. To Import a combination of Default export and named value –

A module can contain a combination of default as well as named exports of functions and values. No extra information about imports is required. In such a scenario, we import the combination of default export and named value component. For that, we apply the same syntax for both but together as :

Syntax

import GIVEN_NAME, { PARA_NAME, … } from ADDRESS

E.g.

import React,{ render } from ‘react-dom’

The React is imported as default import and renders as named import. For more than one named export, simply add a comma(,) within curly braces after every named value and import the required values or functions.

4. To import an image –

Importing an image in ReactJS is not an easy task as there are two ways to make the images available. The image could be added inside the Public folder which contains the HTML file as well, or the image could be added to the src folder which contains all the component files. Here, first, we have to check whether the image is in a public folder or inside the Src folder.

Image from ‘Public’ folder

To import an image from public folder we need to use “PUBLIC_URL” and to access it we use “%PUBLIC_URL%”

<link rel=”favicon icon” href=”%PUBLIC_URL%/favicon.ico”/>

<link rel=”stylesheet” type=”text//css” href=”%PUBLIC_URL%/styles.css”/>

For Example – If your image is inside under public folder but in a sub-folder

<img src=”%PUBLIC_URL%/mypic.jpg” alt=”mypic”/> 

<img src=”%PUBLIC_URL%/images/mypic.jpg” alt=”mypic”/>5.

Image from ‘src’ folder – Image import in react js can be done easily by aliasing the address of the imported image and using a custom name (not a keyword) for this purpose. This import returns a string which is used as an address to reference the image or other files ,unlike CSS imports. Now the address string can be used in the src attribute of image tag , or href attribute of other tags easily.

Syntax

import REF_NAME_FOR_IMAGE from ADDRESS

E.g.

import srtyLogo from ‘./images/srty.png’

<img src={SrtyLogo} />

E.g.

import pic from ‘./mypic.jpg’

<img src={pic} alt=”mypic”/>

5. Importing Files –

Import of static CSS files doesn’t even require aliasing. This type of import is called default import. CSS(Cascading style sheets) used for styling purposes of web pages.

Syntax

import ADDRESS

E.g.

import ‘./css/normalize.css’

import ‘./css/bootstrap.css’

6. Importing using an alias  –

Here, we assign a custom name to import. When the component name is quite big, and we have to use it in different places, while importing we give it a custom name so that it could be used easily.

Syntax

import GIVEN_NAME as CUSTOM_NAME from ADDRESS

E.g.

 import {Button as btn} from ‘component-library’;

E.g.

import * as everyThing from ‘myComponent’;

In example 2, we have imported the whole module.