Introduction to React

Loading...

From the course by The Hong Kong University of Science and Technology

Front-End Web Development with React

31 оценки

The Hong Kong University of Science and Technology

Front-End Web Development with React

31 оценки

Course 2 of 4 in the Specialization Full-Stack Web Development with React

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

From the lesson

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.

Front-end JavaScript Frameworks and Libraries Overview12:21

Introduction to React8:04

Exercise (Video): Getting Started with React9:21

React App Overview16:06

Introduction to JSX5:38

Exercise (Video): Configuring your React Application9:28

Meet the Instructors

Jogesh K. Muppala
Associate Professor
Department of Computer Science and Engineering

We ended the previous lecture with a question,

is React a library or is it a framework and what exactly is React?

Let's examine these questions in a bit more detail in this lecture.

Let's start out with the very first question.

What exactly is React and how is it different from

the other frameworks or libraries that we have mentioned in the previous lecture?

When you visit React website,

you see it clearly specified right on

the front page that React is a JavaScript library for building user interfaces.

Now again, depending on who you ask some people tend to

call React a library and others tend to call it a framework.

Now, let's not bother ourselves

too much in splitting our hairs over whether it is a framework,

or a library but let's concentrate more on what it actually helps us accomplish.

It is more important for us to understand that rather

than worrying about whether it is a framework or a library.

The React approach to implementing them applications is what we are after in this course.

So, React also states that it uses a declarative approach.

Now that leaves you in a confused state because we

saw that frameworks generally tend to use the declarative approach.

But in React, the declarative approach used by React

as specified on its website says that,

it makes it easy to create interactive UIs

with simple views for each state within your application.

And also React takes care of automatically updating the UI and then rendering

any changes to their specific components as required on your page.

You just heard me mentioning the term Component.

React Indeed is a component based approach.

In a Component based approach,

we encapsulate behaviors into small units called Components.

We will examine Components in more detail in the next lesson.

There it will become more clear to you how,

and why a component based approach is useful for

implementing our Web applications in React.

Furthermore, React makes no assumptions about

the entire technology stack that you're going to

use for implementing your Web applications.

React plays well with any technology stack that you can use behind the seats.

React itself concentrates only on the user interface side of the story,

and that leaves it up to the application designer to decide how they want to

implement the architecture and how they want

your application to interact with the back-end server.

So, as we go through this course,

we will examine one approach that we use for implementing

the entire technology stack which includes the Flux architecture approach,

and in specifically the use of Redux for implementing a state based storage for

our Web application and also the use of Fetch for interacting with our back-end server.

Again I've mentioned a few terms like Flux, Redux, and Fetch.

We will examine these towards the second half of this course.

It's obviously useful to examine the history behind the React approach.

So, to understand where React originated,

and how it came about to the state it is today.

React was first designed by Jordan Walke who was part of the Facebook team.

It was first deployed for Facebook's news feed around 2011.

Subsequently in 2013, React was open sourced at this JS conference.

React took off as an approach for implementing Web applications from then onwards.

React is designed for speed,

speed of implementing the application, simplicity, and scalability.

So, the three essence of React,

and why it has become so popular in the real value.

So, as we examine React more in this course,

you'll become more and more familiar with why

this approach is very suited for implementing Web applications.

As you enter the React world you will be bombarded with

a lot of vocabulary that is used in the React world.

So, you will hear people talking about One-way data

flow especially in the context of the Flux Architecture.

You will often hear people mentioning about JSX,

we will examine JSX in the very next lecture and understand

what role it plays in developing a React application.

We'll hear about Components which we will examine in

the next lesson and also in the second module of this course in more detail and

we'll here about the state and how

a React Component interacts with

the state of your application and the way you store the state of your application,

or do you store the state in a specific component.

We'll also hear about Props,

a way of passing data between the various components.

Also we'll hear about Virtual Dom,

and how is it different from Real DOM.

Why React manipulate the Virtual DOM,

and how the Virtual DOM eventually gets incorporated,

or rendered onto the Real DOM.

And Element, the React Element,

which is the smallest unit of building up a React application.

A component being a collection of React elements.

Then we hear about the Flux and Redux architectures in a bit more detail.

Again, as we go along this course we will examine

these concepts and these terminology in more detail.

Again, don't get overwhelmed with the vocabulary that you hear in the React world.

If you learn step by step,

you'll begin to pretty soon get a very good handle on all this vocabulary and

you can easily go ahead and impress people by throwing these words at them,

and trying to impress them or how much you know about React.

So, this is the jargon that you will end up learning also at the end of this course.

Enough of the jargon.

Let's go ahead and get our hands dirty by

starting to build a full fledged React application,

which will form part of all the exercises as you go through the rest of this course.

We will start with our first exercise where we'll install the create-react-app,

which we will use to scaffold out our very first React application in the first exercise,

and then we will start building upon this application throughout

the remaining exercises of this course.

Ознакомьтесь с нашим каталогом

Присоединяйтесь бесплатно и получайте персонализированные рекомендации, обновления и предложения.

Coursera делает лучшее в мире образование доступным каждому, предлагая онлайн-курсы от ведущих университетов и организаций.

© Coursera Inc., 2018 Все права защищены.

Загрузить из App Store

Загрузить в Google Play