React Part 1 | Setting up & Introduction

?? Hey there! Let me introduce myself: I’m React.js, but you can call me React for short. I was born in the brilliant minds over at Facebook—oh, sorry, I mean Meta. (You know how tech folks love rebranding!)

So, who am I, really? Well, if I had to sum it up in one word, people would call me a "JavaScript Library." But honestly, I’m like the cool, smart friend you call when your web app needs a makeover—especially when it’s time to update that user interface. Think of me as the stylist who ensures your app’s front-end is always on point, sleek, and ready for the runway.

Now, what’s a library, you ask? (No, it’s not that quiet place with dusty books and a shushing librarian.)

Let us say you want a house. There are two ways to get a house.

• You buy the whole house or
• Build each and everything from scratch block by block

Library is like building your home from the ground up. Framework, on the other hand, is like buying a new home.

?? A framework is just a collection of libraries

• I am not bragging but probably I am one of the best choices for building single page applications nowadays.
• Some of my coolest features are ??
• slim API, an amazing ecosystem, great community and what not

Let me introduce you to my squad of besties—trust me, they’re as awesome as they sound!

Sorry, I call the Node Package Manager "npm." It’s just a little nickname I gave it ??.

• The node package manager (npm) allows you to install external node packages from the command line.
• These packages can be a set of utility functions, libraries or whole frameworks.
• Ikr... he’s always inviting people over to my house! ?? But hey, he helps me socialize a bit. Like last time, this npm guy invited Material-UI over. Instant makeover—bam! It was a blast. ??

npm install -g <package>        

• The -g flag tells npm to install the package globally
• Local packages are used in your application. For installing that you can use the below command

npm install <package>        

• But don’t worry, npm still respects my privacy. He only invites people to a specific room in my house called "node_modules." In your terms, that’s just a folder in your project directory.
• The installed package will automatically appear in a folder called node_modules/. But be careful. Whenever you install a local package you shouldn’t forget the neat --save flag

npm install --save <package>        

• The --save flag tells npm to store the package requirement in a file called package.json. The file can be found in your project folder.
• Not every project folder comes with a package.json file though. There is a npm command to initialise a npm project and thus a package.json file. Only when you have that file, you can install new local packages via npm

npm init -y        

• The -y flag is a shortcut to initialize all the defaults in your package.json.
• One more word about the package.json. The file enables you to share your project with other developers without sharing all the node packages.

Let us do a small exercise.

• Create a Folder named learn_react using terminal (mkdir command)
• Then cd to learn_react
• After that use the command npm init -y
• Open Package.json and see

• Then install react using npm install —save react

• Open Package.json to observe the changes

Let’s make your hands dirty

• So which is the best way to install react
• Yes you can install like we did in our exercise but the problem is I use JSX . Not my Ex ???but It is simply a syntax extension of JavaScript. It allows to directly write HTML in React
• So the problem actually comes when you deploy my application . Most browsers not support my language so I have to translate to them . Well this is done by my another friend Babel
• This is not the super villain in the K-Drama Vincenzo. But a kind guy who transpiles my code that browsers can interpret
• Not all browsers are capable of interpreting the syntax. The setup includes a lot of configuration and tooling
• Well we don’t like to do a lot of work right . So basically I discussed this issue with my meta family and they found a solution .
• Facebook introduced create-react-app(CRA) as a zero-configuration React solution
• CRA is like that dependable friend who’s been around forever, always showing up with a smile and a box of tools. He’s the one who got you started in the React world, guiding you through the basics with pre-configured setups and simple commands

npm install -g create-react-app        

• It’s an opinionated yet zero-configuration starter kit
• People would recommend it to beginners by 96%. In create-react-app the tooling and configuration evolve in the background while the focus is on the application implementation.
• Now you can bootstrap your first React application. We call it smily, but you can choose a different name. Afterward simply navigate into the folder

create-react-app smily
cd smily        

• In the beginning everything you need is located inside the src folder
• The main focus lies on the src/App.js file to implement React components.
• It will be used to implement your application, but later you might want to split up your components into multiple files.
• Additionally you will find a src/App.test.js file for tests and a src/index.js as entry point to the React world
• In addition, there is a src/index.css and a src/App.css file to style your application and components. They all come with default style when you open them.
• Next to to the src/ folder you will find the package.json file and node_modules/ folder to manage your node packages.
• The create-react-app application is a npm project. You can use npm to install and uninstall node packages to your project.
• The create-react-app project comes with the following npm scripts for your command line

// Runs the application in https://localhost:3000
npm start

// Runs the tests
npm test

// Builds the application for production
npm run build        

Some Drawbacks of ??♂? Create React App (CRA)

Let’s be honest—CRA can be a bit slow on the uptake. He’s like that friend who takes forever to get ready for a night out. His build times can drag, and sometimes he comes with more baggage (a.k.a. dependencies) than you really need. Still, he’s a solid choice for beginners, and you know what to expect with him around.

There is this Speedster Newbie came in the market, it's written by Evan You, the creator of Vue. js.

The new kid on the block who’s all about speed and efficiency. He’s the friend who shows up fashionably early, ready to get the party started in record time. Vite’s build times? Lightning-fast ?. Thanks to his modern ES module-based architecture, he’s all about instant gratification. You’ll be up and running with npm create vite@latest my-app faster than you can say “bundle.”

So how vite is better

For understanding that we have to go under the hood of CRA and Vite

• Create React App (CRA) uses a tool called Webpack to pack up all your code, images, and styles into a neat little bundle that your browser can understand. Think of it as CRA's personal organizer—it gathers everything you need for your app and makes sure it’s ready to go when you hit "run." You don’t have to worry about how it does it; CRA handles all the tricky stuff for you!

• The above figure demonstrate -> A module bundler like Webpack takes all your different JavaScript files and merges them into one single file that the browser can easily use. This final file, called a "bundle," includes your own code along with any other tools or libraries you’ve imported, like React. It’s like packing everything you need for a trip into one suitcase so it’s all ready to go!
• A bundler like Webpack works like a super organizer for your project. You just tell it where to start (the entry point), and it goes through all your files, figuring out how they’re connected. It then gathers everything up and neatly packages it all into one file that your browser can understand. So, you don’t have to worry about putting everything together

Traditional Bundler approach looks like this

• In a bundle-based dev server like Webpack, your app kicks off with an entry point, usually something like App.js ??. This file is like the main hallway of your house, with doors leading to different rooms—like Login.js, Register.js, Dashboard.js, and so on ??. The bundler then goes through all these rooms, gathers everything up, and packages it into one big, tidy bundle ??. Unlike the browser, which normally has to run around and piece things together , Webpack handles all that heavy lifting for you. It's like having a butler who packs your entire house into one neat suitcase—no more searching around for lost items!
• However, here's where things get a bit sticky ??: this bundling process can take time ?, especially as your project grows.

Vite approach looks like this (Native ESM Based)

• Imagine Vite as a super-efficient butler. Instead of opening every single door in a mansion to see what's inside, Vite just goes straight to the main control room, which is your App.js. From there, it bundles up everything neatly and hands it over to the browser, like a butler giving a guest the perfect party platter. Now, whenever the browser rings the bell for more, Vite quickly bundles up what’s needed and serves it hot. Vite takes advantage of the fact that modern browsers understand ESM (like secret code language), making everything faster and smoother. So, it's like Vite is whispering the magic words to the browser, "Here’s your code, all ready to go!" ???
• ESM (ECMAScript Modules) is a way to organize JavaScript code into smaller, reusable files called modules. You use export to share parts of your code, like functions or variables, and import to use them in other files. This helps keep your code organized and makes it easier to manage and reuse. Modern browsers support ESM natively, so you can write and use modular code without extra tools.

These is just the foundation of working with vite there are more advantages

1. Faster Development Server
2. Efficient Hot Module Replacement (HMR)
3. Smaller Build Sizes
4. Lightweight and Simpler Configuration and a lot more

End of part 1

So I hope you understood the basic structure of a react . Wait for the coming parts. Cu Soon

References

1. https://react.dev/
2. The Road to learn React by Robin Wieruch
3. Interviewbit
4. https://vitejs.dev/
5. https://webpack.js.org/concepts/
6. https://www.youtube.com/watch?v=nBYo2B2XN5s
7. https://www.youtube.com/watch?v=KCrXgy8qtjM
8. https://www.youtube.com/watch?v=5IG4UmULyoA