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
Ce cours fait partie de la Spécialisation Full-Stack Web Development with React
Front-End Web Development with React
proposé par
Spécialisation Full-Stack Web Development with ReactUniversité des sciences et technologies de Hong Kong
Programme du cours : ce que vous apprendrez dans ce cours
Semaine
112 heures pour terminer
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 (Total 234 min), 23 lectures, 2 quiz
21 vidéos
How to Use the Learning Resources10 min
What is Full-Stack Web Development?5 min
Exercise (Video): Setting up Git6 min
Exercise (Video): Basic Git Commands18 min
Exercise (Video): Online Git Repositories12 min
Node.js and NPM3 min
Exercise (Video): Setting up Node.js and NPM2 min
Exercise (Video): Basics of Node.js and NPM23 min
Front-end JavaScript Frameworks and Libraries Overview12 min
Introduction to React8 min
Exercise (Video): Getting Started with React9 min
React App Overview16 min
Introduction to JSX5 min
Exercise (Video): Configuring your React Application9 min
React Components3 min
Exercise (Video): React Components Part 124 min
React Components: State and Props9 min
Exercise (Video): React Components Part 222 min
React Components: Lifecycle Methods Part 114 min
Assignment 1 Requirements (Video): React Components5 min
23 lectures
Welcome to Front-End Web Development with React: Additional Resources10 min
Full-Stack Web Development: The Big Picture: Objectives and Outcomes10 min
Full Stack Web Development: Additional Resources10 min
Setting up Your Development Environment: Git and Node: Objectives and Outcomes10 min
Setting up your Development Environment10 min
Exercise (Instructions): Setting up Git10 min
Exercise (Instructions): Basic Git Commands10 min
Exercise (Instructions): Online Git Repositories10 min
Exercise (Instructions): Setting up Node.js and NPM10 min
Exercise (Instructions): Basics of Node.js and NPM10 min
Setting up your Development Environment: Git and Node: Additional Resources10 min
Introduction to React: Objectives and Outcomes10 min
Exercise (Instructions): Getting Started with React10 min
Exercise (Instructions): Configuring your React Application10 min
Introduction to React: Additional Resources10 min
React Components: Objectives and Outcomes10 min
Exercise (Instructions): React Components Part 110 min
Exercise (Instructions): React Components Part 210 min
React Components: Additional Resources10 min
Assignment 1: React Components: Additional Resources10 min
Ideation: Objectives and Outcomes10 min
Ideation Report Template10 min
Ideation: Additional Resources10 min
Semaine
210 heures pour terminer
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 (Total 191 min), 16 lectures, 2 quiz
14 vidéos
Exercise (Video): Presentational and Container Components21 min
React Components: Lifecycle Methods Part 28 min
Functional Components3 min
Exercise (Video): Functional Components14 min
React Virtual DOM6 min
Exercise (Video): Header and Footer17 min
React Router8 min
Exercise (Video): React Router36 min
Single Page Applications9 min
Exercise (Video): Single Page Applications Part 123 min
React Router: Parameters6 min
Exercise (Video): Single Page Applications Part 223 min
Assignment 2: React Router and Single Page Applications4 min
16 lectures
React Component Types: Objectives and Outcomes10 min
Exercise (Instructions): Presentational and Container Components10 min
Exercise (Instructions): Functional Components10 min
React Component Types: Additional Resources10 min
React Router: Objectives and Outcomes10 min
Exercise (Instructions): Header and Footer10 min
Exercise (Instructions): React Router10 min
React Router: Additional Resources10 min
Single Page Applications: Objectives and Outcomes10 min
Exercise (Instructions): Single Page Applications Part 110 min
Exercise (Instructions): Single Page Applications Part 210 min
Single Page Applications: Additional Resources10 min
Assignment 2: React Router and Single Page Applications: Additional Resources10 min
UI Design and Prototyping: Objectives and Outcomes10 min
UI Design and Prototyping Report Template10 min
UI Design and Prototyping: Additional Resources10 min
Semaine
38 heures pour terminer
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 (Total 188 min), 15 lectures, 1 quiz
13 vidéos
Controlled Forms5 min
Exercise (Video): Controlled Forms35 min
Exercise (Video): Controlled Form Validation23 min
Uncontrolled Components2 min
Exercise (Video): Uncontrolled Forms17 min
The Model-View-Controller Framework7 min
The Flux Architecture11 min
Introduction to Redux20 min
Exercise (Video): Introduction to Redux23 min
React Redux Forms4 min
Exercise (Video): React Redux Form13 min
Exercise (Video): React Redux Form Validation15 min
Assignment 3: React Forms and Redux5 min
15 lectures
Controlled Forms: Objectives and Oute10 min
Exercise (Instructions): Controlled Forms10 min
Exercise (Instructions): Controlled Form Validation10 min
Controlled Forms: Additional Resources10 min
Uncontrolled Forms: Objectives and Outcomes10 min
Exercise (Instructions): Uncontrolled Forms10 min
Uncontrolled Forms: Additional Resources10 min
Introduction to Redux: Objectives and Outcomes10 min
Exercise (Instructions): Introduction to Redux10 min
Introduction to Redux: Additional Resources10 min
React Redux Form: Objectives and Outcomes10 min
Exercise (Instructions): React Redux Form10 min
Exercise (Instructions): React Redux Form Validation10 min
React Redux Form: Additional Resources10 min
Assignment 3: React Forms and Redux: Additional Resources10 min
Semaine
414 heures pour terminer
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 (Total 312 min), 26 lectures, 2 quiz
20 vidéos
Redux Actions8 min
Exercise (Video): Combining Reducers9 min
Exercise (Video): Redux Actions24 min
Redux Thunk10 min
Exercise (Video): Redux Thunk50 min
Exercise (Video): React-Redux-Form Revisited12 min
Networking Essentials17 min
Brief Representational State Transfer (REST)16 min
Exercise (Video): Setting up a Server using json-server6 min
Promises10 min
Fetch20 min
Exercise (Video): Fetch from Server33 min
Exercise (Video): Fetch Handling Errors15 min
Exercise (Video): Fetch Post Comment18 min
React Animations13 min
Exercise (Video): React Animations9 min
Exercise (Video): React Animation Components9 min
Assignment 4: Redux, Client-Server Communication and Fetch4 min
Introduction to Webpack7 min
Exercise (Video): Building and Deploying the React Application11 min
26 lectures
Redux Actions: Objectives and Outcomes10 min
Exercise (Instructions): Combining Reducers10 min
Exercise (Instructions): Redux Actions10 min
Redux Actions: Additional Resources10 min
Redux Thunk: Objectives and Outcomes10 min
Exercise (Instructions): Redux Thunk10 min
Exercise (Instructions): React-Redux-Form Revisited10 min
Redux Thunk: Additional Resources10 min
Client-Server Communication: Objectives and Outcomes10 min
Exercise (Instructions): Setting up a Server using json-server10 min
Client-Server Communication: Additional Resources10 min
Fetch: Objectives and Outcomes10 min
Exercise (Instructions): Fetch from Server10 min
Exercise (Instructions): Fetch Handling Errors10 min
Exercise (Instructions): Fetch Post Comment10 min
Fetch: Additional Resources10 min
React Animations: Objectives and Outcomes10 min
Exercise (Instructions): React Animations10 min
Exercise (Instructions): React Animation Components10 min
React Animations: Additional Resources10 min
Assignment 4: Redux, Client-Server Communication and Fetch: Additional Resources10 min
Building and Deployment: Objectives and Outcomes10 min
Exercise (Instructions): Building and Deploying the React Application10 min
Building and Deployment: Additional Resources10 min
Project Implementation: Objectives and Outcomes10 min
Final Report Template10 min
4.7
89 avis38%
a commencé une nouvelle carrière après avoir terminé ces cours
50%
a bénéficié d'un avantage concret dans sa carrière grâce à ce cours
50%
a obtenu une augmentation de salaire ou une promotion
Meilleurs avis
Instructor Jogesh is really good and I feed the course pace is set absolutely perfect for online learning quickly and easily.\n\nThank you sir,\n\nBest Regards,\n\nKishore Buridi
This was just the right amount of "taking me by the hand" for my level. The emphasis on building a site and hands-on experience is how I prefer to learn. Thanks!
Enseignant
Jogesh K. Muppala
Associate ProfessorDepartment of Computer Science and Engineering
À propos de Université des sciences et technologies de Hong Kong
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.
À propos de la Spécialisation Full-Stack Web Development with React
Learn front-end and hybrid mobile development, with server-side support, for implementing a multi-platform solution.
The first two courses in this Specialization cover front-end frameworks: Bootstrap 4 and React. You’ll also learn to create hybrid mobile applications, using React Native. On the server side, you’ll learn to implement NoSQL databases using MongoDB, work within a Node.js environment and Express framework, and communicate to the client side through a RESTful API. Learners enrolling in this Specialization are expected to have prior working knowledge of HTML, CSS and JavaScript.
Ideally learners should complete the courses in the specified sequence. It is strongly recommended that the React course be completed before proceeding with the React Native course.
Foire Aux Questions
Quand aurai-je accès aux vidéos de cours et aux devoirs ?
Une fois que vous êtes inscrit(e) pour un Certificat, vous pouvez accéder à toutes les vidéos de cours, et à tous les quiz et exercices de programmation (le cas échéant). Vous pouvez soumettre des devoirs à examiner par vos pairs et en examiner vous-même uniquement après le début de votre session. Si vous préférez explorer le cours sans l'acheter, vous ne serez peut-être pas en mesure d'accéder à certains devoirs.
À quoi ai-je droit si je m'abonne à cette Spécialisation ?
Lorsque vous vous inscrivez au cours, vous bénéficiez d'un accès à tous les cours de la Spécialisation, et vous obtenez un Certificat lorsque vous avez réussi. Votre Certificat électronique est alors ajouté à votre page Accomplissements. À partir de cette page, vous pouvez imprimer votre Certificat ou l'ajouter à votre profil LinkedIn. Si vous souhaitez seulement lire et visualiser le contenu du cours, vous pouvez accéder gratuitement au cours en tant qu'auditeur libre.
Quelle est la politique de remboursement ?
Une aide financière est-elle possible ?
D'autres questions ? Visitez le Centre d'Aide pour les Etudiants.
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.
© 2019 Coursera Inc. Tous droits réservés.
