К содержанию

Prime React Book

React JavaScript framework tutorial. For beginners. Lots of theory and tasks.

Уроки

Introduction to the React Framework

Installing the React framework

Connecting the react-devtools plugin

Introduction to Component-Based Way in React

React Framework Website Mockup

Result of the component's work

JSX language

Introduction to JSX Language in React

Returning Nested JSX Tags with Functions

Rules for returning a function when moving a tag down in JSX

Features of returning multiple tags in JSX

Returning an unclosed JSX tag

Returning empty tag by function in JSX

Inserting Variable and Constant Values into JSX

Nuances when inserting variable values

Inserting Arrays into JSX

Inserting objects into JSX

Inserting variables and constants into tag attributes in JSX

Storing Tags in JSX Variables and Constants

Features of storing multiple tags in JSX constants

Tags on different lines in JSX

Returning tags via return in JSX

JSX tags closure

Correctness of layout in React

Executing JavaScript code

Terms and Conditions

Using Conditions in JSX

Conditional Showing in React

Conditions for returning a tag in JSX

Ternary Operator in JSX

Using the operator && in JSX

Inverting for shorthand conditions in JSX

Functions

Using Functions in React

Calling functions inside tags in React

Hooking Events in JSX

Parameters in a JSX function

The Event Object in React

Event object when passing parameters

Formation of tags

Tags in JSX arrays

Generating an Array of Tags in a React Loop

Generating Tags from an Array of Data in React

Unique keys in tags array in React

Outputting an Array of Objects in React

Unique keys via id in React

Outputting an Array of Objects as an HTML Table in React

Unique ids

Discussion of unique ids in React

Problems with new ids in React

Random strings for id in React

Generating id in React

Function to generate id in React

Using the id function in React

Incorrect use of id function in React

States

Introduction to States in React

Using States in React

State reactivity in React

Boolean in state in React

Stateful Counter in React

Forms

Working with Inputs in React

Changing Input Data When Outputting It in React

Changing Data with a Function in React

Working with Multiple Inputs in React

Handling Form Data on Button Click in React

Working with textarea in React

Working with checkboxes in React

Checkboxes and Conditional Rendering in React

Working with select in React

Select items from an array in React

Value Attributes in Select in React

Select Value Attributes from Array in React

Working with radio in React

Default Values in React

Binding Inputs to an Array in React

Binding Inputs to an Object in React

Data

Data Reactivity in React

Reactive Append to Array in React

Reactive Array Operations in React

Reactively adding to an array of objects in React

Reactive operations on arrays of objects in React

Reactive Data Display in React

Components

Introduction to React Components

Using Components in React

Multiple Component Instances in React

Component Props in React

Creating Child Components in React

Array for creating child components in React

Child Components in the React Cycle

Passing states to child components in React

Passing id to a component in React

Changing Parent State in Child Component in React

Editing Parent State in Child Component in React

Editing State in a Grandchild Component in React

Modes of operation via states of child components in React

Concepts

React Concepts When Working with Components

Component Data in React

Types of Components in React

Unidirectional Data Flow in React

State Lifting in React

Single Source of Truth in React

Stylization

Ways to style React components

Using Global CSS When Styling in React

Inserting data into the style attribute from an object in React

Inserting data into the style attribute from a separate file in React

Working with CSS styles in the style attribute in React

Inserting data into the style attribute from variables in React

Styling with Styled Components in React

Using Props with Styled Components in React

Using Props in Conditional Rendering with Styled Components in React

Advanced Component Styling in React

Getting Started with Styling with CSS Modules in React

Continuing to learn styling with CSS modules React

composes command for classes in CSS modules in React

composes command for files in CSS modules in React

Projects

Project Checklist in React

Project Notepad in React