
Course Information

Course Name
RJS: ReactJS

Duration
3 Days
Overview
This course shows how to use ReactJS framework to build fast, modern, scalable single page web applications (SPAs). The course covers the principles of SPA development and then takes the students through the process of building a ReactJS user interface. The course introduces JSX, the pseudo-HTML used in building ReactJS components and moves on creating composite components and controller views using props and state. The students will build and validate Web forms and use Facebook’s unidirectional design pattern Flux, combining stores and actions to communicate with Web services and manage state. Students will gain a deeper understanding of JSX, work with form components, implement React styles, and learn how to integrate unit tests for React components.
Audience Profile
- Front-End Developers
- Full Stack Developers
- Web Application Developers
- Software Engineers
- UI Developers
- JavaScript Developers
- Technical Leads and Solution Architects
- Developers transitioning to modern React development
Prerequisites
Before attending this course, students should have general programming experience and knowledge of HTML, CSS and JavaScript.
At Course Completion
By the end of this programme, participants will be able to:
- Build modern Single Page Applications (SPAs) using React.
- Develop reusable user interface components using functional components and JSX.
- Manage application state using React Hooks.
- Build interactive and responsive user interfaces following React best practices.
- Implement controlled forms and client-side validation.
- Consume RESTful APIs and manage asynchronous data.
- Implement client-side navigation using React Router.
- Share application state using Context API and custom Hooks.
- Optimize React applications using modern performance techniques.
- Write unit tests for React components using modern testing tools.
- Organize React projects using maintainable and scalable application structures.
- Apply industry best practices for building production ready React applications.
Course Outline
- JavaScript Essentials
- ES6+ language features
- Variables using let and const
- Arrow functions
- Template literals
- Destructuring objects and arrays
- Spread and Rest operators
- Modules (import/export)
- Working with Data
- Array methods (map, filter, reduce)
- Optional chaining
- Nullish coalescing
- Promises
- Async/Await
- React Fundamentals
- Understanding React
- Component-based architecture
- Single Page Applications (SPA)
- Virtual DOM
- Declarative UI
- React Developer Tools
- React Development Environment
- Creating a React project using modern tooling
- Project structure
- Package management
- Development server
- Build process
- Functional Components
- JSX syntax
- Creating functional components
- Component composition
- Rendering components
- Props
- Lists and Keys
- Conditional rendering
- Fragments
- React Hooks Fundamentals
- Introduction to Hooks
- useState
- Event handling
- Updating component state
- Lifting state up
- Working with Forms
- Controlled components
- Input elements
- Textarea
- Select
- Checkbox and Radio buttons
- Form validation
- Form submission
- Event Handling
- React event handling
- Event propagation
- User interaction patterns
- Working with Hooks
- Understanding useEffect
- Dependency arrays
- Cleanup functions
- Component lifecycle with Hooks
- Working with REST APIs
- Fetching data using Fetch API
- Handling asynchronous requests
- Loading indicators
- Error handling
- Rendering dynamic data
- Client-Side Routing
- React Router fundamentals
- Route configuration
- Route parameters
- Nested routes
- Navigation
- Layout components
- 404 pages
- Context API
- Understanding Context
- Creating Providers
- Sharing application state
- Using useContext
- Avoiding prop drilling
- Building Reusable Logic
- Creating custom Hooks
- Sharing business logic
- Component reusability
- Organizing reusable code
- Application Structure
- Folder organization
- Feature-based architecture
- Component organization
- Best practices
- Performance Optimization
- React.memo
- useMemo
- useCallback
- Lazy loading
- Code splitting
- Suspense
- Testing React Applications
- Testing fundamentals
- Jest
- React Testing Library
- Component testing
- User interaction testing
- Mocking API requests
- Production Best Practices
- Writing maintainable React code
- Error boundaries
- Environment configuration
- Code quality
- Accessibility fundamentals
- Deployment considerations
- Build a complete Single Page Application
- Develop reusable functional components
- Manage application state using Hooks
- Implement forms and validation
- Consume REST APIs
- Implement client-side routing
- Share application state using Context API
- Optimize application performance
- Write unit tests for key components
- Present the completed application and architecture
Overview
Overview
This course shows how to use ReactJS framework to build fast, modern, scalable single page web applications (SPAs). The course covers the principles of SPA development and then takes the students through the process of building a ReactJS user interface. The course introduces JSX, the pseudo-HTML used in building ReactJS components and moves on creating composite components and controller views using props and state. The students will build and validate Web forms and use Facebook’s unidirectional design pattern Flux, combining stores and actions to communicate with Web services and manage state. Students will gain a deeper understanding of JSX, work with form components, implement React styles, and learn how to integrate unit tests for React components.
Audience Profile
Audience Profile
- Front-End Developers
- Full Stack Developers
- Web Application Developers
- Software Engineers
- UI Developers
- JavaScript Developers
- Technical Leads and Solution Architects
- Developers transitioning to modern React development
Prerequisities
Prerequisites
Before attending this course, students should have general programming experience and knowledge of HTML, CSS and JavaScript.
At Course Completion
At Course Completion
By the end of this programme, participants will be able to:
- Build modern Single Page Applications (SPAs) using React.
- Develop reusable user interface components using functional components and JSX.
- Manage application state using React Hooks.
- Build interactive and responsive user interfaces following React best practices.
- Implement controlled forms and client-side validation.
- Consume RESTful APIs and manage asynchronous data.
- Implement client-side navigation using React Router.
- Share application state using Context API and custom Hooks.
- Optimize React applications using modern performance techniques.
- Write unit tests for React components using modern testing tools.
- Organize React projects using maintainable and scalable application structures.
- Apply industry best practices for building production ready React applications.
Course Outline
Course Outline
- JavaScript Essentials
- ES6+ language features
- Variables using let and const
- Arrow functions
- Template literals
- Destructuring objects and arrays
- Spread and Rest operators
- Modules (import/export)
- Working with Data
- Array methods (map, filter, reduce)
- Optional chaining
- Nullish coalescing
- Promises
- Async/Await
- React Fundamentals
- Understanding React
- Component-based architecture
- Single Page Applications (SPA)
- Virtual DOM
- Declarative UI
- React Developer Tools
- React Development Environment
- Creating a React project using modern tooling
- Project structure
- Package management
- Development server
- Build process
- Functional Components
- JSX syntax
- Creating functional components
- Component composition
- Rendering components
- Props
- Lists and Keys
- Conditional rendering
- Fragments
- React Hooks Fundamentals
- Introduction to Hooks
- useState
- Event handling
- Updating component state
- Lifting state up
- Working with Forms
- Controlled components
- Input elements
- Textarea
- Select
- Checkbox and Radio buttons
- Form validation
- Form submission
- Event Handling
- React event handling
- Event propagation
- User interaction patterns
- Working with Hooks
- Understanding useEffect
- Dependency arrays
- Cleanup functions
- Component lifecycle with Hooks
- Working with REST APIs
- Fetching data using Fetch API
- Handling asynchronous requests
- Loading indicators
- Error handling
- Rendering dynamic data
- Client-Side Routing
- React Router fundamentals
- Route configuration
- Route parameters
- Nested routes
- Navigation
- Layout components
- 404 pages
- Context API
- Understanding Context
- Creating Providers
- Sharing application state
- Using useContext
- Avoiding prop drilling
- Building Reusable Logic
- Creating custom Hooks
- Sharing business logic
- Component reusability
- Organizing reusable code
- Application Structure
- Folder organization
- Feature-based architecture
- Component organization
- Best practices
- Performance Optimization
- React.memo
- useMemo
- useCallback
- Lazy loading
- Code splitting
- Suspense
- Testing React Applications
- Testing fundamentals
- Jest
- React Testing Library
- Component testing
- User interaction testing
- Mocking API requests
- Production Best Practices
- Writing maintainable React code
- Error boundaries
- Environment configuration
- Code quality
- Accessibility fundamentals
- Deployment considerations
- Build a complete Single Page Application
- Develop reusable functional components
- Manage application state using Hooks
- Implement forms and validation
- Consume REST APIs
- Implement client-side routing
- Share application state using Context API
- Optimize application performance
- Write unit tests for key components
- Present the completed application and architecture
