Global Variables in ReactJS

Question

We're currently working on a school project and we have a part of the app that's kind of "external". (Just used for displaying a graph) So that /graph folder is now in the /src folder and when compiling the react app we get tons of import errors. Is there a way to bypass those imports and just use the global variables, which are already implemented?

Webpack ProvidePlugin sounds like a good fit for defining a bunch of globals. webpack.js.org/plugins/provide-plugin — arpl
– arpl, Commented Dec 11, 2017 at 20:46
Also check webpack externals webpack.js.org/configuration/externals — arpl
– arpl, Commented Dec 11, 2017 at 20:56

remelkabir · Accepted Answer · 2017-12-11 21:48:58Z

Global variables in React can be implemented using webpack.config.js file.

Inside the webpack config file declare your global variable.

i.e. const API_URL = JSON.stringify('http://api:8080'); Also, you need to add new plugins to webpack, in order for this global variable to be accessible by your whole app.

new webpack.DefinePlugin({ //defining gloabl variable
        API_URL,
});

But global variable aside if just want to get rid of the component and module import error, then you can simply set aliases for those in your .babelrc file. This way, you do not need to write '../../..something', you can just write 'something'.

{
"presets": ["react", "es2015", "stage-0"],

"plugins": [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "src": "/",
        "components": "/components",
        "actions": "/actions",
        "containers": "/containers",
        "images": "/images",
        "reducers": "/reducers",
        "styles": "/styles",
        "utils": "/utils",
      }
    }]
]
}}

This is a sample .babelrc file with alias for components and other folders. Now from any where in the app if I write import { Something } from 'components/Something', my app will know where to find it. No need to write '../../../components/Something'

Yossi · Accepted Answer · 2017-12-11 20:59:04Z

0

It is not recomended to use global variables, but you can simply use window object to save variables, for example window.myGlobalVar = 3. In addition, you can use react context.

answered Dec 11, 2017 at 20:59

Yossi

4452 silver badges9 bronze badges

Comments

AlbertS · Accepted Answer · 2018-01-18 04:23:42Z

0

You can try this:

Parent.js

var myVar = {}

class MyComponent extends Component {

...
...
myVar = new Object();
...
...
render() {
   return <div>
                 \\ children
                 <MyLeftBranch myVar={myVar} />
                 <MyRightBranch myVar={myVar} />
              </div>
}
}

export default MyComponent;

child.js

class Child extends Component {
     { myVar } = this.props;
     \\use myVar
}

edited Jan 18, 2018 at 4:23

answered Jan 18, 2018 at 4:17

AlbertS

7366 silver badges12 bronze badges

Collectives™ on Stack Overflow

Global Variables in ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related