Can home_url() be dynamically passed to a theme built with React?

Question

Testing out and building a WordPress theme in React I've typically seen the URL hard coded in a componentDidMount like:

class Home extends React.Component{
    componentDidMount(){
        const API_URL = 'https://foobar/wp-json/wp/v2/posts/';
        this.serverRequest = $.get(API_URL, function (result) {
            this.setState({
                result:result,
                loaded:true
            });
        }.bind(this));
    }
}
export default Home;

but I was curious to know if there was a way in the functions.php -> Home.js I can pass home_url , in the example https://foobar , without having to manually modify Home.js?

Per querying the site with the paramters [wordpress][reactjs] I've been unable to find if this is asked. Can this be done or a way to pass the wp-json/wp/v2 to React dynamically?

---

Edit:

There appears to be some confusion in what I'm trying to do. If you were to use Axios with React instead of fetch, example from Using Axios with React , you'd have to use a GET to pull the WP_JSON from WordPress. The example link uses:

componentDidMount() {
    axios.get(`https://jsonplaceholder.typicode.com/users`)
        .then(res => {
            const persons = res.data;
            this.setState({ persons });
        })
}

the URL, https://jsonplaceholder.typicode.com/users , is static and every time I were to load this theme to a new site, the URL will need to be changed. How can I change the present URL to match the theme's hosted URL dynamically so that if the domain were to change from:

https://jsonplaceholder.typicode.com/users

to

https://jsonwinners.typicode.com/users

I wouldn't have to do it manually.

Answer 1

Judging from what you're trying to achieve, i would rather use document.location.origin

however, to answer your question, you CAN get php to send a variable to javascript....

---

Method 1 (dirty) - custom script tag in the head

add_action('wp_head', function(){
     echo '<script>var MY_OBJ.users_url = "'.home_url('/users').'";</script>';
});

and then in your js file...

 componentDidMount() {
      axios.get(MY_OBJ.users_url)
         .then(res => {
             const persons = res.data;
              this.setState({ persons });
         })
 }

---

Method 2 - localized script

wp_enqueue_script( 'home-js', get_theme_file_uri('/assets/js/Home.js'), array(), '1.0', true );

$my_php_array = array(
    'home_url' => home_url('')
    'users_url' => home_url('/users')
);

wp_localize_script( 'home-js', 'MY_OBJ', $my_php_array );

and then in your js file...

 componentDidMount() {
      axios.get(MY_OBJ.users_url)
         .then(res => {
             const persons = res.data;
              this.setState({ persons });
         })
 }