This article breaks down key concepts around React, development tools, and the client-server architecture in a simple and structured way.

---

Foundations of Web

1. Client Side vs Server Side

In web development, it’s important to understand the difference between the client side and the server side:

• Client Side: This refers to everything that happens in the browser. It includes the user interface and interactions like clicking buttons or filling out forms. Technologies used here include HTML, CSS, and JavaScript.

• Server Side: This involves everything that happens on the web server, such as processing data, accessing databases, and authentication. Technologies often used here include Node.js, Python, PHP, etc.

Think of the client side as the front of a restaurant and the server side as the kitchen.

---

2. Library vs Framework

Understanding the difference between a library and a framework is key to choosing the right tool:

• Library: A collection of pre-written code that helps you perform common tasks. You’re in control and decide when and how to use the library.

• Framework: Provides a structure and rules. It calls your code and dictates the flow, giving you less flexibility but more organization.

React is a library — it gives you tools to build user interfaces while leaving control in your hands.

---

Getting Started with React

1. Using React via CDN

React can be added directly to a web page using a CDN (Content Delivery Network), without the need for installation or build tools. This is useful for small demos or learning purposes.

<script src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>

With this setup, you can build React components directly in your HTML file.

---

2. React Components

Components are the building blocks of a React application. They are reusable, independent pieces of UI:

• Functional Components – Simple functions that return JSX.

• Class Components – ES6 classes with additional features like state (less common in modern React).

Example of a functional component:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

---

3. Manual Props in React

Props (short for properties) are used to pass data from one component to another in React.

<MyComponent name="Renil" />

In this example, the name prop is manually passed to the MyComponent, allowing it to access and use the value "Renil".

---

4. JSX and Babel

JSX (JavaScript XML) allows you to write HTML-like code inside JavaScript. Browsers don’t understand JSX by default, so we use Babel, a JavaScript compiler, to convert it into regular JavaScript that browsers can execute.

Without Babel (Raw React):

const element = React.createElement(
  'div',
  null,
  React.createElement('h1', null, 'Hello')
);

With Babel (Using JSX):

<div>
  <h1>Hello</h1>
</div>

Babel acts as a translator, converting modern syntax into browser-compatible code.

---

5. React Component Lifecycle (Simple Overview)

React components go through different stages during their life:

1. Mounting

When a component is first created and added to the page.

• constructor: Sets up initial state and variables.

• render: Shows the UI on the screen.

• componentDidMount: Runs after the component appears. Good for loading data or starting timers.

2. Updating

When the component changes because of new props or state.

• shouldComponentUpdate: Decide if the component should update (helps performance).

• render: Updates the UI with new data.

• componentDidUpdate: Runs after the UI updates. Useful to react to changes.

3. Unmounting

When the component is removed from the page.

• componentWillUnmount: Clean up timers, subscriptions, or anything else to avoid memory leaks.

Functional Components and Hooks

In modern React, functional components use the useEffect hook to handle lifecycle:

• Runs after first render (like componentDidMount).

• Runs when dependencies change (like componentDidUpdate).

• Can clean up before the component is removed (like componentWillUnmount).

Example:

useEffect(() => {
  // code runs on mount or when dependencies change
  return () => {
    // cleanup on unmount
  };
}, [dependencies]);

Why is lifecycle important?

• To fetch data after the component shows up.

• To update UI only when needed.

• To clean up resources and avoid bugs.

---

6. Virtual DOM and Rendering

React’s performance benefits largely come from its use of the Virtual DOM.

• The DOM (Document Object Model) is a tree representation of the web page.

• Virtual DOM is a lightweight copy of the actual DOM that exists in memory.

• When you update a component, React updates the virtual DOM first, compares it with the previous version using a process called diffing, and then updates only the changed parts in the actual DOM.

This efficient approach minimizes slow DOM manipulations and leads to faster UI updates, especially in large applications.

For example, changing the text of one button will only re-render that button, not the entire page.

---

Development Tools and Build Process

1. JSX and Vite

When using modern tools like Vite, JSX is supported out of the box. Vite provides faster builds and hot module replacement, making the React development experience much smoother.

---

2. Understanding package.json and Build Tools

What is package.json?

The package.json file is a core configuration file in any node.js project. It holds metadata about your project and manages dependencies, scripts, and version control.

Why is it important?

• Keeps track of all installed packages.

• Defines scripts (like build or start commands).

• Makes it easier to share your project with others.

Think of it as the blueprint of your project setup.

Key Package Types:

1. Dev Dependencies – Needed only during development (e.g., testing libraries, bundlers like Parcel or Vite).
   Install using:

    npm install -D vite
   

2. Regular Dependencies – Required both in development and production (e.g., React, Axios).

What does the ^ sign mean in versions?

If you write "vite": "^4.5.0" in package.json, it means:

• It will allow minor updates, like 4.5.1.

• But it will not install major updates, like 5.0.0.

This provides flexibility while avoiding major version changes that could break your code.

package.json vs. package-lock.json

Example:
If your project uses "parcel": "^2.8.3" and a new version 2.8.4 is released:

• package.json might update.

• package-lock.json won’t, unless you reinstall with updates.

So package-lock.json helps avoid unexpected behavior by keeping dependencies exact and predictable.

---

3. What is node_modules?

The node_modules folder is a collection of all dependencies your project needs. It's generated based on package.json and package-lock.json.

• You don’t need to upload this folder to GitHub.

• It can always be regenerated with:

npm install

---

4. npm vs. npx

• npm is used to install and manage packages.

• npx is used to execute a package without installing it globally.

Example:

npx vite@latest

---

5. What is the dist folder?

The dist (distribution) folder contains the final optimized build of your project, ready for deployment. It includes:

• Minified JavaScript

• CSS and HTML

• Optimized images and static assets

You upload the contents of the dist folder to your production server or hosting platform.

---

6. Why is a React application fast?

React itself is efficient, but performance also relies heavily on modern bundlers like Vite or Parcel. These tools offer powerful optimizations:

• Dev build and Local server

• HMR (Hot Module Replacement)

• File watching

• Caching for faster builds

• Image optimization

• HTTPS support

• Tree shaking

• Code splitting

• Diagnostic and error handling

• Minification and compression

• Consistent hashing

• Differential bundling (for legacy browser support)

They ensure fast reloads, smaller bundle sizes, and high performance in both development and production.

---

Networking & Security

1. CORS (Cross-Origin Resource Sharing)

CORS is a browser security feature that controls how resources are shared between different origins.

If your frontend is hosted on one domain and it tries to access a backend API on another domain, CORS rules must be configured on the server to allow the request.

Without CORS permission, the browser will block the request to protect the user.

---

Conclusion

React and frontend development are not just about writing components. They also include understanding things like package.json, node_modules, build tools, and folders like dist used for deployment.

Learning topics like JSX, props, state, and the difference between npm and npx helps you build a strong foundation.

By mastering these fundamentals, you’re well on your way to becoming a professional frontend developer.