Sono nuovo su react.js, ho implementato un componente in cui sto recuperando i dati dal server e lo uso come,

CallEnterprise:function(TenantId){


    fetchData('http://xxx.xxx.xx.xx:8090/Enterprises?TenantId='+TenantId+' &format=json').then(function(enterprises) 
    {
        EnterprisePerspectiveActions.getEnterprise(enterprises);
    }).catch(function()
    {
        alert("There was some issue in API Call please contact Admin");
        //ComponentAppDispatcher.handleViewAction({
        //    actionType: MetaItemConstants.RECEIVE_ERROR,
        //    error: 'There was a problem getting the enterprises'
        //});
    });
},

Voglio memorizzare l'URL nel file di configurazione, quindi quando l'ho distribuito sul server di test o sulla produzione devo solo cambiare l'URL sul file di configurazione non nel file js ma non so come utilizzare il file di configurazione in react.js

Qualcuno può guidarmi per favore come posso raggiungere questo obiettivo?

Con webpack puoi inserire la configurazione specifica di env nel externalscampo inwebpack.config.js

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? {
    serverUrl: "https://myserver.com"
  } : {
    serverUrl: "http://localhost:8090"
  })
}

Se vuoi memorizzare le configurazioni in un file JSON separato, anche questo è possibile, puoi richiedere quel file e assegnarlo a Config:

externals: {
  'Config': JSON.stringify(process.env.NODE_ENV === 'production' ? require('./config.prod.json') : require('./config.dev.json'))
}

Quindi nei tuoi moduli, puoi usare la configurazione:

var Config = require('Config')
fetchData(Config.serverUrl + '/Enterprises/...')

Per React:

import Config from 'Config';
axios.get(this.app_url, {
        'headers': Config.headers
        }).then(...);

Non sono sicuro che copra il tuo caso d'uso, ma ha funzionato abbastanza bene per noi.

Se hai utilizzato Crea app React, puoi impostare una variabile di ambiente utilizzando un file .env. La documentazione è qui:

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

Fondamentalmente fai qualcosa di simile nel file .env alla radice del progetto.

REACT_APP_NOT_SECRET_CODE=abcdef

Puoi accedervi dal tuo componente con

process.env.REACT_APP_NOT_SECRET_CODE

Puoi usare il pacchetto dotenv indipendentemente dalla configurazione che usi. Ti permette di creare un .env nella radice del tuo progetto e di specificare le tue chiavi in ​​questo modo

REACT_APP_SERVER_PORT=8000

Nel file di ingresso delle applicazioni è sufficiente chiamare dotenv (); prima di accedere alle chiavi in ​​questo modo

process.env.REACT_APP_SERVER_PORT

Nel caso tu abbia un file .properties o un file .ini

In realtà nel caso in cui tu abbia un file con coppie di valori chiave come questa:

someKey=someValue
someOtherKey=someOtherValue

Puoi importarlo nel webpack da un modulo npm chiamato properties-reader

L'ho trovato molto utile poiché sto integrando React con il framework Java Spring dove è già presente un file application.properties. Questo mi aiuta a mantenere tutte le configurazioni insieme in un unico posto.

1. Importalo dalla sezione delle dipendenze in package.json

"properties-reader": "0.0.16"

2. Importa questo modulo in webpack.config.js in alto

const PropertiesReader = require('properties-reader');

3. Leggi il file delle proprietà

const appProperties = PropertiesReader('Path/to/your/properties.file')._properties;

4. Importa questa costante come config

externals: { 'Config': JSON.stringify(appProperties) }

5. Usalo nello stesso modo indicato nella risposta accettata

var Config = require('Config') fetchData(Config.serverUrl + '/Enterprises/...')