ReactJS tutorial - react tutorial - react - reactjs - react native

React Basics :

• What is ReactJS?
• Hello World with Stateless Functions in ReactJS
• Absolute Basics of Creating Reusable Components in react
• Create React App in react
• Hello World Without JSX in ReactJS
• Hello World Component in ReactJS

Components in react

• Creating Components in react
• Basic Components in ReactJS
• Nesting Components in ReactJS
• Props in ReactJS
• Component states - Dynamic user-interface in ReactJS
• Variations of Stateless Functional Components in ReactJS
• setState pitfalls in react

React Component Lifecycle

• Component Creation in ReactJS
• Component Removal in ReactJS
• Component Update in ReactJS
• Lifecycle method call in different states in react
• React Component Container in react

Props in React

• Props in React
• Default Props in react
• PropTypes in ReactJS
• Passing down props using spread operator in react
• Props.children and component composition in ReactJS
• Detecting the type of Children components in ReactJS

React.createClass vs extends React.Component

• Create React Component in ReactJS
• "this" Context in ReactJS
• Declare Default Props and PropTypes in react
• Mixins in ReactJS
• Set Initial State in ReactJS
• ES6/React “this” keyword with ajax to get data from server in ReactJS

State in React

• Basic State in react
• Common Antipattern in react
• setState() in react
• State, Events And Managed Controls in ReactJS

Using ReactJS with Typescript

• ReactJS component written in Typescript in react
• Stateless and property-less Components in ReactJS
• Stateless React Components in Typescript in ReactJS

Forms and User Input

• Controlled Components in ReactJS
• Uncontrolled Components in ReactJS

React AJAX call

• HTTP GET request in react
• HTTP GET request and looping through data in ReactJS
• Ajax in React without a third party library in ReactJS

Communication Between Components

• Child to Parent Components in ReactJS
• Not-related Components in react
• Parent to Child Components in react
• Communication between Stateless Functional Components in ReactJs

Performance

• Performance measurement with ReactJS
• React's diff algorithm
• HTML DOM vs Virtual DOM in ReactJS
• Tips & Tricks in react

Stateless Functional Components

• Stateless Functional Component in ReactJS

Setting Up React Environment

• Configure babel in ReactJS
• Configure webpack in ReactJS
• Install all dependencies in ReactJS
• Simple React Component in ReactJS
• HTML file to use react component in ReactJS
• Transpile and bundle your component in ReactJS

How to setup a basic webpack, react and babel environment

• How to build a pipeline for a customized "Hello world" with images in ReactJS

React, Webpack & Typescript installation

• My First Component in ReactJS
• tsconfig.json in ReactJS
• webpack.config.js in ReactJS

Higher Order Components

• Higher Order Component that checks for authentication in ReactJS
• Simple Higher Order Component in ReactJS

React Installation

• Simple setup in ReactJS
• Using webpack-dev-server in ReactJS

Introduction to Server-Side Rendering

• Rendering components in ReactJS

React Boilerplate [React + Babel + Webpack]

• react-starter project in ReactJS
• Setting up the project in ReactJS

Using ReactJS with jQuery

• ReactJS with jQuery

Using ReactJS in Flux way

• Data Flow in ReactJS

React with Redux

• Using Connect in ReactJS

Keys in react

• Using the array index in ReactJS
• Using the id of an elementin ReactJS

How and why to use keys in React

• Basic Example in ReactJS

User interface solutions

• Basic Pane in ReactJS
• Example view with `PanelGroup`s in ReactJS
• Panel in ReactJS
• PanelGroup in ReactJS
• Tab in ReactJS

Using React with Flow

• Using Flow to check prop types in ReactJS
• Using Flow to check prop types of stateless functional components in ReactJS

JSX

• Children in JSX in ReactJS
• Props in JSX in ReactJS

React Routing

• Example Routes.js file, followed by use of Router Link in component in ReactJs
• React Routing Async in ReactJS