In this post, I am going to show you how to create a react app without Create-React-App CLI.
First of all, you need to create a folder to contain your project:
mkdir my-react-app
Then, you will have to enter that folder and initialize a new node project:
npm init -y #skip the questions
After creating the project, you will need to install parcel, react, and react-dom dependencies:
npm install parcel-bundler react react-dom
This code will install parcel (which is a simpler alternative to webpack) along with react and react-dom.
Now that you have the dependencies installed, create an HTML file. This file will serve as your template.
Let’s call it index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>HTML</title>
<!-- HTML -->
<!-- Custom Styles -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="root">
</div>
<script src="main.js"></script>
</body>
</html>
Now we need to create our main.js file. Add the following code in the main.js file.
// import dependencies
import React from "react"
import ReactDOM from "react-dom"
// A simple react component
const Hello = () => {
return (
<React.Fragment>
<h1> Hello World </h1>
</React.Fragment>
)
}
ReactDOM.render(<Hello />, document.getElementById("root")) // render element on div with ID of 'root'
Now we have a basic react component that shows Hello World to the DOM, but we need to compile it to actually see the result. You need to run:
parcel index.html #or whatever name you gave to your HTML file
parcel will take care of the rest, that is, compiling your JSX component to HTML and bundling it. It will then start up a local server that you can visit to view your app – it will automatically reload when any change is made.
That’s it – now you can create a react app without the default CLI.
You can run the following command to build your React app for production:
parcel build index.html
Note: you can write your React components in separate files just like you do with the create-react-app project.
Free Resources