How Can I Pass A Variable From 'outside' To A React App?

I have created a react app using create-react-app my-app. I have an existing web page, and the react app attaches to a div within the html page - as per normal. The web page has s

Solution 1:

I see two options here.

1. Assign the variables to the window object
2. Use environment variables

Using the window object

To use the window object, declare the variable as

myVar = 'someString'

or

window.myVar = 'someString'

In both cases you'll access the variable within React with window.myVar. Here's a quick example:

classAppextendsReact.Component {
  render() {
    return (
      <div><h1>Hello, React and ES6!</h1><p>Let's play. :)</p><p>{window.myVar}</p></div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("app"));

html,
body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: Helvetica Neue;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script><divid="app"></div><script>window.myVar = 'someString2'</script>

Using environment variables

The Create React App build allows for environment variables to be used within the app. To add an environment variable create a .env file in the root of your project, then add the appropriate variables and prefix the variable name with REACT_APP_. For example:

REACT_APP_MYVAR = "someString"

In the app these variables can be accessed within your components with {process.env.REACT_APP_MYVAR}, or within the HTML with %REACT_APP_MYVAR%.

Solution 2:

The EcmaScript 6 introduced block-scope variables and constants declared by let resp. const.

In contrast to the "old style" declaration of variable by var the visibility of such variable resp. constant is limited to actual block.

The scope of constant const1 (resp. const2) is therefore limited only to the code inside the script tag. To be able to access the const1 (resp. const2) from another script tag you would need to change its visibility. This can be achieved either by declaring it by var or by assigning its value to a variable declared by var.

E.g.:

<scripttype="text/javascript">const const1 = "1234";
  const const2 = "5678";
  var visibleConst1 = const1;
</script>

Later in your React application you can read it from window.visibleConst1.