February 23, 2024

How to perform import/export in client-side React JSX using Babel-Standalone?

If you are new to ReactJS and wish to start learning from the very basics without installing Node.js or using npm packages, you can still set up a basic React environment using just HTML, Babel, and the React and ReactDOM libraries from a Content Delivery Network (CDN). This approach is suitable for beginners who want a quick introduction to React without diving into the complexities of a full development environment.

Step 1: Set Up Your HTML File
Create an HTML file and include the necessary script tags to import React, ReactDOM, and Babel from a CDN.
index.html file code


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Hello React!</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
</head>
<body>
<div id="entryPoint"></div>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./Hello.js"></script>
<script data-plugins="transform-es2015-modules-umd" type="text/babel" src="./app.js">


  </script>
</body>
</html>

– react.development.js will load a React library. Library is responsible for creating and managing the virtual DOM. It provides the core functionality of the React library. It includes essential features such as creating and managing components, handling component state and props, and managing the component lifecycle.

– react-dom.development.js will load ReactDom library, specifically focused on rendering React components to the actual DOM.

– babel.min.js, you would use when you want to use jsx syntax, as such browser would not understand this syntax. so babel here would work as a compiler that converts the jsx to browser understandable javasscript code

– loading file with type=”text/babel”, it tells to babel script that we going to load a jsx code and it is responsible to transpiling to JavaScript code

– As my Hello.js and app.js contains the es6 class component, we will need to tell the babel that specifically. The data-plugins attribute with the value “transform-es2015-modules-umd” is used to specify a Babel plugin that should be applied when transpiling your JavaScript code. In this case, it indicates the use of the transform-es2015-modules-umd plugin.

The transform-es2015-modules-umd plugin is designed to transform ES2015 (ES6) module syntax to Universal Module Definition (UMD) syntax. UMD is a format that allows a JavaScript library to work in different environments, such as CommonJS, AMD, or as a global variable.

Step 2: Write Basic React Code

App.js file code


import Hello from './Hello'
class MyComponent extends React.Component {
constructor(props) {
super(props);
// Initialize state if needed
this.state = {
// your state properties here
};
}

// Define your component's render method
render() {
return (
<Hello />
);
}
}

// Render your component to the root element
const rootElement = document.getElementById('entryPoint');
ReactDOM.render(<MyComponent />, rootElement);

Step 3: Create basic react component with es6 syntax
Hello.js file code


class Hello extends React.Component{
render(){
return <div>Hello React!</div>
}
}

export default Hello;

Step 4: Open in Browser
Save your HTML file and open it in a web browser. You should see your React component rendering “Hello React!” in the specified div element.

This approach allows you to experiment with React without setting up a complete development environment. As you progress in your learning journey, you may explore more sophisticated setups involving Node.js, npm, and modern build tools for larger and more complex React projects.

You can also download a complete code from my github repository

Author: Sendy cooper