Explore

Front-End Web Development with React

Approx. 36 hours to complete

Save Course

Go to Course

Course Summary

Learn how to build dynamic and responsive web applications using React, a popular front-end JavaScript library.

Key Learning Points

Learn to create reusable components using React
Understand how to manage state and data flow in React
Build and deploy a complete React application

Learning Outcomes

Create dynamic and responsive web applications using React
Implement reusable components in your web development projects
Understand the principles of state management and data flow in React

Prerequisites or good to have knowledge before taking this course

Basic knowledge of HTML, CSS, and JavaScript
Experience with web development frameworks is helpful but not required

Course Difficulty Level

Intermediate

Course Format

Online
Self-paced
Video lectures
Hands-on exercises

Similar Courses

Full Stack Web Development with React
React Native: Building Mobile Apps
JavaScript: Understanding the Weird Parts

Related Education Paths

Notable People in This Field

Creator of Redux
JavaScript Educator

Related Books

Description

This course explores Javascript based front-end application development, and in particular the React library (Currently Ver. 16.3). This course will use JavaScript ES6 for developing React application. You will also get an introduction to the use of Reactstrap for Bootstrap 4-based responsive UI design. You will be introduced to various aspects of React components. You will learn about React router and its use in developing single-page applications. You will also learn about designing controlled forms. You will be introduced to the Flux architecture and Redux. You will explore various aspects of Redux and use it to develop React-Redux powered applications. You will then learn to use Fetch for client-server communication and the use of REST API on the server side. A quick tour through React animation support and testing rounds off the course. You must have preferably completed the previous course in the specialization on Bootstrap 4, or have a working knowledge of Bootstrap 4 to be able to navigate this course. Also a good working knowledge of JavaScript, especially ES 5 is strongly recommended.

At the end of this course you will: - Be familiar with client-side Javascript application development and the React library - Be able to implement single page applications in React - Be able to use various React features including components and forms - Be able to implement a functional front-end web application using React - Be able to use Reactstrap for designing responsive React applications - Be able to use Redux to design the architecture for a React-Redux application

Outline

Introduction to React
Welcome to Front-End Web Development with React
How to Use the Learning Resources
What is Full-Stack Web Development?
Exercise (Video): Setting up Git
Exercise (Video): Basic Git Commands
Exercise (Video): Online Git Repositories
Node.js and NPM
Exercise (Video): Setting up Node.js and NPM
Exercise (Video): Basics of Node.js and NPM
Front-end JavaScript Frameworks and Libraries Overview
Introduction to React
Exercise (Video): Getting Started with React
React App Overview
Introduction to JSX
Exercise (Video): Configuring your React Application
React Components
Exercise (Video): React Components Part 1
React Components: State and Props
Exercise (Video): React Components Part 2
React Components: Lifecycle Methods Part 1
Assignment 1 Requirements (Video): React Components
Welcome to Front-End Web Development with React: Additional Resources
Full-Stack Web Development: The Big Picture: Objectives and Outcomes
Full Stack Web Development: Additional Resources
Setting up Your Development Environment: Git and Node: Objectives and Outcomes
Setting up your Development Environment
Exercise (Instructions): Setting up Git
Exercise (Instructions): Basic Git Commands
Exercise (Instructions): Online Git Repositories
Exercise (Instructions): Setting up Node.js and NPM
Exercise (Instructions): Basics of Node.js and NPM
Setting up your Development Environment: Git and Node: Additional Resources
Introduction to React: Objectives and Outcomes
Exercise (Instructions): Getting Started with React
Exercise (Instructions): Configuring your React Application
Introduction to React: Additional Resources
React Components: Objectives and Outcomes
Exercise (Instructions): React Components Part 1
Exercise (Instructions): React Components Part 2
React Components: Additional Resources
Assignment 1: React Components: Additional Resources
Ideation: Objectives and Outcomes
Ideation Report Template
Ideation: Additional Resources

React Router and Single Page Applications
Presentational and Container Components
Exercise (Video): Presentational and Container Components
React Components: Lifecycle Methods Part 2
Functional Components
Exercise (Video): Functional Components
React Virtual DOM
Exercise (Video): Header and Footer
React Router
Exercise (Video): React Router
Single Page Applications
Exercise (Video): Single Page Applications Part 1
React Router: Parameters
Exercise (Video): Single Page Applications Part 2
Assignment 2: React Router and Single Page Applications
React Component Types: Objectives and Outcomes
Exercise (Instructions): Presentational and Container Components
Exercise (Instructions): Functional Components
React Component Types: Additional Resources
React Router: Objectives and Outcomes
Exercise (Instructions): Header and Footer
Exercise (Instructions): React Router
React Router: Additional Resources
Single Page Applications: Objectives and Outcomes
Exercise (Instructions): Single Page Applications Part 1
Exercise (Instructions): Single Page Applications Part 2
Single Page Applications: Additional Resources
Assignment 2: React Router and Single Page Applications: Additional Resources
UI Design and Prototyping: Objectives and Outcomes
UI Design and Prototyping Report Template
UI Design and Prototyping: Additional Resources

React Forms, Flow Architecture and Introduction to Redux
Controlled Forms
Exercise (Video): Controlled Forms
Exercise (Video): Controlled Form Validation
Uncontrolled Components
Exercise (Video): Uncontrolled Forms
The Model-View-Controller Framework
The Flux Architecture
Introduction to Redux
Exercise (Video): Introduction to Redux
React Redux Forms
Exercise (Video): React Redux Form
Exercise (Video): React Redux Form Validation
Assignment 3: React Forms and Redux
Controlled Forms: Objectives and Oute
Exercise (Instructions): Controlled Forms
Exercise (Instructions): Controlled Form Validation
Controlled Forms: Additional Resources
Uncontrolled Forms: Objectives and Outcomes
Exercise (Instructions): Uncontrolled Forms
Uncontrolled Forms: Additional Resources
Introduction to Redux: Objectives and Outcomes
Exercise (Instructions): Introduction to Redux
Introduction to Redux: Additional Resources
React Redux Form: Objectives and Outcomes
Exercise (Instructions): React Redux Form
Exercise (Instructions): React Redux Form Validation
React Redux Form: Additional Resources
Assignment 3: React Forms and Redux: Additional Resources

More Redux and Client-Server Communication
Redux Actions
Exercise (Video): Combining Reducers
Exercise (Video): Redux Actions
Redux Thunk
Exercise (Video): Redux Thunk
Exercise (Video): React-Redux-Form Revisited
Networking Essentials
Brief Representational State Transfer (REST)
Exercise (Video): Setting up a Server using json-server
Promises
Fetch
Exercise (Video): Fetch from Server
Exercise (Video): Fetch Handling Errors
Exercise (Video): Fetch Post Comment
React Animations
Exercise (Video): React Animations
Exercise (Video): React Animation Components
Assignment 4: Redux, Client-Server Communication and Fetch
Introduction to Webpack
Exercise (Video): Building and Deploying the React Application
Redux Actions: Objectives and Outcomes
Exercise (Instructions): Combining Reducers
Exercise (Instructions): Redux Actions
Redux Actions: Additional Resources
Redux Thunk: Objectives and Outcomes
Exercise (Instructions): Redux Thunk
Exercise (Instructions): React-Redux-Form Revisited
Redux Thunk: Additional Resources
Client-Server Communication: Objectives and Outcomes
Exercise (Instructions): Setting up a Server using json-server
Client-Server Communication: Additional Resources
Fetch: Objectives and Outcomes
Exercise (Instructions): Fetch from Server
Exercise (Instructions): Fetch Handling Errors
Exercise (Instructions): Fetch Post Comment
Fetch: Additional Resources
React Animations: Objectives and Outcomes
Exercise (Instructions): React Animations
Exercise (Instructions): React Animation Components
React Animations: Additional Resources
Assignment 4: Redux, Client-Server Communication and Fetch: Additional Resources
Building and Deployment: Objectives and Outcomes
Exercise (Instructions): Building and Deploying the React Application
Building and Deployment: Additional Resources
Project Implementation: Objectives and Outcomes
Final Report Template

Summary of User Reviews

Read reviews on Coursera's Front-End Web Development with React course. Users have found this course to be highly informative and engaging, with an emphasis on hands-on learning. One key aspect that many users thought was good is the instructor's ability to explain complex concepts in a clear and concise manner.

Pros from User Reviews

The course is well-structured and easy to follow
The instructor is highly knowledgeable and engaging
The hands-on projects provide valuable practical experience
The course covers a wide range of topics related to front-end web development

Cons from User Reviews

Some users found the course to be too basic for their level of expertise
The course can be time-consuming, especially for those with busy schedules
Some users found the discussion forums to be unhelpful or difficult to navigate

Recommended for you

MERN Stack Front To Back: Full Stack React, Redux & Node.js

Build and deploy a social network with Node. js, Express, React, Redux & MongoDB. Fully updated April 2019 Welcome to "MERN Stack Front To Back"....

Save Course

ES6 - JavaScript Improved

The web is constantly changing and with JavaScript as the ES6 includes major changes in syntax and language features that can help you write better, cleaner code....

Save Course

React styled-components v5 (2020 edition)

Ditch CSS stylesheets! Learn CSS in JS to quickly and cleanly style React components with the styled-components library **React styled components - COURSE UPDATE MARCH 2020**:...

Save Course

Introduction to Web Development with HTML, CSS, JavaScript

Want to take the first steps to become a Cloud Application Developer? You’ll then focus on the languages you need for front-end development, working with HTML, CSS, and JavaScript....

Save Course