How To Create React JS Application

Websolutionstuff | Aug-10-2022 | Categories : React JS

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.

Setting up a React Environment

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-app

Read Also: How To Install React JS Step By Step

Run the React Application

Now, you can move into the react application using the below command.

cd my-first-react-app

Run, this command to run the react application.

npm start

open your browser and type the below URL.

localhost:3000

When you’re ready to deploy to production, create a minified bundle using the below command.

npm run build

Create 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.

Read Also: How To Integrate Mailchimp API In Laravel 9

React Directly in HTML

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/react@18/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@18/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: