← Course Detail

React JS

Computer Science

Chapter 2 — React Environment and Project Setup

Progress: 14%

Lesson 2.3 : React Project Folder Structure

Reading & Interactive Lesson

Lesson 2.3 FREE

React Project Folder Structure

Reading Material & Notes

React Project Folder Structure

A React application contains several important files and directories.

my-react-app/
├── public/
├── src/
│   ├── components/
│   ├── App.jsx
│   └── main.jsx
├── package.json
└── vite.config.js

Important Directories

src: Application source code.
public: Public static resources.
components: Reusable UI components.
package.json: Project dependencies and scripts.

← Previous Lesson Next Lesson →

Course Curriculum

10 Chapters • 50 Lessons

View Course

Chapter 1 — Introduction to React JS

5 Lessons

FREE

Lesson 1.1 : What is React JS?

Lesson 1.2 : Features of React

Lesson 1.3 : React vs Traditional JavaScript

Lesson 1.4 : React Components Overview

Lesson 1.5 : Applications of React JS

Chapter 2 — React Environment and Project Setup

5 Lessons

FREE

Lesson 2.1 : Installing Node.js and npm

Lesson 2.2 : Creating a React Project

Lesson 2.3 : React Project Folder Structure

Lesson 2.4 : Running a React Development Server

Lesson 2.5 : React Dependencies and package.json

Chapter 3 — JSX and React Components

5 Lessons

FREE

Lesson 3.1 : Introduction to JSX

Lesson 3.2 : JSX Expressions

Lesson 3.3 : Creating Functional Components

Lesson 3.4 : Reusable Components

Lesson 3.5 : Rendering Lists and Conditional Content

Chapter 4 — Props and State

5 Lessons

LOCKED

Lesson 4.1 : Introduction to Props

ENROLL

Lesson 4.2 : Understanding React State

ENROLL

Lesson 4.3 : Props vs State

ENROLL

Lesson 4.4 : Passing Data Between Components

ENROLL

Lesson 4.5 : Lifting State Up

ENROLL

Chapter 5 — Events and Forms in React

5 Lessons

LOCKED

Lesson 5.1 : Handling Events in React

ENROLL

Lesson 5.2 : Handling Input Fields

ENROLL

Lesson 5.3 : React Forms

ENROLL

Lesson 5.4 : Form Validation

ENROLL

Lesson 5.5 : Building a Registration Form

ENROLL

Chapter 6 — React Hooks

5 Lessons

LOCKED

Lesson 6.1 : Introduction to React Hooks

ENROLL

Lesson 6.2 : useState Hook

ENROLL

Lesson 6.3 : useEffect Hook

ENROLL

Lesson 6.4 : useRef Hook

ENROLL

Lesson 6.5 : Custom Hooks

ENROLL

Chapter 7 — Conditional Rendering and Lists

5 Lessons

LOCKED

Lesson 7.1 : Introduction to React Router

ENROLL

Lesson 7.2 : Creating React Routes

ENROLL

Lesson 7.3 : Navigation with Link

ENROLL

Lesson 7.4 : Route Parameters

ENROLL

Lesson 7.5 : Protected Routes

ENROLL

Chapter 8 — React Routing and Navigation

5 Lessons

LOCKED

Lesson 8.1 : Introduction to APIs

ENROLL

Lesson 8.2 : Fetching Data with fetch()

ENROLL

Lesson 8.3 : API Data with useEffect

ENROLL

Lesson 8.4 : Loading and Error States

ENROLL

Lesson 8.5 : CRUD Operations with React API

ENROLL

Chapter 9 — API Integration and State Management

5 Lessons

LOCKED

Lesson 9.1 : Understanding State Management

ENROLL

Lesson 9.2 : React Context API

ENROLL

Lesson 9.3 : useReducer Hook

ENROLL

Lesson 9.4 : Redux Overview

ENROLL

Lesson 9.5 : Managing Authentication State

ENROLL

Chapter 10 — React Projects and Deployment

5 Lessons

LOCKED

Lesson 10.1 : Planning a React Project

ENROLL

Lesson 10.2 : Building a React Dashboard

ENROLL

Lesson 10.3 : Optimizing a React Application

ENROLL

Lesson 10.4 : Building Production Version

ENROLL

Lesson 10.5 : Deploying a React Application

ENROLL

React JS

Chapters

Lessons

View Course Details