Duration

Course Features

Lectures74

Duration
07:00:05

Skill Level
Beginner

Students
0

Language
English

CertificateYes

Share

Description

React is a JavaScript library for building user interfaces across a variety of platforms. React gives you a powerful mental model to work with and helps you build user inter- faces in a declarative and component-driven way.

Who this course for?

This course is for anyone who’s working on or interested in building user interfaces. Really, it’s is for anyone who’s curious about React, even if you don’t work in UI engineering. You’ll get the most out of this course if you have some experience with using JavaScript to build front-end applications.

Advantages of React:

The following list highlights some of the benefits of React versus other libraries and frameworks:

Simpler apps—React has a CBA with pure JavaScript; a declarative style; and pow- erful, developer-friendly DOM abstractions (and not just DOM, but also iOS, Android, and so on).

Fast UIs—React provides outstanding performance thanks to its virtual DOM and smart-reconciliation algorithm, which, as a side benefit, lets you perform testing without spinning up (starting) a headless browser.

Less code to write—React’s great community and vast ecosystem of components provide developers with a variety of libraries and components. This is important when you’re considering what framework to use for development.

What you will learn in this course:

Introduction to React

Data Flow in React

Component Lifecycle methods

Components and rendering list

React Context API

Working with Forms in React

Adding Routing using React-Router v4

State Management with Redux

Redux thunk and async actions

Integrating Firebase with React

Firebase Authentication

Who this course is for:

Javascript developers who want to develop frontend applications with React

A React element is a light, stateless, immutable primitive in React. There are two types: ReactComponentElement and ReactDOMElement. React- DOMElements are virtual representations of DOM elements. ReactComponent- Elements reference either a function or a class corresponding to a React component.

The DOM is a W3C (World Wide Web Consortium) standard. The DOM defines a standard for accessing documents: "The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

You can think of the virtual DOM like a blueprint. It contains all the details needed to construct the DOM, but because it doesn't require all the heavyweight parts that go into a real DOM, it can be created and changed much more easily.

A React component is basically any part of a UI that can contain React nodes (via React.createElement() or JSX). I spent a lot of time up front talking about React nodes so that the ingredients of a React component would be firmly understood.

As your app grows, you can catch a lot of bugs with typechecking. For some applications, you can use JavaScript extensions like Flow or TypeScript to typecheck your whole application. But even if you don’t use those, React has some built-in typechecking abilities. To run typechecking on the props for a component, you can assign the special propTypesproperty:

The heart of every React component is its “state”, an object that determines how that component renders & behaves. In other words, “state” is what allows you to create components that are dynamic and interactive. ... You've interacted with state-based systems your entire life — you just haven't realized it!

Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences: React events are named using camelCase, rather than lowercase. With JSX you pass a function as the event handler, rather than a string.

setState() is the only legitimate way to update state after the initial state setup.

React components can, and often do, have state. State can be anything, but think of things like whether a user is logged in or not and displaying the correct username based on which account is active. Or an array of blog posts. Or if a modal is open or not and which tab within it is active.

React components with state render UI based on that state. When the state of components changes, so does the component UI.

Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.

In React props is short for properties. They are single values or objects containing a set of values that are passed to React Components on creation using a naming convention similar to HTML-tag attributes.

The primary purpose of props in React is to provide following component functionality:

More recent versions of React introduced a new concept called error boundaries to help deal with this. If an uncaught exception is thrown within a component’s con- structor, render, or lifecycle methods, React will unmount the component and its children from the DOM.

A common task for front-end developers is to simulate a backend REST service to deliver some data in JSONformat to the front-end application and make sure everything is working as expected. ... JSON Server is a simple project that helps you to setup a REST API with CRUD operations very fast.

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. If you’re familiar with Bootstrap 3, cards replace our old panels, wells, and thumbnails. Similar functionality to those components is available as modifier classes for cards.

Context provides a way to pass data through the component tree without having to pass props down manually at every level.

In a typical React application, data is passed top-down (parent to child) via props, but this can be cumbersome for certain types of props (e.g. locale preference, UI theme) that are required by many components within an application. Context provides a way to share values like these between components without having to explicitly pass a prop through every level of the tree.

Reducers specify how the application's state changes in response to actions sent to the store. Remember that actions only describe what happened, but don't describe how the application's state changes.

In this video, you will learn how to validate the form in React. We will use some bootstrap classes for displaying errors and validations. I will also use external package classnames for handling validations.

React Router is the standard routing library for React. From the docs: “React Router keeps your UI in sync with the URL. It has a simple API with powerful features like lazy code loading, dynamic route matching, and location transition handling built right in.

The standard way to do it with Redux is to use the Redux Thunk middleware. It comes in a separate package called redux-thunk. We'll explain how middleware works in general later; for now, there is just one important thing you need to know: by using this specific middleware, an action creator can return a function instead of an action object. This way, the action creator becomes a thunk.

When an action creator returns a function, that function will get executed by the Redux Thunk middleware. This function doesn't need to be pure; it is thus allowed to have side effects, including executing asynchronous API calls. The function can also dispatch actions—like those synchronous actions we defined earlier.

Simpliv LLC, is a platform for learning and teaching online courses. We offer a wide variety of educational courses that have been prepared by authors, educators, coaches, and business leaders. Whether you're interested in healthy living, nutrition, natural healing, computer programming, or learning a new language, you'll find it here.