Reactjs

Duration (in days): 

3

Description:

Reactjs has become a very popular web interface framework that has proven to buid rubust, high-performnce user interfaces.

at Northscaler, we have been using Reactjs for some time to build interfaces for our clients.

This course is a beginners course on Reactjs (we also have an advanced course that we recommend for those that have been using Reactjs for some time).

Objectives:

  • Learn how to create a web-site using reactjs

  • Learn how to debug reactjs

  • Learn how to organize reactjs applications for maximum maintainability

  • Establish best practices using reactjs

Prerequisites:

Reactjs has become a very popular web interface framework that has proven to buid rubust, high-performnce user interfaces.

at Northscaler, we have been using Reactjs for some time to build interfaces for our clients.

This course is a beginners course on Reactjs (we also have an advanced course that we recommend for those that have been using Reactjs for some time).

Audience

JavaScript programmers and web designers.

Outline

Introduction

  • What is Reactjs?

  • Components in Reactjs

  • A first example

  • Array.prototype.map()

  • Use of ES6

  • Models

  • Controller

  • Combining components

  • Virtual DOM

  • Ajax

React-Routing

  • What is a routes?

  • Routing in Reactjs

  • What is a link?

  • Best practices

React Styling

  • CSS stylesheets

  • The four ways of styling in Reactjs

  • Component styling

  • Internal variables

  • Styling and imports

  • React stylesheet object

React Component Communication

  • Converting HTML into React JSX

  • <form> conversion

  • DOM event handlers

  • Parent/child communication

  • Best practices

Communicating With Servers

  • Client interactions

  • Common problems in client-side frameworks

  • Dealing with asynchronous communication 

  • A complete example

  • Best practices

Reactjs Best Practices

  • Prototypes

  • PropTypes

  • Three ways to create components

  • Presentation components

  • Container components

  • Format of U/I source

  • Naming conventions

  • Directory structure

Reactjs Flux

  • What is Flux?

  • How does Flux work?

  • Data store

  • Dispatchers

  • Listening components

  • Change component

Reactjs Redux

  • What is Redux?

  • Why Redux?

  • Redux containers

  • Single state

  • Change state functions

  • Reducers

  • Redux flow

  • Redux U/I

  • Configuration of Redux

  • Async actions

Reactjs Redux Async

  • Async actions (for real)

  • UI async issues

  • Proper use of actions

  • Proper async reducers

Testing React Components

  • Unit testing

  • Unit testing in React

  • jest

  • react-test-renderer

  • Advantage of snapshots

  • Walking through a React component

  • Enzyme

Reacth and (I18N) Internationalization

  • anemone-lingua

  • The I18N process

  • Properties files

  • Messages object

  • React component render

React Webpack

  • What is Webpack?

  • How does Webpack work?

  • Issues addressed by Webpack

  • webpack.config.js

  • Multiple bundles

  • Shared resources

  • Webpack Development Server

  • What about HTML?

  • Loaders

  • CSS loaders

  • Less and Sass loaders


© 2020 Northscaler