3 ways to create your first React App

3 ways to create your first React App

As we all know react is a powerful library to create a web application using reusable UI components. Here in this article, I am going to tell 3 ways to create your react project.

Let's start

1: Using react inside HTML page with the script tag

Because React is a javascript library, not a framework. so we can directly use it like any other javascript library by importing in script tag inside our HTML file or javascript file. below is the example with code taken from raw.githubusercontent.com/reactjs/reactjs.o..

Create a new text file 'index.html' and copy the content from the above link. Open the file in your browser. "Hello, world!" is shown to you on the screen.

Notice the import of React, react-dom, and babel using script tag inside the head section of the HTML file.

<script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );
 </script>

In the above code render function of ReactDOM takes two parameters first one is the HTML element and the second parameter is the dom element reference where we want to render the first element.

The getElementById() method returns the element that has the ID attribute with the specified value.

2: Using Create react app This is the probably most used and easiest way to create a full react project. Let's see how to do it.

Install create-react-app package globally using

npm install -g create-react-app

Run the package with npx and give directory path as an argument

npx create-react-app my-app

This will create a directory my-app with react application and install all required packages like react, reactDom, babel, webpack, and testing utility jest.

change directory to my-app using

cd my-app

use "npm start" or "yarn start" to start your application in the few second your application is live on localhost:3000

3. Setting react application from from scratch

The last way to create a react application is to set up everything from scratch and install each dependency on yourself and make the required configuration of Webpack. babel, jest, etc.

There are some excellent articles on the internet for this purpose refer to

This is recommended way only if you want to create the most customizable large application. If you want to create an application for a personal project or just trying some small project for learning React. the create-react-app method is good enough.