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 Image Upload In CKeditor With Laravel 10
How To Image Upload In CKedito...

In this article, we will see how to image upload in CKEditor with laravel 10. Here, we will learn about image uploa...

Read More

May-08-2023

Jquery Append And Prepend Example
Jquery Append And Prepend Exam...

In this article I will give you example of jquery append() and prepend() method. The append() method inserts t...

Read More

Dec-06-2021

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

Boosting Angular 15 Performance: Tips & Tricks
Boosting Angular 15 Performanc...

In the world of web development, performance is a crucial factor that directly affects user experience. Angular 15, the...

Read More

Jun-09-2023