[go: up one dir, main page]
Scribd
Upload
101 views2 pages

INT252

This document outlines a course on web app development with ReactJS. It describes 6 learning outcomes covering React concepts like components, state management, and hooks. It also lists 6 units covering topics from building components to navigation, APIs, and testing. Finally, it provides examples of practical assignments involving React features like forms, APIs, and Redux.

Uploaded by

vikashnayan06
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
101 views2 pages

INT252

This document outlines a course on web app development with ReactJS. It describes 6 learning outcomes covering React concepts like components, state management, and hooks. It also lists 6 units covering topics from building components to navigation, APIs, and testing. Finally, it provides examples of practical assignments involving React features like forms, APIs, and Redux.

Uploaded by

vikashnayan06
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/ 2

INT252:WEB APP DEVELOPMENT WITH REACTJS

L:2 T:0 P:2 Credits:3

Course Outcomes: Through this course students should be able to

CO1 :: understand core concepts and apply principles in front-end frameworks, React, ES,
TypeScript, JSX, and React components, integrating props and event handling.

CO2 :: master using functional React components, project structure, JSX, state management,
data flow, lifecycle, services integration, testing, and creating controlled forms.

CO3 :: apply effective event handling, regulate data flow, leverage hooks, and govern component
states within React frameworks
CO4 :: apply diverse navigation, create adaptive navigation bars, implement conditional
rendering, manage assets efficiently, and integrate multimedia components within React
environments.

CO5 :: use React hooks for state and effects, manage API data retrieval, and access DOM
elements effectively in React development.
CO6 :: use JSX, optimize software, compose components, manage dynamic content, use
attributes, create utilities, employ testing, integrate Redux, handle async actions.

Unit I
Building Rich Front-End Applications with React and ES6 : Introduction to Front-End
Frameworks and React, Introduction to ES, Introduction to TypeScript, Introduction to JSX,
Introduction to components, Working with React Components - Props and Event Handling
Unit II
React components : Introduction to functional components, Creating React components, The React
project structure, Importing components, Principles of components, Using props in components,
Introducing JSX, Practical styling, Embedded JSX expressions, Embedding in attributes, Introduction
to states, Passing Data and States Between Components, Component Lifecycle, Connecting React to
External Services, Testing React Components, Controlled components, Creating form components,
Creating controlled form components
Unit III
Data and State : Types of events, Common event handling, Syntax for handlers, User events,
Parent-child data flow, Children and data, What are hooks, What is state, Observing state, Managing
state, React state management, Stateful vs. stateless
Unit IV
Navigation, Updating and Assets in React js : Basic types of navigation, The navbar, Conditional
rendering, Single view conditional update, What is an asset and where does it live, Using embedded
assets, Audio and video, Create an audio/video component
Unit V
React hooks and custom hooks : Working with react hooks, useState, useEffect, useReducer,
UseRef hook, Rules of hooks, What is useReducer and how it differs from useState, Fetching data,
APIs, REST API, useRef to access underlying DOM
Unit VI
JSX and testing and Advanced React : JSX, Components and Elements, The importance of
performance to software development, Component composition with children, Manipulating children
dynamically in JSX, Spread Attributes, Cross-cutting concerns in React, Create a HOC for cursor
position, Render props, Why React Testing Library, Writing the first test for your form, Style guides,
Introduction to Redux

List of Practicals / Experiments:

List of Practicals / Experiments:


• Develop a basic navigation bar using React components.

• Create a component that toggles content based on certain conditions.

• Practice using images or icons and embedding them within React components.

• Develop a component to display audio or video files using React.

Session 2023-24 Page:1/2


• Implement useState and useEffect hooks separately to manage component state and effects.

• Build an app that retrieves and displays data from a public API using React.

• Create components managing state using useState and useReducer hooks.

• Explore React component lifecycle by logging lifecycle methods at different stages.

• Build a controlled form using React to understand form state management.

• Implement a simple HOC to modify component behavior.

• Develop components that use render props to share functionality.

• Write basic test cases using React Testing Library for a component

• Integrate Redux into a simple React app and manage state.

• Implement Redux middleware for asynchronous actions within a React-Redux setup.

Text Books:
1. ADVANCED WEB DEVELOPMENT WITH REACT by MEHUL MOHAN, BPB PUBLICATIONS

References:
1. REACT: THE COMPREHENSIVE GUIDE by SEBASTIAN SPRINGER, SHROFF/O'REILLY

Session 2023-24 Page:2/2

You might also like