Saya baru di react.js Saya telah menerapkan satu komponen di mana saya mengambil data dari server dan menggunakannya seperti,

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'
        //});
    });
},

Saya ingin menyimpan Url dalam file konfigurasi jadi ketika saya menerapkan ini di server Pengujian atau Produksi saya hanya perlu mengubah url pada file konfigurasi bukan di file js tetapi saya tidak tahu cara menggunakan file konfigurasi di react.js

Adakah yang bisa membimbing saya bagaimana saya bisa mencapai ini?

Dengan webpack, Anda dapat memasukkan konfigurasi khusus env ke dalam externalsbidangwebpack.config.js

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

Jika Anda ingin menyimpan konfigurasi dalam file JSON terpisah, itu juga memungkinkan, Anda dapat meminta file itu dan menetapkan ke Config:

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

Kemudian di modul Anda, Anda dapat menggunakan konfigurasi:

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

Untuk React:

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

Tidak yakin apakah ini mencakup kasus penggunaan Anda, tetapi berfungsi dengan baik untuk kami.

Jika Anda menggunakan Create React App, Anda dapat mengatur variabel lingkungan menggunakan file .env. Dokumentasinya ada di sini:

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

Pada dasarnya lakukan sesuatu seperti ini di file .env di root proyek.

REACT_APP_NOT_SECRET_CODE=abcdef

Anda dapat mengaksesnya dari komponen Anda dengan

process.env.REACT_APP_NOT_SECRET_CODE

Anda dapat menggunakan paket dotenv apa pun penyiapan yang Anda gunakan. Ini memungkinkan Anda untuk membuat .env di root proyek Anda dan menentukan kunci Anda seperti itu

REACT_APP_SERVER_PORT=8000

Dalam file entri aplikasi Anda panggil saja dotenv (); sebelum mengakses kunci seperti itu

process.env.REACT_APP_SERVER_PORT

Jika Anda memiliki file .properties atau file .ini

Sebenarnya jika Anda memiliki file yang memiliki pasangan nilai kunci seperti ini:

someKey=someValue
someOtherKey=someOtherValue

Anda dapat mengimpornya ke webpack dengan modul npm bernama properties-reader

Saya menemukan ini sangat membantu karena saya mengintegrasikan react dengan framework Java Spring di mana sudah ada file application.properties. Ini membantu saya menyatukan semua konfigurasi di satu tempat.

1. Impor itu dari bagian dependensi di package.json

"properties-reader": "0.0.16"

2. Impor modul ini ke webpack.config.js di atas

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

3. Baca file properti

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

4. Impor konstanta ini sebagai config

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

5. Gunakan dengan cara yang sama seperti yang disebutkan dalam jawaban yang diterima

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