React 18 Complete Guide: Creating Your First App with NPX & Webpack

Abhishek Sah — Wed, 27 Aug 2025 15:25:05 +0000

React 18 Application - React 18 is a complete re-write of React. - It provides a new approach for building interfaces. - You can build interactive interface for web and native apps. - NPM provides support for "Web Pack" bundling tool, which is used to configure and create a React
application.

Open your PC location in command prompt to create react project
Run the following command

F:> npx create-react-app react-project

Open project folder "f:\react-project" in visual studio code
Project Infrastructure comprises of various files & folder

node_modules It contains the library files installed on your project.

public It comprises of static resources like .html, images,

docs, media clips etc.

src It comprises of dynamic resources like .js, .jsx,

.tsx, .css, .scss, .less etc.

.gitignore It configure the repository to ignore while
on GIT.

package.json It contains project meta data.

package.lock.json It is used for migrations.

README.md It is a help document for developers.

React Application Flow: [High Level]

React Webpack hosts your application on local server. It creates a server locally that runs on port
number "3000".
Open your project terminal in VS code and run the command

npm start

 You can server starts listening on   "http://127.0.0.1:3000"  (or)  http://localhost:3000"

Application starts with "index.html"

Logic for index.html is defined in "index.js"

React up to 17x versions:

ReactDOM.render(, document.getElementById("root"));

React 18x versions

const root = createRoot(document.getElementById("root"));

root.render(

)

Note:

createRoot() is used to create virtual DOM from 18x versions.
is used to turn strict mode ON for developers.
Strict mode will prevent code inconsistency.
It is used only in "development" not for "production".

Add a new component into React application: - Traditionally every component comprises of following files

.jsx : It comprises of markup to return & the logic for component
.css : It comprises of styles
.test.js : It comprises for test functions used to test your component.

Go to "src" folder and add a sub folder for every component

src/components/login

npx create-react-app app-name

npm start

👋 Hello DEV! I'm Abhishek — Let's Build and Brew Together

Abhishek Sah — Fri, 02 May 2025 10:27:22 +0000

Hello DEV Community! 👋

I'm Abhishek Kumar Sah, a software engineer who joined DEV in 2022 — and I’m finally making my debut post! 😄

👨‍💻 About Me

💼 Software Engineer working on modern web applications
💡 Passionate about solving real-world problems through tech
☕ Coffee fuels my code
🌐 Tech Stack: Angular, TypeScript, Node.js, MongoDB
🔧 Currently exploring: Svelte and Rust

🌱 Why I'm Here

I joined DEV to:

Share what I learn with the community
Connect with like-minded developers
Explore open source contributions
Learn from the amazing folks here

🎯 Goals

Post regularly on my experiences and challenges
Collaborate on open-source projects
Learn from the journey of others in tech

📢 Let’s Connect!

Feel free to drop a comment, say hi, or share your favorite coffee + coding ritual!

Thanks for reading, and looking forward to contributing more here. 🚀

Let’s build, break, and brew together!

Abhishek Kumar Sah

https://github.com/abk8406