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

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.

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

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

1. Open project folder "f:\react-project" in visual studio code

2. 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]

1. React Webpack hosts your application on local server. It creates a server locally that runs on port
   number "3000".

2. 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" 

1. Application starts with "index.html"

1. 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

• login.jsx
• login.css [optional]
• login.test.js [optional] Creating React Application using NPX [Web Pack Bundler]

npx create-react-app app-name

npm start