If this is just adding BASE_URL, then this can be achieved by declaring it inside a constants.js file and exporting it from there. But then, that makes us do BASE_URL + "something" each time we make a network request which isn't really ideal either. Also there might be some scenarios where other configuration have to be shared, like say, a common header that has to be added to all the requests.

To solve this, most request libraries have in-build solutions. If we are choosing axios as the most popular one, we can create a instance like:

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
export default instance;

and import this everywhere the axios is going to be used like:

import axios from "./axios-instance";

assuming axios-instance.js is the file where the instance is created. Now you can skip adding the BASE_URL to every request as it is already provided in the instance.

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'

I think that won't work, you could use react-context or redux to save and update that value or

this.props.navigation.setParams({ pais: value })

and then get that value when you need it

this.props.navigation.getParam('pais')

Object properties work, as would most things, but they won’t be set until the request gets a response.

const request = Axios.get(...)
  .then(response => {console.log(‘done!’); this.response = response});

console.log(`Response is ${this.response}`)

setTimeout(()=>console.log(`After 10s: the response is ${this.response}`, 10000)

Will likely show up as

Response is undefined
Done!
After 10s: the response is /*something*/

In the context of a react component, what you probably want is to run the query when the component mounts, and then store the output in the component state. The component re-renders when it’s state changes, so it’ll correctly update to hold the received data

class Level extends React.Component {
  constructor(){
    super();
    this.state = {loading:true};
  }

  async componentDidMount(){
    const request = await Axios.get(...):
    const newState = { ...request, loading:false }
    this.setState(newState);
  }

  render() {
      if(this.state.loading){
          return <p>loading...</p>
      }
      /*this.state has your stuff*/
  }

Beyond React

You might not be aware that an import is global already. If you export an object (singleton) it is then globally accessible as an import statement and it can also be modified globally.

If you want to initialize something globally but ensure its only modified once, you can use this singleton approach that initially has modifiable properties but then you can use Object.freeze after its first use to ensure its immutable in your init scenario.

const myInitObject = {}
export default myInitObject

then in your init method referencing it:

import myInitObject from './myInitObject'
myInitObject.someProp = 'i am about to get cold'
Object.freeze(myInitObject)

The myInitObject will still be global as it can be referenced anywhere as an import but will remain frozen and throw if anyone attempts to modify it.

Example of react state using singleton

https://codesandbox.io/s/adoring-architecture-ru3vt (see UserContext.tsx)

If using react-create-app

(what I was looking for actually) In this scenario you can also initialize global objects cleanly when referencing environment variables.

Creating a .env file at the root of your project with prefixed REACT_APP_ variables inside does quite nicely. You can reference within your JS and JSX process.env.REACT_APP_SOME_VAR as you need AND it's immutable by design.

This avoids having to set window.myVar = %REACT_APP_MY_VAR% in HTML.

See more useful details about this from Facebook directly:

https://facebook.github.io/create-react-app/docs/adding-custom-environment-variables

It is a terrible idea, but probably the best/easiest way to use a global variable in React is to put it on the window. In a component you could do something like window.topicText="some text" and then access it via window.topicText everywhere else.

Ideally, if you have data, and in your case likely state, that you need to persist from component to component, you should look into something like Redux or Flux. I prefer Redux.