REACT Day 1/40

On my first day, I started by learning about the working of React itself different frameworks followed by creating a new project and took some time to familiarize myself with all the files and folders included in the setup. Here’s a little summary of today’s learning.

Understanding React-DOM vs React Native

React-DOM:
React-DOM is a package that provides DOM-specific methods to enable React to interact with the web browser's Document Object Model (DOM). It is primarily used for building web applications.

React Native:
React Native is a framework that allows developers to build mobile applications using React. Instead of rendering components to the web browser, React Native renders components as native mobile elements for iOS and Android.

What’s Virtual DOM?

React creates a lightweight representation of the actual DOM (Document Object Model) called the Virtual DOM. When a component’s state changes, React updates the Virtual DOM first rather than directly manipulating the browser's DOM. React then compares the Virtual DOM with the actual DOM to identify what has changed. It only updates the parts of the DOM that need to change, which makes the process much more efficient and faster. This prevents the need to reload or re-render the entire page.

Starting a Project

But before starting, what are Bundlers and Framework?

What’s a Framework?
A React framework is a set of tools and libraries built on top of React that helps build full web applications with added features. These provide routing, state management, and server-side rendering, best for developers needing a complete setup for app development.
Examples → Next.js, Gatsby

What’s a Bundler?
A React bundler is a tool that compiles and optimizes code for the web. These combine files and reduce sizes for faster loading.
Examples → Webpack, Parcel

Node.js Installation

JavaScript is a client-side scripting language, meaning it runs in the user's browser to make web pages interactive. Node.js is a runtime environment that allows developers to run JavaScript on the server side, outside the browser. So, installing Node.js is the initial step to enable server-side JavaScript execution.

Starting a project without any bundlers

To create a new React app, you can run the following command in your terminal:
npx create-react-app 01basicreact
npm run start

• npm
  Node Package Manager is primarily for managing and installing packages in the projects.

• npx
  Node Package Execute is a tool for executing packages directly, allowing to run commands without installing them globally.

• create-react-app
  It is a command-line utility or tool to quickly set up and configure a new React project. It automates the process of creating a project structure, installing necessary dependencies, and configuring build tools.
  But it has a Large Bundle Size and hence it’s Slow.

Starting a project with Vite

Vite is a modern build tool designed for speed and efficiency. Vite provides a fast, efficient, and versatile development environment with features like instant startup, HMR, and optimized builds, making it an attractive choice for modern web development.
To create a new app, you can run the following command in your terminal:

npm create vite@latest

npm install npm run dev

Getting along with the files and folders

While creating a new Vite project, I encountered several files and folders. To familiarize myself with the project structure, I started by diving into the package.json file.

1. Locate the package.json File
   The package.json file is located in the root directory of the Vite project. This file is essential as it contains important metadata about the project.

2. Explore the Dependencies
   Next, look for the dependencies and devDependencies sections:

   • Dependencies: These are libraries required for your project to run. Here we can review the packages listed and understand their roles in the application.

   • DevDependencies: These packages are only needed during development (e.g., testing frameworks, build tools). Familiarizing with these will help us understand the development environment.

3. Examine the Scripts
   Finally, check the scripts section of the package.json:

   • This section defines various commands we can run in your project. Common scripts include:

     • dev: Starts the development server.

     • build: Bundles your application for production.

     • serve: Serves the production build locally.

Exploring these elements has increased my familiarity with the overall project structure. While I may not yet have a deep understanding of every aspect, I feel more comfortable navigating the files, folders, and environment.

Clearing up the environment

After familiarizing myself with the layout, I focused on organizing the environment by removing unnecessary files, comments, and default logos. This approach helped me establish a clean foundation for my project, allowing me to write more organized and efficient code as I continue my development journey.