React is a JavaScript library and technically it does not require any setup or installation. You can write React code direct in an HTML document, open HTML in a web browser, and it will work. Node Package Manager (npm) is needed for React development to automate the packaging and testing of React apps. Think of it as a tool to help speed up the development.
In this article and code sample, we will create a simple HTML file and write our React code in the HTML and run it by opening the HTML file in a Web browser, without any external library or tool. We did not want to go through the hassle of npm or anything else.
Here are the steps required to create and run a React app without npm.
Step 1. Create a simple HTML file
Create a simple HTML file with the following HTML and save it as Index.html in any folder you have direct access to. We will open this html file direct in the browser.
<html>
<head>
<title>Let’sReactwithnpm</title>
</head>
<body>
</body>
</html>
The above HTML file has a head, title, and body, the simplest form of an HTML file.
Step 2. Import React library
To make React work direct in an HTML document, we need to import the React library in HTML. React library is defined in two .js files. The files differ for development and production as you can see below.
The following script imports React library. Copy and paste this code in the <head /> tag of the HTML.
<!–LoadReactLibraries–>
<!–Note:whendeploying,replace“development.js”with“production.min.js”.–>
<scriptsrc=“https://unpkg.com/react@17/umd/react.development.js”crossorigin></script>
<scriptsrc=“https://unpkg.com/react-dom@17/umd/react-dom.development.js”crossorigin></script>
The final HTML document now looks like this:
<html>
<head>
<title>Let’sReactwithnpm</title>
<!–LoadReactLibraries–>
<!–Note:whendeploying,replace“development.js”with“production.min.js”.–>
<scriptsrc=“https://unpkg.com/react@17/umd/react.development.js”crossorigin></script>
<scriptsrc=“https://unpkg.com/react-dom@17/umd/react-dom.development.js”crossorigin></script>
</head>
<body>
</body>
</html>
Step 3. Placeholder for React Component
Once React library is imported, we can use React syntaxes in our code. React uses components to represent UI. Think of a component as a user control that has code to represent visual interfaces and data.
To place a component on a page, we need a placeholder where that component will load. We add a <div /> tag inside the <body /> tag of the page and give it an id = “root”. This is the position where our React component will render.
<body>
<divid=“root”></div>
</body>
Step 4. Create a React Component
As you may already know, the UI in React is created using components. A component in React is declared as a class. Here is a simple component that displays simple text “react without npm..”.
classHelloClassextendsReact.Component
{
render()
{
returnReact.createElement(‘div’,null,‘Reactwithoutnpm’);
}
}
In the above code, React.createElement is react function that creates an element, a <div /> in this case and displays text inside the div.
Step 5. Call React Component
The final step in the process is to call the React component from JavaScript. The following code React.DOM.render() is responsible for rendering a React component. In this code, the first parameter is the component class name. The render method also takes a root element where the component is rendered. In out case, we render component inside the div id = ‘root’.
ReactDOM.render(
React.createElement(HelloClass,null,null),
document.getElementById(‘root’)
);
Step 6. Complete code
Here is the complete HTML document.
<html>
<head>
<title>React’sReact</title>
<!–LoadReact.–>
<!–Note:whendeploying,replace“development.js”with“production.min.js”.–>
<scriptsrc=“https://unpkg.com/react@17/umd/react.development.js”crossorigin></script>
<scriptsrc=“https://unpkg.com/react-dom@17/umd/react-dom.development.js”crossorigin></script>
</head>
<body>
<divid=“root”></div>
<!–ThisisembeddedJavaScript.Youcanevenplacethisinseparate.jsfile–>
<script>
window.onload=function()
{
classHelloClassextendsReact.Component
{
render()
{
returnReact.createElement(‘div’,null,‘Reactwithoutnpm..’);
}
}
ReactDOM.render(
React.createElement(HelloClass,null,null),
document.getElementById(‘root’)
);
};
</script>
</body>
</html>
Step 7. Run React code
To run the above code, create a text file in any text editor such as Notepad or Visual Studio Code, save it as Index.html or other name and open html file in a Web browser.
The output will look like this in the browser.
Summary
This step by step tutorial with code example showed how to create a simple React application direct in HTML without npm or other tools.
Some related articles to learn more about React
How to install React.js with create-react-app?
What Is React?
How to run and build a React app?
Props in React
