À propos de ce cours : 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
Les destinataires de ce cours : This course is aimed at students with sufficient knowledge of Web technologies like HTML, CSS and JavaScript. A good working knowledge of JavaScript, especially ES 5 is strongly recommended.
Créé par : The Hong Kong University of Science and Technology
Enseigné par : Jogesh K. Muppala, Associate Professor
Department of Computer Science and Engineering
| Informations de base | Cours 2 de 4 dans Full-Stack Web Development with React Specialization |
| Niveau | Intermédiaire |
| Engagement | 4 weeks of study, 6-8 hours/week |
| Langue | English |
| Comment réussir | Réussissez tous les devoirs notés pour terminer le cours. |
| Notes des utilisateurs |
Programme de cours
SEMAINE 1
Introduction to React
In this module we get a quick introduction to front-end JavaScript frameworks and libraries, followed by an introduction to React. We will also learn about React components and JSX.
21 vidéos, 23 lectures
- Vidéo: How to Use the Learning Resources
- Leitura: Welcome to Front-End Web Development with React: Additional Resources
- Leitura: Full-Stack Web Development: The Big Picture: Objectives and Outcomes
- Vidéo: What is Full-Stack Web Development?
- Leitura: Full Stack Web Development: Additional Resources
- Leitura: Setting up Your Development Environment: Git and Node: Objectives and Outcomes
- Leitura: Setting up your Development Environment
- Vidéo: Exercise (Video): Setting up Git
- Leitura: Exercise (Instructions): Setting up Git
- Vidéo: Exercise (Video): Basic Git Commands
- Leitura: Exercise (Instructions): Basic Git Commands
- Vidéo: Exercise (Video): Online Git Repositories
- Leitura: Exercise (Instructions): Online Git Repositories
- Vidéo: Node.js and NPM
- Vidéo: Exercise (Video): Setting up Node.js and NPM
- Leitura: Exercise (Instructions): Setting up Node.js and NPM
- Vidéo: Exercise (Video): Basics of Node.js and NPM
- Leitura: Exercise (Instructions): Basics of Node.js and NPM
- Leitura: Setting up your Development Environment: Git and Node: Additional Resources
- Leitura: Introduction to React: Objectives and Outcomes
- Vidéo: Front-end JavaScript Frameworks and Libraries Overview
- Vidéo: Introduction to React
- Vidéo: Exercise (Video): Getting Started with React
- Leitura: Exercise (Instructions): Getting Started with React
- Vidéo: React App Overview
- Vidéo: Introduction to JSX
- Vidéo: Exercise (Video): Configuring your React Application
- Leitura: Exercise (Instructions): Configuring your React Application
- Leitura: Introduction to React: Additional Resources
- Leitura: React Components: Objectives and Outcomes
- Vidéo: React Components
- Vidéo: Exercise (Video): React Components Part 1
- Leitura: Exercise (Instructions): React Components Part 1
- Vidéo: React Components: State and Props
- Vidéo: Exercise (Video): React Components Part 2
- Leitura: Exercise (Instructions): React Components Part 2
- Vidéo: React Components: Lifecycle Methods Part 1
- Leitura: React Components: Additional Resources
- Vidéo: Assignment 1 Requirements (Video): React Components
- Leitura: Assignment 1: React Components: Additional Resources
- Leitura: Ideation: Objectives and Outcomes
- Leitura: Ideation Report Template
- Leitura: Ideation: Additional Resources
Noté: React Components
Noté: Ideation
SEMAINE 2
React Router and Single Page Applications
In this week, you will learn about various component types. You will learn about React router and its use in designing single page applications. You will also learn about single page applications and use React Router to design single page applications.
14 vidéos, 16 lectures
- Leitura: React Component Types: Objectives and Outcomes
- Vidéo: Exercise (Video): Presentational and Container Components
- Leitura: Exercise (Instructions): Presentational and Container Components
- Vidéo: React Components: Lifecycle Methods Part 2
- Vidéo: Functional Components
- Vidéo: Exercise (Video): Functional Components
- Leitura: Exercise (Instructions): Functional Components
- Leitura: React Component Types: Additional Resources
- Leitura: React Router: Objectives and Outcomes
- Vidéo: React Virtual DOM
- Vidéo: Exercise (Video): Header and Footer
- Leitura: Exercise (Instructions): Header and Footer
- Vidéo: React Router
- Vidéo: Exercise (Video): React Router
- Leitura: Exercise (Instructions): React Router
- Leitura: React Router: Additional Resources
- Leitura: Single Page Applications: Objectives and Outcomes
- Vidéo: Single Page Applications
- Vidéo: Exercise (Video): Single Page Applications Part 1
- Leitura: Exercise (Instructions): Single Page Applications Part 1
- Vidéo: React Router: Parameters
- Vidéo: Exercise (Video): Single Page Applications Part 2
- Leitura: Exercise (Instructions): Single Page Applications Part 2
- Leitura: Single Page Applications: Additional Resources
- Vidéo: Assignment 2: React Router and Single Page Applications
- Leitura: Assignment 2: React Router and Single Page Applications: Additional Resources
- Leitura: UI Design and Prototyping: Objectives and Outcomes
- Leitura: UI Design and Prototyping Report Template
- Leitura: UI Design and Prototyping: Additional Resources
Noté: React Router and Single Page Applications
Noté: UI Design and Prototyping
SEMAINE 3
React Forms, Flow Architecture and Introduction to Redux
In this module you will be introduced to uncontrolled and controlled forms and briefly examine form validation in React applications. You will get an overview of the Flux architecture and introduced to Redux as a way of realizing the flux architecture
13 vidéos, 15 lectures
- Leitura: Controlled Forms: Objectives and Oute
- Vidéo: Exercise (Video): Controlled Forms
- Leitura: Exercise (Instructions): Controlled Forms
- Vidéo: Exercise (Video): Controlled Form Validation
- Leitura: Exercise (Instructions): Controlled Form Validation
- Leitura: Controlled Forms: Additional Resources
- Leitura: Uncontrolled Forms: Objectives and Outcomes
- Vidéo: Uncontrolled Components
- Vidéo: Exercise (Video): Uncontrolled Forms
- Leitura: Exercise (Instructions): Uncontrolled Forms
- Leitura: Uncontrolled Forms: Additional Resources
- Leitura: Introduction to Redux: Objectives and Outcomes
- Vidéo: The Model-View-Controller Framework
- Vidéo: The Flux Architecture
- Vidéo: Introduction to Redux
- Vidéo: Exercise (Video): Introduction to Redux
- Leitura: Exercise (Instructions): Introduction to Redux
- Leitura: Introduction to Redux: Additional Resources
- Leitura: React Redux Form: Objectives and Outcomes
- Vidéo: React Redux Forms
- Vidéo: Exercise (Video): React Redux Form
- Leitura: Exercise (Instructions): React Redux Form
- Vidéo: Exercise (Video): React Redux Form Validation
- Leitura: Exercise (Instructions): React Redux Form Validation
- Leitura: React Redux Form: Additional Resources
- Vidéo: Assignment 3: React Forms and Redux
- Leitura: Assignment 3: React Forms and Redux: Additional Resources
Noté: React Forms and Redux
SEMAINE 4
More Redux and Client-Server Communication
In this module you will explore Redux further including Redux action, combining reducers, and Redux thunk, client-server communication using Fetch and the REST API. You will get a brief introduction to animation in React. You will also learn about testing, building and deploying React applications.
20 vidéos, 26 lectures
- Leitura: Redux Actions: Objectives and Outcomes
- Vidéo: Exercise (Video): Combining Reducers
- Leitura: Exercise (Instructions): Combining Reducers
- Vidéo: Exercise (Video): Redux Actions
- Leitura: Exercise (Instructions): Redux Actions
- Leitura: Redux Actions: Additional Resources
- Leitura: Redux Thunk: Objectives and Outcomes
- Vidéo: Redux Thunk
- Vidéo: Exercise (Video): Redux Thunk
- Leitura: Exercise (Instructions): Redux Thunk
- Vidéo: Exercise (Video): React-Redux-Form Revisited
- Leitura: Exercise (Instructions): React-Redux-Form Revisited
- Leitura: Redux Thunk: Additional Resources
- Leitura: Client-Server Communication: Objectives and Outcomes
- Vidéo: Networking Essentials
- Vidéo: Brief Representational State Transfer (REST)
- Vidéo: Exercise (Video): Setting up a Server using json-server
- Leitura: Exercise (Instructions): Setting up a Server using json-server
- Leitura: Client-Server Communication: Additional Resources
- Leitura: Fetch: Objectives and Outcomes
- Vidéo: Promises
- Vidéo: Fetch
- Vidéo: Exercise (Video): Fetch from Server
- Leitura: Exercise (Instructions): Fetch from Server
- Vidéo: Exercise (Video): Fetch Handling Errors
- Leitura: Exercise (Instructions): Fetch Handling Errors
- Vidéo: Exercise (Video): Fetch Post Comment
- Leitura: Exercise (Instructions): Fetch Post Comment
- Leitura: Fetch: Additional Resources
- Leitura: React Animations: Objectives and Outcomes
- Vidéo: React Animations
- Vidéo: Exercise (Video): React Animations
- Leitura: Exercise (Instructions): React Animations
- Vidéo: Exercise (Video): React Animation Components
- Leitura: Exercise (Instructions): React Animation Components
- Leitura: React Animations: Additional Resources
- Vidéo: Assignment 4: Redux, Client-Server Communication and Fetch
- Leitura: Assignment 4: Redux, Client-Server Communication and Fetch: Additional Resources
- Leitura: Building and Deployment: Objectives and Outcomes
- Vidéo: Introduction to Webpack
- Vidéo: Exercise (Video): Building and Deploying the React Application
- Leitura: Exercise (Instructions): Building and Deploying the React Application
- Leitura: Building and Deployment: Additional Resources
- Leitura: Project Implementation: Objectives and Outcomes
- Leitura: Final Report Template
Noté: Redux, Client-Server Communication and Fetch
Noté: Project Implementation and Final Report
FAQ
Comment cela fonctionne
Trabalho
Cada curso é como um livro didático interativo, com vídeos pré-gravados, testes e projetos.
Ajuda dos seus colegas
Conecte-se com milhares de outros aprendizes, debata ideias, discuta sobre os materiais do curso e obtenha ajuda para dominar conceitos.
Certificados
Obtenha reconhecimento oficial pelo seu trabalho e compartilhe seu sucesso com amigos, colegas e empregadores.
Créateurs
The Hong Kong University of Science and Technology
HKUST - A dynamic, international research university, in relentless pursuit of excellence, leading the advance of science and technology, and educating the new generation of front-runners for Asia and the world.
Tarification
| Acheter le cours | |
|---|---|
| Accéder au contenu du cours | Disponible |
| Accéder au contenu noté | Disponible |
| Recevoir une Note Finale | Disponible |
| Obtenir un Certificat de Cours partageable | Disponible |
Notation et examens
This course provides a solid foundation for learning how to develop web applications with React. Lectures are very clear and easy to follow. I recommend to any developer looking to learn React at the beginner level. Good introduction to ES6 as well if you're still using the old syntax.
Totally worth it just because of the teacher!
This course really up my skill!
Coursera propose un accès universel à la meilleure formation au monde,
en partenariat avec des universités et des organisations du plus haut niveau, pour proposer des cours en ligne.
© 2018 Coursera Inc. Tous droits réservés.
Really enjoyed the topics and assignment organized in this lesson and I recommend the same with others.