Here we are gonna dive deep into React and boil things down to its fundamentals. So let's begin with the frequently asked questions about React.

What is React? Is it a framework or a library?

So let's first learn about what exactly are frameworks and library.

Library

A library is a collection of pre-written code that provides us with different functionality which we can use in our program to perform specific tasks and don't have to care about how the functionality works behind the scene.

Framework

A framework is an overall architecture in which you can build applications. It includes predefined guidelines and rules on how code is organized and how different components interact.

Therefore, React is a js library for building user interfaces. It is called a library because it is a collection of pre-written codes that provides a set of functionalities that we can use to build application components in an easier and faster way.

Why is React used to build websites?

Whatever we write into HTML is static meaning it cannot be changed later on without modifying the code directly So we use javascript API known as DOM (Document Object Model) API to dynamically change and modify the contents and elements in the HTML. It makes the website more dynamic and user-friendly.

document.querySelector(".heading").innerHTML = "Prajwol loves React";
//This code will select the first HTML element with class of 'heading' and change its content.

So if we can use DOM API to manipulate HTML elements why do we use react to do the same thing?

While you can use the DOM API to directly manipulate HTML elements, React provides a simpler and more organized way to create user interfaces.

When you use the DOM API, you have to manually update the HTML elements in response to user events or data changes. This becomes difficult to manage as the complexity of your user interface grows.

So to make things easier React provides a component-based architecture that allows you to break your UI down into small, reusable pieces known as React components.

React also provides a way to manage the state of your application, which can make it easier to handle user interactions and data changes. Instead of directly manipulating the DOM, you update the state of your React components, and React takes care of updating the DOM to reflect those changes.

How does React do all of this?

React accomplish all of these cool functionalities by using declarative programming and virtual DOM, and unidirectional data flow. So let's learn about all of them in detail.

Declarative approach

This approach is unlike the imperative approach, where you have to manually tell the how to perform a task step by step and manipulate the DOM, manage the state of the program and update the change in UI.

Using declarative programming react does all of this for you without you having to do it manually. We just have to tell React what we want our user interface to look like using React components and JSX and React takes care of how to render it. React takes care of the whole updating of the interface when the state changes. It is like a box where you give all your instructions and it provides the output and you don't have to care about how it is been done.

Virtual Dom

Virtual DOM is an in-memory (a simple data structure that is stored in memory) representation of the actual Document Object Model (DOM).

Basically, it is a Javascript object that represents the structure of the actual DOM, but it takes less space and Is easier to manipulate. It contains all the same properties as the original DOM, but it does not require expensive rendering and layout calculation.

When you make a change in the React component, React creates a new virtual DOM tree that represents the change. This new virtual DOM tree is then compared with the previous one to identify the differences between them.

The diffing algorithm is used to identify the changes. Once the changes have been identified, React only updates the actual DOM in the places where changes need to be made, avoiding unnecessary updates.

By working with the virtual DOM instead of the actual DOM, React can minimize the number of updates needed and optimize the rendering process, making it faster and more efficient.

Unidirectional Data Flow

This means that in React the data can flow only in one direction that is from parent components to the children components. This is also known as "props down, events up."

Here, the parent component passes data to the child component through "props", which are read-only properties to the children. The child component can then use this data to render its content, but it cannot modify the data directly.

If the child component needs to modify the data, it must do so by raising an event and passing the modified data back up to the parent component. The parent component can then update its state and pass the updated data down to its children.

This technique makes it easier to debug and ensures that the application's state remains predictable and easy to manage.

Files and Directories in React project

React is a JavaScript library for building user interfaces. As you might have known by now it is fast, awesome, fantastic, khatra, and easy to use but it cannot do everything on its own. Think of it like a prime minister which is the head but it has many helping bodies to help run a country. Here React is like a prime minister and these helping bodies are packages.

A package is a collection of pre-written code written by other developers who create and maintain the package. It can be used to provide specific functionality to an application. Packages are used to add additional features to the library beyond what is already there in the core React library. Some of the popular packages used in React are Redux (for state management), material-ui (for building UI components).

Packages are installed in our project through the package manager like npm or yarn. These package managers allow us to easily add packages to our projects, manage dependencies (External code libraries or packages that are required for the project to run properly) between packages, and keep packages up-to-date with the latest versions.

Now that we have basic knowledge let's discuss what are all those files and directories in your React project.

node_modules: When we install a package using npm or yarn, the package manager will download the package and any dependencies it needs, and store them in a node_modules directory.
package.json: When you create a new project, a package.json file is automatically generated. It is a special place used to store important information about the project, such as its name, version, and dependencies.

It is important to keep track of which packages you're using in your project and which version of each package you're using. The package.json list all of the packages that your project depends on, along with their versions. So when anyone installs your project using a tool like npm or yarn, the package manager reads the package.json file and installs all of the required packages.
package-lock.json: The package-lock.json file is used to keep track of the exact versions of all the dependencies (including transitive dependencies - dependencies of dependency ) that were installed in your project.

When you install a package using npm, it checks the package.json file to see what packages are required and what versions are allowed. It then downloads and installs the required packages, along with any other packages that those packages depend on (these are called transitive dependencies). The package-lock.json file records the exact versions of all of these packages, as well as their dependencies.

The package-lock.json file is important because it ensures that everyone working on the project is using the same versions of the packages. This helps prevent version conflicts and ensures that the project behaves consistently across different environments.

If you're working on a team and sharing code with others, it's a good idea to include the package-lock.json file in your version control system (such as Git) so that everyone has access to the exact same dependencies. When someone else checks out your code and runs npm install, npm will use the package-lock.json file to install the exact same versions of the packages that you were using.
src: src(source) folder is where the source code for your application is stored.

The src folder contains all the CSS files, JavaScript files, images etc. This is where you'll find the index.js file, which is the entry point of your application, as well as other JavaScript files that define your React components and their corresponding CSS styles.
README.md: You can use a README.md file in your project to provide documentation, instructions, or other information about your project. This file will be automatically displayed on your project's GitHub page, making it easy for other people to learn about your project.
.gitignore: This file is used to tell Git which files and directories should be ignored and not tracked. This is an important file because some of the files are not necessary to track such as node_modules which are very large and it is automatically generated when you install dependencies.

React : Learning from the Basics

Table of contents