OVERVIEW OF REACT

React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.

React can be used as a base in the development of single-page or mobile applications, as it is optimal for fetching rapidly changing data that needs to be recorded. However, fetching data is only the beginning of what happens on a web page, which is why complex React applications usually require the use of additional libraries for state management, routing, and interaction with an API: Next.js and Gatsby.js are examples of such libraries.

Setting up Your Environment
- Section Intro: Setting up Your Environment
- Installing Visual Studio Code
- Installing Node.js & Yarn
Hello React
- Section Intro: Hello React
- Setting up a Web Server
- Hello React
- Setting up Babel
- Exploring JSX
- JSX Expressions
- Conditional Rendering in JSX
- ES6 Aside: const and let
- ES6 Aside: Arrow Functions
- ES6 Aside: Arrow Functions Part II
- Events and Attributes
- Manual Data Binding
- Forms and Inputs
- Arrays in JSX
- Picking an Option
- Build It: Visibility Toggle
React Components
- Section Intro: React Components
- Thinking in React
- ES6 Classes: Part I
- ES6 Classes: Part II
- Creating a React Component
- Nesting Components
- Component Props
- Events & Methods
- Method Binding
- What Is Component State?
- Adding State to Counter App: Part I
- Adding State to Counter App: Part II
- Alternative setState Syntax
- Build It: Adding State to VisibilityToggle
- Indecision State: Part I
- Indecision State: Part II
- Summary: Props vs. State
Stateless Functional Components
- Section Intro: Stateless Functional Components
- The Stateless Functional Component
- Default Prop Values
- React Dev Tools
- Removing Individual Options
- Lifecycle Methods
- Saving and Loading Options Data
- Saving and Loading the Count
Webpack
- Section Intro: Webpack
- What Is Webpack?
- Avoid Global Modules
- Installing & Configuring Webpack
- ES6 import/export
- Default Exports
- Importing npm Modules
- Setting up Babel with Webpack
- One Component per File
- Source Maps with Webpack
- Webpack Dev Server
- ES6 class properties
Using a Third-Party Component
- Section Intro: Using a Third-Party Component
- Passing Children to Component
- Setting up React-Modal
- Bonus: Refactoring Other Stateless Functional Components
Styling React
- Section Intro: Styling React
- Setting up Webpack with SCSS
- Architecture and Header Styles
- Reset That $#!*
- Theming with Variables
- Big Button & Options List
- Styling the Options List
- Styling Option Item
- Styling React-Modal
- Mobile Considerations
- Bonus: Favicon
React-Router
- Section Intro: React Router
- Server vs. Client Routing
- Setting Up Budget App
- React-Router 101
- Setting up a 404
- Linking Between Routes
- Organizing Our Routes
- Query Strings and URL Parameters
- Build It: Router for Portfolio Site
Redux
- Section Intro: Redux
- hy Do We Need Something Like Redux?
- Setting up Redux
- Dispatching Actions
- Subscribing and Dynamic Actions
- ES6 Object Destructuring
- ES6 Array Destructuring
- Refactoring and Organizing
- Reducers
- Working with Multiple Reducers
- ES6 Spread Operator in Reducers
- Spreading Objects
- Wrapping up Our Reducers
- Filtering Redux Data
- Sorting Redux Data

React

Courses

IOS

OVERVIEW OF REACT

Setting up Your Environment

Hello React

React Components

Stateless Functional Components

Webpack

Using a Third-Party Component

Styling React

React-Router

Redux

NEWSLETTER

Get Enquiry