How do I pass a variable from "outside" to the response app?
I created a react app using create-react-app my-app
. I have an existing web page and the react app is attached to a div in the html page - as usual.
The web page has some javascript const1
and global constants const2
that are required for the app-to-application to work. Is there a way to pass these variables into the response application? The structure looks like this
<script type="text/javascript">
const const1 = "1234";
const const2 = "5678";
</script>
<script type="text/javascript" src = "/static/react-app.js" ></script>
I'm afraid because the javascript was of course cut short during the build phase, so any declarations look like this:
class App extends React.Component{
constructor(props) {
super(props);
this.state = {
stat1: const1,
stat2: const2,
do not work as variables are being overwritten. I tried to be mean and use eval like this
const const1 = eval("function c1(){console.log(const1);return const1;};c1();");
but eval (and console.log) will return undefined. Is there a way that I can call the react component and pass its variables externally?
source to share
I see two options here.
- Assign variables to an object
window
- Use environment variables
Object use window
To use an object window
, declare the variable as
myVar = 'someString'
or
window.myVar = 'someString'
In both cases, you will access the variable within React with window.myVar
. Here's a quick example:
class App extends React.Component {
render() {
return (
<div>
<h1>Hello, React and ES6!</h1>
<p>Let 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;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
<script>
window.myVar = 'someString2'
</script>
Using environment variables
The Create React App construct allows you to use environment variables to be used in your application. To add an environment variable, create a file .env
at the root of your project, then add the appropriate variables and prefix the variable name REACT_APP_
. For example:
REACT_APP_MYVAR = "someString"
In an application, these variables can be accessed in your components using {process.env.REACT_APP_MYVAR}
or inside HTML using %REACT_APP_MYVAR%
.
source to share
In EcmaScript 6, block variables and constants were introduced, declared let
accordingly. const
...
Unlike the "old style" declaration of a variable, the var
visibility of such a variable is appropriate. the constant is limited to the actual block.
So the scope of constants is const1
(accordingly const2
) limited to only the code inside the script tag. To be able to access const1
(appropriately const2
) from another script tag, you will need to change its visibility. This can be achieved either by declaring it var
or by assigning its value to a variable declared var
.
eg:.
<script type="text/javascript">
const const1 = "1234";
const const2 = "5678";
var visibleConst1 = const1;
</script>
Later in your React app, you can read it from window.visibleConst1
.
source to share