ReactJS Course: Learn JavaScript Library Used by Facebook&IG

In this lesson, you will learn what react.js is about and what the key differences of the current version from the old one are.

(Source code and slides are in the Lecture 1 under the resources.)

Before getting deeper with React.js, you will first learn how to create a Hello World html. There are several ways of downloading React.js and they are enumerated in this lecture.

In creating a Hello World html, you will know about:

• React.js Inclusion
• React.js CDN
• HTML Structure
• Creating h1 Element
• Rendering
• Running the Page
• Inspecting HTML
• HTML Arguments
• for and class Attributes

(Source code and slides are in the Lecture 1 under the resources.)

This is a continuation of the Hello world exercise.

(Source code and slides are in the Lecture 1 under the resources.)

In this part, you will learn the following:

• Definition of JSX.
• Benefits of using JSX.
• Two ways of using JSX.
• A step-by-step procedure and the requirements in using JSX for React.js.

(Source code and slides are in the Lecture 1 under the resources.)

This is a continuation of the JSX example. Here, you will learn how to use the HTML skeleton but this time we use the React.js- Node.js library and the JSX transformer file which is in the same folder of the HTML file.

(Source code and slides are in the Lecture 1 under the resources.)

In this lesson, you will know the following:

• What is Babel and it's key features.
• How to separate code into two files.
• Code inclusion.
• Installing Babel.
• End results of running Babel.

(Source code and slides are in the Lecture 1, under the resources.)

In lecture 9, you will know how to use Babel.

(Source code and slides are in the Lecture 1 under the resources.)

In this lecture, you will be introduced to the two components of React.js and their main differences.

A demo/code will be provided to define a component, refactor a HelloWorld component and to compile JSX with Babel.

In this tutorial, you will know how to nest elements inside of div.

The recommended pattern of nesting including the things to avoid will also be discussed here.

You will also learn the following:

• Rendering title and text
• Single Top-Level Tag
• Recommended pattern in creating nested structure in custom components
• Running the code
• Order of the code

(Source code and slides are in the Lecture 1 under the resources.)

In this section, you will learn how to render variable inside of JSX and a plunkr demo will be provided.

(Source code and slides are in the Lecture 1 under the resources.)

Here, we will cover the following:

• What is state?
• How is state set?
• How is state updated?
• How is state outputted and rendered?

An example about state will be provided via plunkr.

(Source code and slides are in the Lecture 1 under the resources.)

In this part, you will learn the following:

• Calling method inside of JSX
• Events in components
• Declaring Events
• Button onClick Event

(Source code and slides are in the Lecture 1 under the resources.)

Here, you will learn the following:

• Props or properties
• How to use a prop as an event handler
• How to supply props to the ClickCounterButton component
• Where to put logic
• Exchanging props between children
• Parent component
• componentDidMount event and its example

(Source code and slides are in the Lecture 1 under the resources.)

This is to summarize the following:

• JSX for React.js
• Using Babel
• Components
• Nesting elements
• Rendering variables
• States and props

(Source code and slides are in the Lecture 1 under the resources.)

This is a demo on how to build a timer application.

(Source code and slides are in the Lecture 1 under the resources.)

In this lesson you will understand the following:

• Definition of list and it's uses
• List implementation

A menu example will also be shown.

(Source code and slides are in the Lecture 1 under the resources.)

This is a demo where you will learn how to create a sample menu.

(Source code and slides are in the Lecture 1 under the resources.

In this lesson, you will learn the following:

• What is Refs
• Refs' DOM
• Default props and an example
• Parent with a missing props

A demo on default props will also be shown

(Source code and slides are in the Lecture 1 under the resources.)

This is a presentation of how default props example looks like and it's end result.

(Source code and slides are in the Lecture 1 under the resources.)

Here, you will understand the following:

• Prop types on React.js classes
• Front-end validation warning
• Development vs Production in React.js
• Validating props and some examples

(Source code and slides are in the Lecture 1 under the resources.)

This is a continuation of properties- here, you will understand:

• How to make a prop type required
• Custom validation
• Additional prop types

In this part, we will:

• Define mixins
• Declare mixins
• Know how to use mixins

A few examples of using mixins and a demo will also be shown.

(Source code and slides are in the Lecture 1 under the resources.)

Here, we will tackle the following:

• Children components
• Children props and an example
• Parent
• Children, an array
• Children truthy check

(Source code and slides are in the Lecture 1 under the resources.)

In this part we will:

• Define forms and its main elements
• Understand the form events
• Know what's inside of the form
• Capture enter
• Discuss uncontrolled components and it's benefits (an example is also shown)
• Discuss controlled components and it's benefits (an example is also shown)
• Know how to use default value

(Source code and slides are in the Lecture 1 under the resources.)

This lecture covers:

• Controlled components' meaning and benefits
• An example of controlled component
• What default values are and how they are set on input fields

(Source code and slides are in the Lecture 1 under the resources.)

In this demonstration, I'll illustrate how passing and rendering of elements in JSX and React.js is done.

(Source code and slides are in the Lecture 1 under the resources.)

In this section, I will demonstrate uncontrolled component.

(Source code and slides are in the Lecture 1 under the resources.)

In this demo, I'll show you controlled component.

(Source code and slides are in the Lecture 1 under the resources.)

Here, I'll show you an example in the style attribute.

(Source code and slides are in the Lecture 1 under the resources.)

This section summarizes:

• Lists with the map method
• Mixins with the mixins: [Name] property
• Controlled vs. uncontrolled components
• Prop types
• Refs
• Prop validation with the propTypes property
• Development vs. production mode
• Passing children elements with this.props.children
• Inline style attribute with a JSON object and {}

In this demo, you will learn how to create a message board with React.js, Jquery ajax, and Express.js Mongo.db; and its end result.

(Source code and slides are in the Lecture 1 under the resources.

In this section, we will have a demo on creating an Express.js app.

(Source code and slides are in the Lecture 1 under the resources.)

Here, we will have a demo on using the postman 3.0, a chrome extension, to test the server and endpoints.

(Source code and slides are in the Lecture 1 under the resources.)

In this demonstration, I will illustrate how to create the front end React.js application.

(Source code and slides are in the Lecture 1 under the resources.)

To continue with the previous demos, in this part, you will know how to implement the message board component.

(Source code and slides are in the Lecture 1 under the resources.)

After implementing all the components on the previous lesson, in this demo you will learn creating the message list.

(Source code and slides are in the Lecture 1 under the resources.)

In this presentation, we will implement the message list.

(Source code and slides are in the Lecture 1 under the resources.)

Here, you will know about modifying the server code.

(Source code and slides are in the Lecture 1 under the resources.)