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
本課程是 Full-Stack Web Development with React 專項課程 專項課程的一部分
Front-End Web Development with React
提供方
課程信息
146,105 次近期查看
學習Course的學生是
- Software Engineers
- Chief Technology Officers (CTOs)
- Machine Learning Engineers
- Designers
- Traders
教學大綱 - 您將從這門課程中學到什麼
週
1完成時間為 12 小時
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 個視頻 （總計 234 分鐘）, 23 個閱讀材料, 2 個測驗
21 個視頻
How to Use the Learning Resources10分鐘
What is Full-Stack Web Development?5分鐘
Exercise (Video): Setting up Git6分鐘
Exercise (Video): Basic Git Commands18分鐘
Exercise (Video): Online Git Repositories12分鐘
Node.js and NPM3分鐘
Exercise (Video): Setting up Node.js and NPM2分鐘
Exercise (Video): Basics of Node.js and NPM23分鐘
Front-end JavaScript Frameworks and Libraries Overview12分鐘
Introduction to React8分鐘
Exercise (Video): Getting Started with React9分鐘
React App Overview16分鐘
Introduction to JSX5分鐘
Exercise (Video): Configuring your React Application9分鐘
React Components3分鐘
Exercise (Video): React Components Part 124分鐘
React Components: State and Props9分鐘
Exercise (Video): React Components Part 222分鐘
React Components: Lifecycle Methods Part 114分鐘
Assignment 1 Requirements (Video): React Components5分鐘
23 個閱讀材料
Welcome to Front-End Web Development with React: Additional Resources10分鐘
Full-Stack Web Development: The Big Picture: Objectives and Outcomes10分鐘
Full Stack Web Development: Additional Resources10分鐘
Setting up Your Development Environment: Git and Node: Objectives and Outcomes10分鐘
Setting up your Development Environment10分鐘
Exercise (Instructions): Setting up Git10分鐘
Exercise (Instructions): Basic Git Commands10分鐘
Exercise (Instructions): Online Git Repositories10分鐘
Exercise (Instructions): Setting up Node.js and NPM10分鐘
Exercise (Instructions): Basics of Node.js and NPM10分鐘
Setting up your Development Environment: Git and Node: Additional Resources10分鐘
Introduction to React: Objectives and Outcomes10分鐘
Exercise (Instructions): Getting Started with React10分鐘
Exercise (Instructions): Configuring your React Application10分鐘
Introduction to React: Additional Resources10分鐘
React Components: Objectives and Outcomes10分鐘
Exercise (Instructions): React Components Part 110分鐘
Exercise (Instructions): React Components Part 210分鐘
React Components: Additional Resources10分鐘
Assignment 1: React Components: Additional Resources10分鐘
Ideation: Objectives and Outcomes10分鐘
Ideation Report Template10分鐘
Ideation: Additional Resources10分鐘
週
2完成時間為 10 小時
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 個視頻 （總計 191 分鐘）, 16 個閱讀材料, 2 個測驗
14 個視頻
Exercise (Video): Presentational and Container Components21分鐘
React Components: Lifecycle Methods Part 28分鐘
Functional Components3分鐘
Exercise (Video): Functional Components14分鐘
React Virtual DOM6分鐘
Exercise (Video): Header and Footer17分鐘
React Router8分鐘
Exercise (Video): React Router36分鐘
Single Page Applications9分鐘
Exercise (Video): Single Page Applications Part 123分鐘
React Router: Parameters6分鐘
Exercise (Video): Single Page Applications Part 223分鐘
Assignment 2: React Router and Single Page Applications4分鐘
16 個閱讀材料
React Component Types: Objectives and Outcomes10分鐘
Exercise (Instructions): Presentational and Container Components10分鐘
Exercise (Instructions): Functional Components10分鐘
React Component Types: Additional Resources10分鐘
React Router: Objectives and Outcomes10分鐘
Exercise (Instructions): Header and Footer10分鐘
Exercise (Instructions): React Router10分鐘
React Router: Additional Resources10分鐘
Single Page Applications: Objectives and Outcomes10分鐘
Exercise (Instructions): Single Page Applications Part 110分鐘
Exercise (Instructions): Single Page Applications Part 210分鐘
Single Page Applications: Additional Resources10分鐘
Assignment 2: React Router and Single Page Applications: Additional Resources10分鐘
UI Design and Prototyping: Objectives and Outcomes10分鐘
UI Design and Prototyping Report Template10分鐘
UI Design and Prototyping: Additional Resources10分鐘
週
3完成時間為 8 小時
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 個視頻 （總計 188 分鐘）, 15 個閱讀材料, 1 個測驗
13 個視頻
Exercise (Video): Controlled Forms35分鐘
Exercise (Video): Controlled Form Validation23分鐘
Uncontrolled Components2分鐘
Exercise (Video): Uncontrolled Forms17分鐘
The Model-View-Controller Framework7分鐘
The Flux Architecture11分鐘
Introduction to Redux20分鐘
Exercise (Video): Introduction to Redux23分鐘
React Redux Forms4分鐘
Exercise (Video): React Redux Form13分鐘
Exercise (Video): React Redux Form Validation15分鐘
Assignment 3: React Forms and Redux5分鐘
15 個閱讀材料
Controlled Forms: Objectives and Oute10分鐘
Exercise (Instructions): Controlled Forms10分鐘
Exercise (Instructions): Controlled Form Validation10分鐘
Controlled Forms: Additional Resources10分鐘
Uncontrolled Forms: Objectives and Outcomes10分鐘
Exercise (Instructions): Uncontrolled Forms10分鐘
Uncontrolled Forms: Additional Resources10分鐘
Introduction to Redux: Objectives and Outcomes10分鐘
Exercise (Instructions): Introduction to Redux10分鐘
Introduction to Redux: Additional Resources10分鐘
React Redux Form: Objectives and Outcomes10分鐘
Exercise (Instructions): React Redux Form10分鐘
Exercise (Instructions): React Redux Form Validation10分鐘
React Redux Form: Additional Resources10分鐘
Assignment 3: React Forms and Redux: Additional Resources10分鐘
週
4完成時間為 14 小時
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 個視頻 （總計 312 分鐘）, 26 個閱讀材料, 2 個測驗
20 個視頻
Exercise (Video): Combining Reducers9分鐘
Exercise (Video): Redux Actions24分鐘
Redux Thunk10分鐘
Exercise (Video): Redux Thunk50分鐘
Exercise (Video): React-Redux-Form Revisited12分鐘
Networking Essentials17分鐘
Brief Representational State Transfer (REST)16分鐘
Exercise (Video): Setting up a Server using json-server6分鐘
Promises10分鐘
Fetch20分鐘
Exercise (Video): Fetch from Server33分鐘
Exercise (Video): Fetch Handling Errors15分鐘
Exercise (Video): Fetch Post Comment18分鐘
React Animations13分鐘
Exercise (Video): React Animations9分鐘
Exercise (Video): React Animation Components9分鐘
Assignment 4: Redux, Client-Server Communication and Fetch4分鐘
Introduction to Webpack7分鐘
Exercise (Video): Building and Deploying the React Application11分鐘
26 個閱讀材料
Redux Actions: Objectives and Outcomes10分鐘
Exercise (Instructions): Combining Reducers10分鐘
Exercise (Instructions): Redux Actions10分鐘
Redux Actions: Additional Resources10分鐘
Redux Thunk: Objectives and Outcomes10分鐘
Exercise (Instructions): Redux Thunk10分鐘
Exercise (Instructions): React-Redux-Form Revisited10分鐘
Redux Thunk: Additional Resources10分鐘
Client-Server Communication: Objectives and Outcomes10分鐘
Exercise (Instructions): Setting up a Server using json-server10分鐘
Client-Server Communication: Additional Resources10分鐘
Fetch: Objectives and Outcomes10分鐘
Exercise (Instructions): Fetch from Server10分鐘
Exercise (Instructions): Fetch Handling Errors10分鐘
Exercise (Instructions): Fetch Post Comment10分鐘
Fetch: Additional Resources10分鐘
React Animations: Objectives and Outcomes10分鐘
Exercise (Instructions): React Animations10分鐘
Exercise (Instructions): React Animation Components10分鐘
React Animations: Additional Resources10分鐘
Assignment 4: Redux, Client-Server Communication and Fetch: Additional Resources10分鐘
Building and Deployment: Objectives and Outcomes10分鐘
Exercise (Instructions): Building and Deploying the React Application10分鐘
Building and Deployment: Additional Resources10分鐘
Project Implementation: Objectives and Outcomes10分鐘
Final Report Template10分鐘
4.7
154 個審閱38%
完成這些課程後已開始新的職業生涯
43%
通過此課程獲得實實在在的工作福利
31%
加薪或升職
來自Front-End Web Development with React的熱門評論
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!
講師
Jogesh K. Muppala
Associate ProfessorDepartment of Computer Science and Engineering
關於 香港科技大学
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.
關於 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.
常見問題
我什么时候能够访问课程视频和作业？
注册以便获得证书后，您将有权访问所有视频、测验和编程作业（如果适用）。只有在您的班次开课之后，才可以提交和审阅同学互评作业。如果您选择在不购买的情况下浏览课程，可能无法访问某些作业。
我订阅此专项课程后会得到什么？
您注册课程后，将有权访问专项课程中的所有课程，并且会在完成课程后获得证书。您的电子课程证书将添加到您的成就页中，您可以通过该页打印您的课程证书或将其添加到您的领英档案中。如果您只想阅读和查看课程内容，可以免费旁听课程。
退款政策是如何规定的？
有助学金吗？
還有其他問題嗎？請訪問 學生幫助中心。
