In this article, we will see how to create React JS application. Creating React App is a comfortable environment for learning React and is the best way to start building a new single-page application in React. It sets up your development environment so that you can use the latest JavaScript features, provides a nice developer experience, and optimizes your app for production. You’ll need to have Node >= 14.0.0 and npm >= 5.6 on your machine.
You don’t need to install or configure tools like webpack or Babel. They are preconfigured and hidden so that you can focus on the code.
So, let's see Create React JS App, and how to build React JS app.
If you have npx and Node.js installed, you can create a React application by using create-react-app.
Note: If you've previously installed create-react-app globally, it is recommended that you uninstall the package to ensure npx always uses the latest version of create-react-app.
To uninstall, run this command.
npm uninstall -g create-react-app.Run this command to create a React application.
npx create-react-app my-first-react-appNow, you can move into the react application using the below command.
cd my-first-react-appRun, this command to run the react application.
npm startopen your browser and type the below URL.
When you’re ready to deploy to production, create a minified bundle using the below command.
npm run buildCreate React App doesn’t handle backend logic or databases; it just creates a frontend build pipeline, so you can use it with any backend you want. Under the hood, it uses Babel and webpack, but you don’t need to know anything about them.
The quickest way to start learning React is to write React directly in your HTML files. We need to include three scripts.
Example:
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="mydiv"></div>
<script type="text/babel">
function Hello() {
return <h1>Hello World!</h1>;
}
ReactDOM.render(<Hello />, document.getElementById('mydiv'))
</script>
</body>
</html>This way of using React can be only for testing purposes, but for production, you will need to set up a React environment.
You might also like:
- Read Also: Bootstrap Modal In Angular 13
- Read Also: How To Send Email Using SendGrid In Laravel 9
- Read Also: How To Get Element By Data Attribute In jQuery
- Read Also: Dropdown Filter On Specific Column In Datatable
