SEF-PRG7936 - React

Course Description

React is a JavaScript library used for building user interfaces (UIs) in web applications. React allows developers to create reusable UI components that efficiently update and render only the necessary parts of the application when the underlying data changes. This approach is known as the "Virtual DOM" and helps improve performance and maintainability. 

This course is a comprehensive hands-on deep dive into React which enables rapid front-end development meeting modern best practices. Students will learn how to create Single Page Web Applications (SPA). This is a blended class with at least 50% of self-directed online theory and 50% of instructor-led coaching.

Course Outline

1. Setup and Rendering with React:  Includes one-way vs two-way data flow, virtual DOM, frameworks and libraries, react setup, rendering with React, props and children, more advanced rendering, key terms
2. JSX: Includes JSX syntax, how JSX works, translating HTML to JSX, nested unordered list, classes, ids, curly braces, setting JSX to variables, returning JSX from a function, key terms
3. Components: Includes creating a component, main component, prop validation, default prop values, full prop types, producing JSX from collections, rendering data, the map function, rendering objects, multiple components
4. Component State: Includes class based components, state, setState() method, increment numbers, increment by specific number.
5. Routing: Includes setup, header component, individual page component, using the header component, routing with switch case, React router, screens, React-Router-DOM, , , link component, sub-navigation, match.
6. Intro to Redux: Includes single application state, immutability, pure functions, destructuring, spread operator, filter method, Redux, Redux workflow.
7. Redux Continued: Includes counter setup, connect to Redux, store, provider, reducer, actions, reset counter
8. Component Lifecycle: Includes lifecycle methods, setup, components, lifecycle method order, render(), componentWillMount(), componentDidMount(), componentDidUpdate(), shouldComponentUpdate(), synchronous vs. asynchronous, fetching an API, higher order components.
9. Advanced Redux and Asynchronous Processes: Includes synchronous and asynchronous, callback functions, promises, error handling, dispatching after asynchronous processes, HTTP request, action creators, reducers, main component, search component.
10. Final Project with React 

Learner Outcomes

React completes the circle of JavaScript coding style and techniques.  In this class, you will:

• Learn a JavaScript library that makes front-end code more maintainable
• Communicate with back-end REST services
• Learn how to manage the state in an application
• Learn how to use components when building an application
• Learn how to use routing to support multiple pages within a SP

Notes

Target Audience:

The target audience for learning React is primarily web developers and front-end engineers. React is a JavaScript library for building user interfaces, and it is widely used to create interactive and dynamic web applications. Individuals who are interested in web development and have a basic understanding of HTML, CSS, and JavaScript will find React relevant and beneficial to their skill set. Specifically, the target audience includes:

Front-End Developers: Those who are already familiar with HTML, CSS, and JavaScript and want to enhance their skills to build more complex and efficient user interfaces.

Web Developers: Anyone interested in developing modern web applications using the latest tools and technologies.

JavaScript Developers: Developers who want to explore the React ecosystem and learn how to build reusable components.

UI/UX Designers: Designers who want to understand how their designs can be translated into interactive web interfaces using React.

Occupational Outlook:

According to the Department of Labor, the employment of web developers and digital designers is projected to grow 23 percent from 2021 to 2031, much faster than the average for all occupations. About 21,800 openings for web developers and digital designers are projected each year, on average, over the decade. 

React has gained significant popularity within the web development community due to its efficiency, modularity, and ability to create complex user interfaces with ease. As a result, many companies and startups use React, making it a valuable skill for developers seeking job opportunities in the tech industry.

Information Technology Continuing Education Certificate:

This course is part of the JavaScript Full Stack Developer Certificate. Certificates are awarded with the completion of all required courses (no substitutions), and final project.  

Industry Certification:

React is an open-source JavaScript library, and certification programs for open-source technologies are generally not provided by the developers themselves. Instead of relying solely on certifications, employers often focus on a candidate's practical skills, experience, and ability to showcase their projects or contributions to open-source initiatives. Building a strong portfolio and demonstrating your expertise through real-world projects is often more valuable in the field of web development and JavaScript.

Method of Instruction:

Blended learning with lectures, videos, class discussions, live demonstrations, hands-on exercises, and projects. Outside homework is assigned.

Evaluation:

Participation and completion of all skill lab practices are expected. Class attendance is required for successful completion.

• Class participation and attendance (50%) 
• Projects/Competencies/Research  (50%)