Generally when we create a react website we use create-react-app utility. We create the whole project using NodeJS. But it’s possible to use reactjs framework without nodejs. All we need to do is to include react & react-dom scripts which are available on CDN in our html files.
In this article I will create a small application with the help of reactjs without using nodejs.
Step 1: Creating index.html
The first step is to create the basic index.html file. In this file we will include the react and react-dom scripts from CDN. These are the scripts url –
https://unpkg.com/[email protected]/umd/react.production.min.js https://unpkg.com/[email protected]/umd/react-dom.production.min.js
Now we will create index.html and include these links in it –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Using React without NodeJS</title>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"
></script>
</head>
<body>
<h1>Using React without Nodejs</h1>
</body>
</html>
Step 2: Adding JSX Support
When we talk about ReactJs, we automatically assume that it will support JSX. This is not the case. JSX is supported due to Babel plugin. In our html file we added the support for react and react-dom but not of JSX. So, let’s add Babel script.
The CDN link to Babel script is –
https://unpkg.com/[email protected]/babel.min.js
Our index.html file will look like this –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Using React without NodeJS</title>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"
></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<h1>Using React without Nodejs</h1>
</body>
</html>
Step 3: Creating root placeholder
Everything rendered from JavaScript need to be placed somewhere on html page. We need a placeholder. That’s why we are going to create a div with id=root in body tag. Also we will remove the h1 tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Using React without NodeJS</title>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"
></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
</html>
Step 4: Creating a Component
What’s React without Components? Right?
Since we have already set the stage, we are now ready to create a component. You need to remember that in order to use JSX, we have to explicitly tell babel that the script should be parsed with it. This is done by adding type="text/babel" in Script, like this –
<script type="text/babel"> // We can use JSX here </script>
Now, we can create a component within this script tag –
<script type="text/babel">
function CounterFunc() {
return <div></div>;
}
</script>
Step 5: Render component using ReactDOM
If you have worked with React before then you must know that we add the top most level of component to html using ReactDOM render utility. Like this –
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<App />);
The same will be applied in our case too. Just instead of App we are calling our component as CounterFunc. The index.html fill will look like this –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Using React without NodeJS</title>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"
></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function CounterFunc() {
return <div></div>;
}
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<CounterFunc />);
</script>
</body>
</html>
Step 6: Creating Stateful Component
Right now our component is stateless. Let’s convert it into a stateful component so that we can experience the re-rendering on the change of state.
Here we will create a counter which will increment on button click.
You must know that we can declare a state variable using useState hook, like this –
const [count, setCount] = React.useState(0)
And we can change this state on button click, like this –
<button onClick={() => setCount(count+1)}>Increment Count</button>
That’s it. Let’s complete our component –
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Using React without NodeJS</title>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react.production.min.js"
></script>
<script
crossorigin
src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"
></script>
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
function CounterFunc() {
const [count, setCount] = React.useState(0);
return (
<React.Fragment>
<h1>Total Counts: {count}</h1>
<button onClick={() => setCount(count + 1)}>Increase Count</button>
</React.Fragment>
);
}
const container = document.getElementById("root");
const root = ReactDOM.createRoot(container);
root.render(<CounterFunc />);
</script>
</body>
</html>
Live Demo
Conclusion
In this article we saw how we can use CDN links to include react, react-dom and Babel directly into html pages. We don’t need to use nodejs for developing reactjs application. But performance wise this is not recommended. If you are developing a production application then always use nodejs to properly manage and generate an optimized build.
