How to Add React Js On an Existing Website?

Question

So reactjs.org has an excellent tutorial on how to add react js to an existing website HERE by adding react js code as scripts. That is working well for me. My doubt is that how would we work with components that we download from npm?(eg: react-router, react-bootstrap,etc.) Usually when we work on a complete react project we just install them with npm and import them in react js, but how do we install such components or get their script files like we got react script files?

Answer 1

The process would be similar to the process described on the React site. In their example, they implement a simple single-component (<LikeButton />) application with no external dependencies. To use external components/modules you would need to either bundle them into your app, or load them as scripts.

Preferred Method

The preferred method would be to use a bundler like webpack, parcel, or similar to bundle your code and modules into a single script.

1. Create your app.js file, using imports to load external components

   import React from 'react';
   import Button from '@material-ui/core/Button';
   
   const LittleApp = () => (
     <Button variant="contained" color="primary">
       Hello World
     </Button>
   );
   
   ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));
   
   

2. Use webpack, parcel, or similar to bundle the app.js into a single bundled.js file

3. Load the bundled.js file into your page

Alternate Method

It's also possible to load certain components using Universal Module Definition (UMD) files in <script> tags. This could work for a simple add-on app, but probably not recommended in most cases. I tend to use these only when prototyping ideas, or demoing solutions on Stack Overflow.

Something like this:

const LittleApp = () => {
  return (
    <div>
      <MaterialUI.Button variant="contained" color="primary">
        Hello World
      </MaterialUI.Button>
    </div>
  )
}

ReactDOM.render(<LittleApp />, document.getElementById("littleApp"));

<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/@material-ui/core@latest/umd/material-ui.development.js"></script>

<div id="littleApp"></div>

Answer 2

I think you can add those library using <script> as well. react-router: <script src="https://unpkg.com/react-router/umd/react-router.min.js"></script>

react-bootstrap: <script src="https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js" crossorigin />

check the documentation for corresponding library.