Scribd
Upload
7 views

React_JS_1_Week_Syllabus

This document outlines a 1-week beginner syllabus for learning React JS, covering key topics such as JSX, components, state management, event handling, and the useEffect hook. Each day includes theoretical lessons followed by practical exercises to reinforce learning, culminating in a mini project on the final day. The syllabus emphasizes hands-on experience with building applications and understanding fundamental React concepts.

Uploaded by

Mohammed Aadam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

React_JS_1_Week_Syllabus

This document outlines a 1-week beginner syllabus for learning React JS, covering key topics such as JSX, components, state management, event handling, and the useEffect hook. Each day includes theoretical lessons followed by practical exercises to reinforce learning, culminating in a mini project on the final day. The syllabus emphasizes hands-on experience with building applications and understanding fundamental React concepts.

Uploaded by

Mohammed Aadam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

React JS - 1 Week Beginner Syllabus

Day 1: Introduction to React

- What is React?

- Why use React?

- React vs Vanilla JS vs other frameworks

- Setting up development environment

- Install Node.js and npm

- Create React App using `npx create-react-app`

- Folder structure overview

Practice:

- Create your first React app

- Start local server and display 'Hello, React!'

Day 2: JSX & Components

- Understanding JSX (JavaScript XML)

- Creating functional components

- Component naming conventions

- Rendering multiple components

- Props (passing data to components)

Practice:

- Create a few components (Header, Footer, Content)

- Pass and display props

Day 3: State & Events

- Introduction to useState hook

- Managing local component state

- Event handling (onClick, onChange)

- Conditional rendering

Practice:
React JS - 1 Week Beginner Syllabus

- Build a counter app

- Create a toggle button

Day 4: Lists and Keys

- Rendering lists using `.map()`

- Using `key` props

- Dynamically generating components

- Basic styling (inline CSS, CSS files)

Practice:

- Display a list of users/items

- Add basic styles to components

Day 5: Forms and Controlled Components

- Handling forms in React

- Controlled vs uncontrolled components

- Handling input fields and form submission

Practice:

- Build a form to collect user input

- Display submitted data below the form

Day 6: useEffect & Basic Lifecycle

- Introduction to useEffect hook

- Simulating component lifecycle

- Fetching data from an API (e.g., using fetch)

- Understanding dependency array in useEffect

Practice:

- Fetch and display data from a public API (e.g., JSONPlaceholder)


React JS - 1 Week Beginner Syllabus

Day 7: Project + Recap

- Mini Project (Suggestions):

- Todo App

- Weather App (with API)

- Simple Blog Viewer

- Review key concepts:

- JSX

- Components

- Props & State

- Events

- useEffect

Practice:

- Build and style the selected mini project

- Test and debug your app

You might also like