React

Last Updated: 3/6/2023

Add React to Website

  • You can write React code directly in HTML.

React

  • Create new file index.html with basic html template

Add reference to scripts React, ReactDOM

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>

Add Root Element

<div id="root"></div>

Create Simple Component

  • Add following code
<script>
function Hello() {
   return React.createElement('h1', {}, 'Hello World');
}
</script>

Add your React component to the page

<script>
const rootNode = document.getElementById('root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(Hello));
</script>

For Production

  • Refer these scripts
<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin></script>

React With JSX

  • Add babel script
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  • In script tag specify type="text/babel"
<script type="text/babel">
  function Hello() {
    return <h1>Hello World</h1>;
  }

  const rootNode = document.getElementById('root');
  const root = ReactDOM.createRoot(rootNode);
  root.render(React.createElement(Hello));
</script>
Previous
Next