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
Welcome to Front-End Web Development with React
Loading...
Del curso dictado por The Hong Kong University of Science and Technology
Front-End Web Development with React
106 calificaciones
The Hong Kong University of Science and Technology
106 calificaciones
Curso 2 de 4 en SpecializationFull-Stack Web Development with React
De la lección
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.
Conoce a los instructores
Jogesh K. MuppalaAssociate Professor
Department of Computer Science and Engineering
Welcome to Front-End Web Development with React.
This is the second course in the specialization on Full Stack Web Development with React.
We have already covered Bootstrap 4,
in the first course of this specialization.
In this course, we will concentrate on learning about
the React library and also Redux for structuring our web application.
I hope you have fun learning all the topics that we cover in this course.
Before you get started on this course,
let me make sure that you have sufficient background to be
able to learn the topics covered in this course.
I expect that you will have a very good working knowledge of HTML and CSS.
Also, I will expect that you would have a very good working knowledge of
JavaScript and be able to write JavaScript programs and applications.
Now, specifically, at least,
you should be familiar with ES5 version of JavaScript.
Now, in this course itself,
we will make use of the ES2015 or the ES6 version of JavaScript.
We will use some of the new features that have been introduced in
the ES6 version of JavaScript including arrow functions and classes.
Now, if you are not familiar with these,
then you can learn these concepts along the way,
as we do the exercises in this course.
Now, I will leave with the message saying your mileage may vary.
Now, depending upon how dedicated you are,
you could easily pick up these new concepts of ES6 as we go through this course.
If not, I will urge you to quickly brush up on your knowledge on ES6,
especially, the new features of ES6 before proceeding ahead with this course.
Now, also, we will be extensively using Bootstrap
as a way of styling the views in our react application.
So, I will prefer that you would have completed the first course
on Front- End Web UI Frameworks and tools, Bootstrap 4.
Which is the first course in this specialization
before you proceed ahead with this course.
Also, at the outset,
let me clarify my view of Web design and development.
Now, I view Web Design and Web development as
two separate parts of the entire Web landscape.
The design aspect, concentrates on
the user interface or the user experience design, the visual design,
the prototyping, the colors, graphics,
and animation aspect of web application development.
Now, in this course,
we are concentrating more on the development building and deployment of web applications.
In particular, we are concentrating on hard skills,
like the use of the JavaScript for developing our web application.
So, in the first course in the specialization,
we covered Bootstrap 4.
In this course, we will look at React.
In the next course, we will look at React Native,
as a way of developing mobile applications,
and then the final course,
we'll look at Server- side Development using Node Express and MongoDB.
Now, in this course, as I emphasized,
we are concentrating more on building up our hard web development skills.
So design aspect is not something that we are concentrating in this specialization.
So, if you are approaching this course with the design aspect and view,
then this course may not be suited for you.
Instead, we are looking at developing
hardcore JavaScript skills for developing React applications.
Also, in this context,
you may be wondering about Full Stack Web Development.
If you have taken the previous course in the specialization,
I've already introduced you to Full Stack Web Development.
If not, the very first lecture in
this course will introduce you to Full Stack Web development.
In this course, specifically,
we are looking at
the JavaScript framework library approach for developing web application.
In particular, we are looking at React.
Now, we will also look at React Native,
for mobile application development at the next course.
Then, we'll look at the Server side development including Business Logic Layer,
and then the Data Layer,
in the last course of this specialization.
Again, to emphasize, this course concentrates
on the React library and the React ecosystem.
We will introduce you to React and
look at the various aspects of developing a React application.
We'll also introduce you to React strap,
as a way of styling the views in your React components.
We will look at the use of Redux as a way of structuring
the architecture of your React plus Redux application,
and we'll look at the use of Fetch for
interacting with the server side from our React application.
So, these are the basic topics that will be covered in this course.
Let's look at the detailed structure.
This course itself is organized into four modules.
Each module, typically, corresponding to one week of work.
Now, let that not be a constraint on your ability to learn.
If you need more time,
than a week, for covering the topics in each module,
then by all means please take sufficient time to understand the concepts
and also understand the technology that we cover in each of the lectures.
Don't be in a hurry to complete the materials by the deadline for the assignments.
If you are unable to finish within this session,
you are most welcome to move to the next session of this course.
This course will be repeated every 15 days and a new session will start every 15 days.
So, when you move to a new session,
all the work that you have completed in the current session will be
automatically carried over to the next session.
Now, with that in mind,
let me cover what each module covers in this course.
The first module will introduce you to Full Stack Web Development.
The big picture view of Full Stack Web development.
If you don't know Git and Node,
then we will have a quick introduction to both Git and Node in this course.
If you have already done this as part of the first course of the specialization,
then you can skip over that lesson.
Then, we will introduce you to the React,
and we will explain how you can set up a React application using Create React App.
Then, we'll look at React Components,
how we can develop React Components,
and that should take you all the way to the very first assignment.
The second module concentrates on the React Router and Single Page Applications.
We will introduce you to various kinds of
React Components and what role they play in your overall React Application.
We'll look at React Router,
as a way of navigating between various views in your React Application,
and then that will take you on to the Single Page Application concept.
We'll look at how we can develop Single Page Applications using React.
That should take you all the way to the second assignment of this course,
where we will cover the React Components,
the React Router, and Single Page Applications.
The third module in this course,
concentrates mainly on Forms,
as a way of user input.
We'll look at Controlled Components in React and how
Controlled Forms can be developed inside Controlled Components.
Then, we'll look at Uncontrolled Forms which are
hosted in Uncontrolled Components in a React Application.
Then, we will introduce you to Redux as a way of
structuring your React Application plus the architecture for your React application.
We'll briefly introduce you to Flux Architecture,
and we'll look at Redux as a variant of the Flux architecture,
and how you can structure your React plus Redux and application.
We'll then introduce you to React Redux Forms,
as a way of leveraging the presence
of Redux in your React application to persist your Form data.
That should take you all the way to the third assignment.
Where we will examine various kinds of React Forms and also briefly Redux.
The final module, we'll examine Redux in more detail.
We'll look at Redux actions,
how we can set up Redux actions to change the state of our Redux tool.
Again, I'm throwing a lot of ideas at you.
As you go through the course,
you will learn more about these.
Don't worry too much about
all these terminology that I'm introducing in this very first lesson.
We will examine each and every one of them in detail,
as we go through this course.
So, by the end of this course,
you should be completely familiar with
all these technologies and terminologies that we introduce here.
Then, we will go on to Redux Thunk.
Then, we'll look at Client Server Communication.
How will your React application communicate with its server that supports REST API.
We'll look at the use of Fetch as a way of communicating with the server.
We'll briefly look at React Animations.
Then we'll look at how we can build and deploy your React application to a server,
and look briefly at testing for your React application.
That should take you all the way to the final assignment.
I hope you have fun going through the various topics that we cover in this course,
and at the end of this course,
you would have a very good understanding of the react and redux ecosystem.
Once again, welcome to the Front- End Web Development using React.
Explora nuestro catálogo
Inscríbete de manera gratuita y obtén recomendaciones personalizadas, actualizaciones y ofertas.
Coursera brinda acceso universal a la mejor educación del mundo, al asociarse con las mejores universidades y organizaciones, para ofrecer cursos en línea.
© 2018 Coursera Inc. Todos los derechos reservados.
