Search for a command to run...
I like designing websites, discussing ideas, and meeting new people bundled with a deep passion for building things from scratch. I have an immense craze for DIYs, fiction, country music, and movies. I am always learning new things that make me a better developer everyday. I am open to new ideas and hop onboard new projects if I like them. I'm always full of ideas, so you'll always find me working on something or the other.
No comments yet. Be the first to comment.
Chapter 1: Uncovering the mysteries of your OS
Beginner-Friendly Java Data Structure Tutorial for Developers Switching from Other Languages
Understand the real-world architectural change as AI shifts its base from cloud platforms to personal tech gadgets.
Introduction Banking websites are among the most secure systems due to their desire for security and because many reserve banks enforce strict security guidelines. Banks adhered to this approach rigorously. Every new feature underwent thorough vettin...
India's new Digital Currency's pilot program is here.
Let's suppose you are making an app that makes a lot of requests to the backend at http://localhost:3000. Now you move to production build, and the URL is changed to https://yasharyan.com after hosting it on whatever hosting service you are using. Imagine the pain of going to every line you have used the localhost URL and changing it to the new URL. Wouldn't it be nice if you would have coded smart and used a global variable to just type this:
${URL}/server-time-up/UTC/
There are so many ways you can create Global Variables in React JS that can be accessed in every component of your web app. I am going to tell you about the most common and easy ones.
Context provides a way to pass data through the component tree without having to pass props down manually at every level. The best part about it is that there is no need for external dependencies to be installed. Context is bundled with React. It has a simple approach. Let's say you have many components that want to use a common variable. Rather than keep passing it as a prop from the parent component, it can easily be imported from the Context.
For easily readable code, it's better to create a context directory in the src folder of your react app. Then create a CONTEXT_NAMEContext.js file in that folder.
There is no restriction on how many contexts you can have in a project. In fact, you can have a dedicated context for each functionality your app wants to use Context for. The code for creating a Context looks like this:
import React, { createContext, useState } from 'react'
export const SampleContext = createContext()
const SampleContextProvider = (props) => {
const [variableOne, setVariableOne] = useState('somethingRandom`)
const Url = "http://localhost:3000"
return (
<SampleContext.Provider
value={{
variableOne,
Url
}}>
{props.children}
</SampleContext.Provider>
)
}
export default SampleContextProvider
Notice that all the variables (and even functions) that need to be made global are passed down as values in the return statement. Now that the Context was exported, it's time to import it into the components. First, go to your App.js file and wrap all the components you want to access the context. All child components will automatically inherit the context.
import React, { Fragment } from 'react'
import Component_One from './Component_One'
import Component_Two from './Component_Two'
import Component_Three from './Component_Three'
import SampleContextProvider from '../contexts/SampleContext'
const mainComponent = () => {
return (
<Fragment>
<h1>This is a sample component</h1>
<SampleContextProvider>
<Component_One />
<Component_Two />
<Component_Three />
</SampleContextProvider>
</Fragment>
)
}
Notice how all imported components were wrapped with <SampleContextProvider>? All these components now have access to all the values in the context. To access (consume) them, you'll have to do the following:
import React, { Fragment, useState, useContext } from 'react'
import SampleContext from '../contexts/SampleContext'
import axios from 'axios'
const Component_One = () => {
const { variableOne, Url } = useContext(SampleContext)
const [getServerTimeUp, setServerTimeUp ] = useState()
axios.get(`${Url}/server-time-up/UTC/`)
.then(res => {
setServerTimeUp(res.data.time)
}
return (
<Fragment>
<h1>This is the value of variableOne: {variableOne}</h1>
<p>{getServerTimeUp}</p>
</Fragment>
)
}
This way, you can globally set and get variables in whatever component you need.
If you have used NodeJS, you've probably used or heard of .env files. Let's get that feature on your React app.
If you are using the create-react-app to quickly set up your React app, your work to add a .env file is already half done.
.env file. Remember that you need to start each variable with a REACT_APP_ for it to work; otherwise, your variables will not be imported.REACT_APP_DATABASE=redis
REACT_APP_FIRST_RELEASE=02Nov2019
REACT_APP_LAST_UPDATE=07Dec2020
process.env.REACT_APP_.render() {
return (
<div>
<h1>
We are using {process.env.REACT_APP_DATABASE}
</h1>
</div>
);
}
If you are into having more control over your project and writing webpack by yourself, you'll need to do a few more steps to set up .env support.
npm install dotenv or yarn install dotenvrequire('dotenv').config()REACT_APP_ if you are not using create-react-app.
src folder and create a new folder called constants or whatever you want to name it.
global.js and then export them so that they can be imported into other components.const Url = 'http://localhost:5000'
const themeDefault = 'dark'
const namesOfModes = ['dark', 'moonlight', 'eclipse', 'light']
export { Url, themeDefault, namesOfModes }
import React from 'react'
import { Url, themeDefault, namesOfModes } from '../constants/global'
const Component_Three = () => {
return (
<div>
<h1>Current Theme: {themeDefault}</h1>
<p>Homepage: {Url}</p>
</div>
)
}
Note: You'll argue that you can use packages like Redux and RecoilJS, but let me remind you that they are state management tools, and they should not be used just to store global constants.
Hope you found this article informative and intriguing. If it helped you, do give it a like š§” and share it with people who might find it useful. Also check out my Instagram and Facebook pages for more content.
