Include Reactjs Bundled component inside html file

create react app
react, ( lazy)
webpack
react dynamic import
add react component to html
react require html file
use react component in vanilla js
react router code splitting

I have a reactjs npm package, and I want to include it in html file, I got the bundeled files here but I'm facing an issue that require isn't a function, because i'm not in a nodejs project. So i can't import other dependencies, Can anyone help me further?

console.log(window.React, 'AAB');

window.ReactDOM.render(window.React.createElement(window.ListItem, {
  labelOption: 'name',
  typeOption: 'type',
  valueOption: 'k',
  onRemoveItem: (e) => {console.log('1')},
  item: {name: 'Zeyad', type: 'person'}
}, 'Hi'), document.getElementById("app"));
<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="https://unpkg.com/react-multiple-selector@1.0.7/dist/styles.css">
  </head>

  <body>
    Name:
    <div id="app"></div>

    <script>
var exports = {};
    </script>
    <script
      crossorigin
src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
    ></script>
    <script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/index.js"></script>
    <script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/ListItem.js"></script>
    <script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/data.js"></script>
  <script src="https://gist.githubusercontent.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js"></script>
  </body>
</html>

If you want to create a simple reactjs application, you can use umd and an example is available from the react website itself - here

However, not all modules that are built for reactjs support UMD, and you will have to use react in a bundled fashion. Read the official documentation and more. react-multiple-selector looks like it does not support UMD yet.

The inspector console shows that the error is from https://unpkg.com/react-multiple-selector@1.0.7/dist/index.js and https://unpkg.com/react-multiple-selector@1.0.7/dist/ListItem.js

While searching for an option for require in a browser, I came across this SO. However, know that you are trying to hack your way into doing this, and is only a hack not a solution.

Code-Splitting – React, Most React apps will have their files “bundled” using tools like Webpack, Rollup This bundle can then be included on a webpage to load an entire app at once. The lazy component should then be rendered inside a Suspense component,  The component has to include the extends React.Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component's functions. The component also requires a render () method, this method returns HTML. Example. Create a Class component called Car.


in its current form, the package is still an npm package: you need to install it locally along with its peer-dependencies, and then build it using a build tool like webpack or parcel or (parcel is by far the easiest)

to build it using parcel, do the following create a folder, go inside of it and open a terminal, and run the following commands

npm init -y
npm install -g parcel-bundler
npm install react-multiple-selector react react-dom react-scripts react-select lodash.debounce

create an index.js file under src/index.js, and put the following code inside of it

import React from 'react';
import ReactDOM from 'react-dom';
import ListItem from 'react-multiple-selector/dist/ListItem';

ReactDOM.render(React.createElement(ListItem, {
  labelOption: 'name',
  typeOption: 'type',
  valueOption: 'k',
  onRemoveItem: (e) => {console.log('1')},
  item: {name: 'Zeyad', type: 'person'}
}, 'Hi'), document.getElementById("app"));

put your index.html under src/assets/, and include the index.js using a relative path. it should look like the following

<!DOCTYPE html>
<html>
  <head>
    <title>Parcel Sandbox</title>
    <meta charset="UTF-8" />
    <link href="https://unpkg.com/react-multiple-selector@1.0.7/dist/styles.css">
  </head>

  <body>
    Name:
    <div id="app"></div>
    <script src="../index.js"></script>
  </body>
</html>

from the root of your folder, run parcel -p 1234 watch src/assets/index.html your page should be available at localhost:1234

How to Use React Components with Vanilla JavaScript · GoodData.UI, You can build a custom bundle, include it using the <script src=> HTML tag, and use without the React framework (for example, with Vanilla JavaScript, Using webpack to transpile and bundle the files provided by the GoodData UI SDK into which was retrieved using the Kpi component, inside a specific <div> element: You don't need an include. You can just add the code to the existing JavaScript file. Or you can call both files separately from the HTML file.


Have you considered creating a React project to utilize the npm package instead of keeping everything in a single html file?

https://reactjs.org/docs/getting-started.html

How to include HTML in your React app with webpack, To bundle some HTML content with webpack, install the html-loader than HTML in that separate file, so no React components for example. The first two tags load React. The third one will load your component code. Step 3: Create a React Component . Create a file called like_button.js next to your HTML page. Open this starter code and paste it into the file you created. Tip. This code defines a React component called LikeButton.


4 Ways to Add External JavaScript Files in React - Better , can then be included on a webpage to load an entire app at once. This tells webpack to include that file in the bundle. Unlike CSS imports, importing a file gives you a string value. This value is the final path you can reference in your code, e.g. as the src attribute of an image or the href of a link to a PDF.


Multi Page Application with React, files to head using the <script> tag in our global index. html file. 9 Ways To Implement CSS in React JS. To make use of this code for import style-component into your JS File as shown below👇 It adds CSS at the time of rendering components inside DOM


React and Web Components, Lastly, edit index.html file where <Menu> react component will be rendered: of the html file is the <div> tag with an id HTML attribute “menu” inside html files that includes all webpack bundles and webpack-dev-server as a  We call such components “function components” because they are literally JavaScript functions. You can also use an ES6 class to define a component: class Welcome extends React .