Question 283043 in Html Question posted in
Some basic documentation can be found here.

How can I import react app into HTML file?

I am a newbie to JavaScript and Reactjs and I want to ask about how to import a react file from another folder into my current project. Because my current project did not use any react code so now I am so confused about how to add other react code into my project. I have tried multiple things like using npm run build my friend’s code, also using inline . I would really appreciate someone will help me with this problem. Thanks a lot!

Below is my HTML file when using npm run build at react code, but using this give my error react-dom.production.min.js:189 ReferenceError: google is not defined

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/body.css" />

    <script type="module" defer src="../js/index.js"></script>
  </head>
  <body>
    <div id="findHospital"></div> //Place that i want replacec with my friend react code

    <script defer src="./../react/build/static/js/main.da7f74d5.js"></script>
  </body>
</html>

I have even tried inline code but it keeps saying that Cannot read properties of undefined (reading ‘render’)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <link rel="stylesheet" href="../css/body.css" />

  </head>
  <body>
    
    <div id="findHospital"></div>

    <!--ADD REACT-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.0/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.0/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/@babel/[email protected]/babel.js"></script>
    <script
      data-plugins="transform-modules-umd"
      data-presets="react"
      data-type="module"
      type="text/babel"
      src="./../react/src/index.js"
    ></script>
    <!-- <script defer src="./../react/build/static/js/main.da7f74d5.js"></script> -->
  </body>
</html>

Here is my app.js react code

// app.js
import React, { useState, useEffect } from 'react';
import { CssBaseline, Grid } from '@material-ui/core';

import { getPlaceData } from './api';

import Header from './components/Header/Header';
import List from './components/List/List';
import Map from './components/Map/Map';

const App = () => {
    const [places, setPlaces] = useState([]);
    const [childClicked, setChildClicked] = useState(null);

    const [coordinates, setCoordinates] = useState({});
    const [currLoc, setCurrLoc] = useState({});
    const [bounds, setBounds] = useState(null);
    
    //const [isLoading, setIsLoading] = useState(false);

    useEffect(() => {
        navigator.geolocation.getCurrentPosition(({ coords: {latitude, longitude}}) => {
            setCoordinates({ lat: latitude, lng: longitude });
            setCurrLoc({ lat: latitude, lng: longitude });
        })
    }, []);

    useEffect(() => {
        //setIsLoading(true);

        getPlaceData(/*bounds.sw, bounds.ne*/)
            .then((data) => {
                //console.log(data);    
                setPlaces(data);
                //setIsLoading(false);
            })
    }, [coordinates, bounds]);

    return (
        <>
            <CssBaseline />
            <Header setCoordinates={setCoordinates} />
            <Grid container spacing={3} style={{width: '100%' }}>
                <Grid item xs={12} md={4}>
                    <List 
                        places={places}
                        childClicked={childClicked}
                        //isLoading={isLoading}
                    />
                </Grid>
                <Grid item xs={12} md={8}>
                    <Map 
                        setCoordinates={setCoordinates}
                        setBounds={setBounds}
                        coordinates={coordinates}
                        currLoc={currLoc}
                        places={places}
                        setChildClicked={setChildClicked}
                    />
                </Grid>
            </Grid>
        </>
    );
}

export default App;

Below is my index.js from react

// index.js
import React from "react";
import ReactDOM from "react-dom";

import App from "./app";

ReactDOM.render(<App />, document.querySelector("#findHospital"));

I am expecting that I can import another react code into my HTML file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/body.css" />

    <script type="module" defer src="../js/index.js"></script>
  </head>
  <body>
    <div id="findHospital">
      <!-- Some magic happen here that my react code can render here-->
    </div>

  </body>
</html>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Well thanks @yeerk for the answer, after another hours scratching head that I have figured how stupid I am. I just need to add <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=MY_KEYS"></script> into my html, also change ReactDOM.render(<App />, document.querySelector("#findHospital")); into and everything works perfectly fine!


  2. 0

    You should import other files in your index.js file. Depending on your environment (you look like you are using a transpiler, which may be TypeScript). This would look like:

    (For a pure JavaScript environment.)

    // index.js
import React from "react";
import ReactDOM from "react-dom";

import App from "./app";

import "./../react/build/static/js/main.da7f74d5";

ReactDOM.render(<App />, document.querySelector("#findHospital"));

    (For a TypeScript environment.)

    // index.js
import React from "react";
import ReactDOM from "react-dom";

import App from "./app";

require("./../react/build/static/js/main.da7f74d5.js");

ReactDOM.render(<App />, document.querySelector("#findHospital"));

    However, your usage will highly depend on what you are trying to access in these others files. It looks like the error your received might be independent from how your are importing the file.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search