How to Create Your First React App Step by Step (Beginner’s Guide)

 Are you new to React? Want to build your first React app but don’t know where to start?

Don’t worry! 😎 In this tutorial, I’ll show you step by step how to create your first React app using the popular tool Create React App.

By the end, you’ll have a running React project and understand the folder structure so you can start coding right away.

Step 1: Install Node.js

React uses Node.js and npm (Node Package Manager).
Download from 👉 https://nodejs.org/

After installing, check the versions:

bash

node -v npm -v

---

Step 2: Create the React App

Use npx (comes with npm) to quickly generate your project:

bash

npx create-react-app my-first-app

This creates a new folder called my-first-app with everything set up.

---

Step 3: Start the Development Server

Go to your project folder:

bash

cd my-first-app

Run:

bash

npm start

Your new React app will open automatically at:

arduino

http://localhost:3000

---

Step 4: Understand the Folder Structure

Here’s what’s inside:

bash

my-first-app/
├── node_modules/       # dependencies
├── public/             # static files
├── src/                # your React code
│   ├── App.js          # main component
│   └── index.js        # entry point
├── package.json        # project config

---

Step 5: Edit Your First Component

Open src/App.js and replace its content with:

jsx

function App() {
  return <h1>Hello React World!</h1>;
}
export default App;

Save the file – the browser will auto-refresh and show your message!

---

Step 6: Build for Production

When your app is ready to go live:

bash

npm run build

This creates an optimized build/ folder you can deploy to your server or services like  GitHub Pages.

---

What’s Next?

You can now:

Add new components
Use state and props
Connect APIs
Deploy online
React is fun and powerful – keep exploring! 🔥

Hope this guide helped you build your first React app easily!
👍 If you enjoyed this post, keep following the blog for more daily tips on JavaScript, React, and web development.

How to force browser to update javascript files cache after deployment?

If you’re developing your project you might notice that in some browsers the changes you’ve made to your javascript files do not take effect immediately.

Sometimes it’s necessary to do a hard refresh[ctrl+f5] to see the updates take effect. But it’s unlikely that average web users know what a hard refresh is [because every one is not a developer :), nor can you expect them to keep refreshing the page until things straighten out even its not a good idea to ask user to refresh the page to see the current modification .. lol .

So how can you ensure that any updates you’ve made to your javascript will take place immediately for all users?

Here is the answer :)

I Created a javascript extension class, which has a static method and that method will embed a version to the end of the supplied javascript file.

public static class JavascriptExtension
{

   public static MvcHtmlString IncludeVersionInJs(this HtmlHelper helper, string filename)
   {

      string version = GetLastVersionNumber(helper, filename);
      return MvcHtmlString.Create("");
   }

  private static string GetLastVersionNumber(this HtmlHelper helper, string filename)
 {
   var context = helper.ViewContext.RequestContext.HttpContext;
   if (context.Cache[filename] == null)
   {
    var physicalPath = context.Server.MapPath(filename);
    var versionNo = $"?versionNo={new      System.IO.FileInfo(physicalPath).LastWriteTime.ToString("MMddHHmmss")}";

    context.Cache.Add(filename, versionNo, null,
    DateTime.Now.AddMinutes(5), TimeSpan.Zero,
    CacheItemPriority.Normal, null);
    return versionNo;
   }
   else
   {
      return context.Cache[filename] as string;
    }

  }
}

How to use this now? 

Use bellow code in your .cshtml pages

@Html.IncludeVersionInJs("/yourjavascriptfilename.js")

it will look like on the source as bellow

"type='text/javascript' src='/yourjavascriptfilename.js?versionNo=1218154859"
in the script tag

means when ever you changes on your javascript file and deploy to the server it will always compare with the versionNo from the cache and if found that related file has any changes then browser will download the latest one. So now you do not need to hard refresh the page and not to ask user to do the same.. :) 

Enjoy Coding :) and continue reading for next topic. 

Some basic command to run cordova app

Here are some basic commands use in cordova CLI


Build 
--->for android
cordova build android
cordova build android --release

--->for ios
cordova build ios
cordova build ios--release

Run
cordova run android   ---> for android
cordova run ios---> for ios

Get connected Devices list
adb devices

Get Platform List
cordova platform lst

Get Plugin list
cordova plugin lst

Add Platform
cordova platform add  

Add Plugin
cordova plugin add

Remove Platform
cordova platform remove  

Remove Plugin
cordova plugin remove