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
Este curso faz parte do Programa de cursos integrados Full-Stack Web Development with React
Front-End Web Development with React
oferecido por
Programa de cursos integrados Full-Stack Web Development with ReactUniversidade de Ciência e Tecnologia de Hong Kong
Informações sobre o curso
164,127 visualizações recentes
Learner Career Outcomes
41%
comecei uma nova carreira após concluir estes cursos
45%
consegui um benefício significativo de carreira com este curso
31%
recebi um aumento ou promoção
Learner Career Outcomes
41%
comecei uma nova carreira após concluir estes cursos
45%
consegui um benefício significativo de carreira com este curso
31%
recebi um aumento ou promoção
100% on-line
Comece imediatamente e aprenda em seu próprio cronograma.
Prazos flexíveis
Redefinir os prazos de acordo com sua programação.
Nível intermediário
Aprox. 33 horas para completar
Sugerido: 4 weeks of study, 6-8 hours/week
Inglês
Legendas: Inglês
Programa - O que você aprenderá com este curso
Semana
112 horas para concluir
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 vídeos (Total 234 mín.), 23 leituras, 2 testes
21 videos
How to Use the Learning Resources10min
What is Full-Stack Web Development?5min
Exercise (Video): Setting up Git6min
Exercise (Video): Basic Git Commands18min
Exercise (Video): Online Git Repositories12min
Node.js and NPM3min
Exercise (Video): Setting up Node.js and NPM2min
Exercise (Video): Basics of Node.js and NPM23min
Front-end JavaScript Frameworks and Libraries Overview12min
Introduction to React8min
Exercise (Video): Getting Started with React9min
React App Overview16min
Introduction to JSX5min
Exercise (Video): Configuring your React Application9min
React Components3min
Exercise (Video): React Components Part 124min
React Components: State and Props9min
Exercise (Video): React Components Part 222min
React Components: Lifecycle Methods Part 114min
Assignment 1 Requirements (Video): React Components5min
23 leituras
Welcome to Front-End Web Development with React: Additional Resources10min
Full-Stack Web Development: The Big Picture: Objectives and Outcomes10min
Full Stack Web Development: Additional Resources10min
Setting up Your Development Environment: Git and Node: Objectives and Outcomes10min
Setting up your Development Environment10min
Exercise (Instructions): Setting up Git10min
Exercise (Instructions): Basic Git Commands10min
Exercise (Instructions): Online Git Repositories10min
Exercise (Instructions): Setting up Node.js and NPM10min
Exercise (Instructions): Basics of Node.js and NPM10min
Setting up your Development Environment: Git and Node: Additional Resources10min
Introduction to React: Objectives and Outcomes10min
Exercise (Instructions): Getting Started with React10min
Exercise (Instructions): Configuring your React Application10min
Introduction to React: Additional Resources10min
React Components: Objectives and Outcomes10min
Exercise (Instructions): React Components Part 110min
Exercise (Instructions): React Components Part 210min
React Components: Additional Resources10min
Assignment 1: React Components: Additional Resources10min
Ideation: Objectives and Outcomes10min
Ideation Report Template10min
Ideation: Additional Resources10min
Semana
210 horas para concluir
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 vídeos (Total 191 mín.), 16 leituras, 2 testes
14 videos
Exercise (Video): Presentational and Container Components21min
React Components: Lifecycle Methods Part 28min
Functional Components3min
Exercise (Video): Functional Components14min
React Virtual DOM6min
Exercise (Video): Header and Footer17min
React Router8min
Exercise (Video): React Router36min
Single Page Applications9min
Exercise (Video): Single Page Applications Part 123min
React Router: Parameters6min
Exercise (Video): Single Page Applications Part 223min
Assignment 2: React Router and Single Page Applications4min
16 leituras
React Component Types: Objectives and Outcomes10min
Exercise (Instructions): Presentational and Container Components10min
Exercise (Instructions): Functional Components10min
React Component Types: Additional Resources10min
React Router: Objectives and Outcomes10min
Exercise (Instructions): Header and Footer10min
Exercise (Instructions): React Router10min
React Router: Additional Resources10min
Single Page Applications: Objectives and Outcomes10min
Exercise (Instructions): Single Page Applications Part 110min
Exercise (Instructions): Single Page Applications Part 210min
Single Page Applications: Additional Resources10min
Assignment 2: React Router and Single Page Applications: Additional Resources10min
UI Design and Prototyping: Objectives and Outcomes10min
UI Design and Prototyping Report Template10min
UI Design and Prototyping: Additional Resources10min
Semana
38 horas para concluir
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 vídeos (Total 188 mín.), 15 leituras, 1 teste
13 videos
Controlled Forms5min
Exercise (Video): Controlled Forms35min
Exercise (Video): Controlled Form Validation23min
Uncontrolled Components2min
Exercise (Video): Uncontrolled Forms17min
The Model-View-Controller Framework7min
The Flux Architecture11min
Introduction to Redux20min
Exercise (Video): Introduction to Redux23min
React Redux Forms4min
Exercise (Video): React Redux Form13min
Exercise (Video): React Redux Form Validation15min
Assignment 3: React Forms and Redux5min
15 leituras
Controlled Forms: Objectives and Oute10min
Exercise (Instructions): Controlled Forms10min
Exercise (Instructions): Controlled Form Validation10min
Controlled Forms: Additional Resources10min
Uncontrolled Forms: Objectives and Outcomes10min
Exercise (Instructions): Uncontrolled Forms10min
Uncontrolled Forms: Additional Resources10min
Introduction to Redux: Objectives and Outcomes10min
Exercise (Instructions): Introduction to Redux10min
Introduction to Redux: Additional Resources10min
React Redux Form: Objectives and Outcomes10min
Exercise (Instructions): React Redux Form10min
Exercise (Instructions): React Redux Form Validation10min
React Redux Form: Additional Resources10min
Assignment 3: React Forms and Redux: Additional Resources10min
Semana
414 horas para concluir
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 vídeos (Total 312 mín.), 26 leituras, 2 testes
20 videos
Redux Actions8min
Exercise (Video): Combining Reducers9min
Exercise (Video): Redux Actions24min
Redux Thunk10min
Exercise (Video): Redux Thunk50min
Exercise (Video): React-Redux-Form Revisited12min
Networking Essentials17min
Brief Representational State Transfer (REST)16min
Exercise (Video): Setting up a Server using json-server6min
Promises10min
Fetch20min
Exercise (Video): Fetch from Server33min
Exercise (Video): Fetch Handling Errors15min
Exercise (Video): Fetch Post Comment18min
React Animations13min
Exercise (Video): React Animations9min
Exercise (Video): React Animation Components9min
Assignment 4: Redux, Client-Server Communication and Fetch4min
Introduction to Webpack7min
Exercise (Video): Building and Deploying the React Application11min
26 leituras
Redux Actions: Objectives and Outcomes10min
Exercise (Instructions): Combining Reducers10min
Exercise (Instructions): Redux Actions10min
Redux Actions: Additional Resources10min
Redux Thunk: Objectives and Outcomes10min
Exercise (Instructions): Redux Thunk10min
Exercise (Instructions): React-Redux-Form Revisited10min
Redux Thunk: Additional Resources10min
Client-Server Communication: Objectives and Outcomes10min
Exercise (Instructions): Setting up a Server using json-server10min
Client-Server Communication: Additional Resources10min
Fetch: Objectives and Outcomes10min
Exercise (Instructions): Fetch from Server10min
Exercise (Instructions): Fetch Handling Errors10min
Exercise (Instructions): Fetch Post Comment10min
Fetch: Additional Resources10min
React Animations: Objectives and Outcomes10min
Exercise (Instructions): React Animations10min
Exercise (Instructions): React Animation Components10min
React Animations: Additional Resources10min
Assignment 4: Redux, Client-Server Communication and Fetch: Additional Resources10min
Building and Deployment: Objectives and Outcomes10min
Exercise (Instructions): Building and Deploying the React Application10min
Building and Deployment: Additional Resources10min
Project Implementation: Objectives and Outcomes10min
Final Report Template10min
Principais avaliações do Front-End Web Development with React
The course was very helpful for me I learnt many new things in react world through this course. The instructor teached the course very well and covered all the content nicely. Thanks coursera
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
Instrutores
Jogesh K. Muppala
Associate ProfessorDepartment of Computer Science and Engineering
Sobre Universidade de Ciência e Tecnologia 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.
Sobre Programa de cursos integrados 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.
Perguntas Frequentes – FAQ
Quando terei acesso às palestras e às tarefas?
Ao se inscrever para um Certificado, você terá acesso a todos os vídeos, testes e tarefas de programação (se aplicável). Tarefas avaliadas pelos colegas apenas podem ser enviadas e avaliadas após o início da sessão. Caso escolha explorar o curso sem adquiri-lo, talvez você não consiga acessar certas tarefas.
O que recebo ao me inscrever nesta Especialização?
Quando você se inscreve no curso, tem acesso a todos os cursos na Especialização e pode obter um certificado quando concluir o trabalho. Seu Certificado eletrônico será adicionado à sua página de Participações e você poderá imprimi-lo ou adicioná-lo ao seu perfil no LinkedIn. Se quiser apenas ler e assistir o conteúdo do curso, você poderá frequentá-lo como ouvinte sem custo.
Qual é a política de reembolso?
Existe algum auxílio financeiro disponível?
Mais dúvidas? Visite o Central de Ajuda ao Aprendiz.
O Coursera proporciona acesso universal à melhor educação do mundo,
fazendo parcerias com as melhores universidades e organizações para oferecer cursos on-line.
© 2020 Coursera Inc. Todos os direitos reservados.
