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

 

 

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.

 

 

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:

Recommended Post
Featured Post
How To Create Custom Middleware In Laravel 9
How To Create Custom Middlewar...

In this article, we will see how to create custom middleware in laravel 9. Laravel middleware provides a conve...

Read More

Mar-27-2022

How To Use Array In React JS
How To Use Array In React JS

In this article, we will see how to use an array in React JS. We can use the JavaScript standard Array functio...

Read More

Aug-12-2022

How To Install VueJs In Laravel
How To Install VueJs In Larave...

In this article, we will see how to install vue js in the laravel framework. if you are not aware of you are freshe...

Read More

Jul-12-2020

Google Line Chart Example in Laravel 8
Google Line Chart Example in L...

In this article, we will see the google line chart example in laravel 8. Google charts use to visualize d...

Read More

Feb-24-2021