Chapter 1: Introduction to React

React is a powerful declarative, efficient, and flexible JavaScript library used for building user interfaces, especially Single Page Applications (SPAs).

There were lot of fancy words declarative, library , SPA so lets breakdown into those words

• Library: In programming, a library is a collection of pre-written code that you can use to perform common tasks. React is called a "library" because it provides a set of tools and functions that help you build UIs without having to write everything from scratch.

• Declarative: React uses a declarative approach to building UIs. This means that you describe what the UI should look like based on the current state, and React takes care of the steps needed to update the view when the state changes. Instead of manually manipulating the DOM (like in imperative programming), you just define the desired result, and React handles the details.

• Single Page Application (SPA): An SPA is a type of web application where only one HTML page is loaded. As users interact with the app, new content is dynamically loaded without reloading the entire page. React is ideal for building SPAs because it efficiently updates only the necessary parts of the page when the user interacts with the application, improving performance and user experience.

Key Features of React:

• Declarative: React makes it easy to design interactive UIs. You describe how your UI should look for any given state, and React will take care of updating and rendering the components when data changes.

• Component-Based: The UI is divided into components, which are like custom, reusable HTML elements. Components can be nested, managed, and handled independently.

• Efficient Updates with Virtual DOM: React uses a virtual DOM to optimize rendering. It keeps a lightweight copy of the actual DOM in memory and updates only the changed parts of the UI, improving performance.

Things like virtual DOM and components wont make any sense to you write now but just remember this because in next lesson itself we will learn both.

Why use React?

There are several reasons why React is widely adopted for building modern web applications:

1. Reusability: Components are reusable, which helps in maintaining the codebase efficiently.

2. Performance: React’s virtual DOM ensures that only changed components are re-rendered, boosting performance.

3. Developer Tools: React provides a set of tools, like the React Developer Tools extension, which make debugging and inspecting component hierarchies much easier.

4. Wide Adoption and Community Support: React has a large community of developers and many resources, making it easier to find help and solutions to problems.

Before we compare React with other popular applications, let's understand the difference between a library and a framework.

Library

A library is a set of pre-written code that developers can use to perform tasks, offering reusable components and allowing the developer to control the program flow and decide when to use the library.

Official Definition (Source: MDN Web Docs)

"A library is a collection of precompiled routines that a program can use. Libraries are particularly useful for storing frequently used routines because you do not have to explicitly link them to every program that uses them."

Framework

A framework is a structured platform for building software applications, where the framework controls the program flow and calls the developer's code at certain points.

Official Definition (Source: Microsoft Docs)

"A software framework is a platform for developing software applications. It provides a foundation on which software developers can build programs for a specific platform. Frameworks may include predefined classes and functions to process input, manage hardware devices, and interact with system software."

Library vs. Framework

Key Analogy:

• Library: Like ordering food from a menu. You pick and use only what you need.

• Framework: Like being given a recipe to follow. You have to follow its structure and process.

React vs. Other Frameworks

Let’s briefly compare React with other popular JavaScript frameworks like Angular and Vue:

• React vs Angular:

  • Angular is a full-fledged framework, while React is a library for building UIs.

  • Angular uses two-way data binding, whereas React uses one-way data flow, which makes debugging easier.

  • React offers flexibility in choosing the other tools and libraries to use, while Angular comes with a set of predefined tools.

• React vs Vue:

  • Vue is more opinionated than React. While React focuses on the "view" part of the application, Vue provides a complete solution.

  • Vue also has a simpler learning curve, while React might require a bit more setup, especially in larger applications.

React's Core Principles: Components, State, and Props

React’s core lies in three main principles:

1. Components: React allows you to build complex UIs by breaking them down into smaller, reusable components. A component can be a function or a class.

   • Functional Components:

        function Welcome() {
           return <h1>Hello, world!</h1>;
         }
     

   • Class Components:

         class Welcome extends React.Component {
           render() {
             return <h1>Hello, world!</h1>;
           }
         }
     

2. State: State is a JavaScript object that holds dynamic data in a component. When state changes, React re-renders the component to reflect the changes.

     import React, { useState } from 'react';
   
     function Counter() {
       const [count, setCount] = useState(0);
   
       return (
         <div>
           <p>You clicked {count} times</p>
           <button onClick={() => setCount(count + 1)}>Click me</button>
         </div>
       );
     }
   

3. Props: Props (short for properties) are used to pass data from a parent component to a child component. Props are immutable within the child component.

     function Welcome(props) {
       return <h1>Hello, {props.name}!</h1>;
     }
   
     function App() {
       return <Welcome name="John" />;
     }
   

Setting up the Development Environment

Before you start coding, you need to set up your development environment. This includes installing Node.js, npm (Node package manager), a code editor, and React itself.

Installing Node.js and npm

Node.js is a runtime environment that allows you to run JavaScript outside the browser. npm is the default package manager for Node.js, which you will use to install React and other libraries.

1. Download Node.js: Go to Node.js official website and download the latest LTS version.

2. Verify Installation: After installing, open your terminal or command prompt and type:

     node -v
     npm -v
   

   You should see the installed versions of Node.js and npm.

Installing a Code Editor (VSCode)

A good code editor is essential for a smooth development experience. Visual Studio Code (VSCode) is a popular code editor for JavaScript and React development.

1. Download VSCode: Visit VSCode's official site to download and install it.

2. Install React Extensions: To make your development easier, you can install extensions like:

   • ES7 React/Redux/GraphQL/React-Native snippets: For faster coding.

   • Prettier: For automatic code formatting.

Creating Your First React App using Create React App (CRA) and Vite

Now that you have the environment ready, let’s create your first React application using two popular tools: Create React App (CRA) and Vite.

1. Create React App (CRA) : Create React App (CRA) is a tool that sets up a new React project with a good default configuration.

1. Install CRA Globally:

     npm install -g create-react-app
   

2. Create a New React Project:

     npx create-react-app my-first-react-app
   

3. Navigate to the Project Folder:

     cd my-first-react-app
   

4. Start the Development Server:

     npm start
   

   This will launch your app in the browser at http://localhost:3000/.

5. Modify the src/App.js: Open src/App.js and replace the default code with:

    function App() {
       return <h1>Welcome to My First React App!</h1>;
     }
   
     export default App;
   

2. Vite : Vite is another tool that allows you to quickly set up a React app with a faster development server.

1. Create a Vite React App:

     npm create vite@latest my-first-vite-app --template react
   

2. Navigate to the Project Folder:

     cd my-first-vite-app
   

3. Install Dependencies:

     npm install
   

4. Start the Development Server:

     npm run dev
   

   This will open your React app in the browser at http://localhost:5173/

Now lets dive in folder structure :

Default Folder Structure

my-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   ├── index.html
│   ├── manifest.json
│   └── robots.txt
├── src/
│   ├── App.css
│   ├── App.js
│   ├── App.test.js
│   ├── index.css
│   ├── index.js
│   ├── logo.svg
│   └── reportWebVitals.js
│   └── setupTests.js
├── .gitignore
├── package.json
├── README.md
├── yarn.lock (if you used yarn)
└── package-lock.json (if you used npm)

Explanation of Each File/Folder

📁 node_modules/

• What it is: Contains all the installed packages and dependencies for your app.

• Do you edit it?: No. It is auto-generated when you run npm install.

• Why it exists: It allows you to import external libraries (like React, Lodash, Axios, etc.) in your app.

• Key Note: This folder can be deleted, and you can recreate it by running npm install.

---

📁 public/

• What it is: Static files and assets that are publicly accessible.

• Purpose: Files in this folder are not processed by Webpack and are accessible via URL (e.g., https://example.com/favicon.ico).

• Important Files:

  • index.html: The root HTML file where the React app is injected.

  • favicon.ico: The small icon that appears in the browser tab.

  • manifest.json: Configures how the app behaves when installed on a user's device (PWA support).

  • robots.txt: Tells search engines which pages of your app to index or avoid.

Key Note: Never put React components in the public folder. It only stores static files.

---

📁 src/

• What it is: Contains the source code of your React app.

• Purpose: This is where you write your components, styles, and application logic.

• Important Files:

  • index.js: The entry point for your React app. It renders the <App /> component into the DOM using ReactDOM.render().

  • App.js: The main component where most of your app's logic starts. You can modify or replace it with your own components.

  • index.css: The global CSS file for styling the app.

  • App.css: CSS specific to the App.js component.

  • logo.svg: The default logo you see in the browser when you start the app.

  • App.test.js: A testing file that contains tests for the App.js component (using Jest).

  • reportWebVitals.js: Used to measure the performance of the React app.

  • setupTests.js: Used to configure and set up testing with Jest.

Key Note: You will spend 95% of your time in this folder when developing a React app.

---

📄 .gitignore

• What it is: Tells Git which files and folders to ignore when pushing to a remote repository (like GitHub).

• Common Exclusions:

  • node_modules/ (to avoid uploading thousands of files to GitHub)

  • build/ (production build files)

  • .env (secret environment variables)

---

📄 package.json

• What it is: The "metadata" file for your project.

• Purpose: It defines project details (like name, version), dependencies, scripts, and configurations.

• Key Sections:

  • scripts: Run scripts like npm start, npm test, and npm build.

  • dependencies: Libraries used in production (like React, Axios, etc.).

  • devDependencies: Tools used only for development (like testing libraries, linters, etc.).

---

📄 README.md

• What it is: Instructions for the project (Markdown file).

• Purpose: Explains how to set up, run, and understand the app.

• Key Note: Update this file to explain your project to other developers or collaborators.

---

📄 yarn.lock or package-lock.json

• What it is: Lock files for dependencies.

• Purpose: Ensures that the same versions of libraries are installed across different environments.

• Key Note: If you use npm, you'll get package-lock.json. If you use yarn, you'll get yarn.lock.

---

Summary

---

🔥 Most Important Files to Understand

1. src/index.js - Entry point of the app.

2. src/App.js - Main component of the app.

3. public/index.html - Base HTML where React components are injected.

4. package.json - Project metadata and dependencies.

---

So, after learning what React is, why React is used, how to install it, and its basic folder structure, we have reached the end of this chapter. Next, we will learn how to write code in React. Spoiler alert: it's called JSX.

Please share what I can improve or what I might have missed.