Lesson 1​

Links
Basic React
1. https://react.dev/learn

2. https://react.dev/learn#components

3. https://react.dev/learn/describing-the-ui

4. https://react.dev/learn/adding-interactivity#state-a-components-memory
 Lesson 1​

What is React?
Overview
React is a JS library for building user interfaces or UI components. It was created by Jordan Walke
while he was working at Facebook, and it can be used in the development of single-page
applications or mobile applications.

While using React alone, you can build a simple web application. In order to use the full power of
React, you’d need to use additional libraries such as React Navigation or React Router that work in
an opinionated way.

Prerequisites:
A strong foundation in JavaScript is a prerequisite for this course, as well as basic HTML/CSS.
 Lesson 1​

What is React?
Main Concepts
React is a JavaScript library for
rendering user interfaces (UI).

https://react.dev/learn/describing-the-ui
 Lesson 1​

What is React?
Main Concepts
React is a component-based JS library
for building user-friendly interactive
interfaces.
 Lesson 1​

Key concepts:
Main Concepts
1. Component-based approach

2. Library (!)

3. Interface

4. User Interface (UI)

5. User-friendly interface

6. Interactivity

7. JSX
 Lesson 1​

Component
Main Concepts
A React Component is a JS function which return markup.

Components are independent and reusable bits of code. They serve the same
purpose as JavaScript functions but work in isolation and return HTML.

React components are regular JS functions, but their names must start with a
capital letter, or they won't work.

Components are the building blocks representing a part of the user interface.
 Lesson 1​

Props
Main Concepts
Props are arguments passed to components.

React Props are like function arguments in

JavaScript and attributes in HTML.

React Props are read-only! You will get an error if you try
to change their value.
 Lesson 1​

State
Main Concepts
Class Component: The state is a built-in React object
contains data or information about the component.

Functional Component: The state is a component's

memory.
 Lesson 1​

State
Main Concepts
A component’s state can change over time.

Whenever it changes, the component re-renders.

.

The change in state can happen as a response to user

action or system-generated events and these changes
determine the behavior of the component and how it will
render.
 Lesson 1​

Props vs State
Main Concepts

.
 Lesson 1​

JSX
Features
JSX is a syntax extension of JavaScript. It is used with
React to describe what the user interface should look like.

By using JSX, we. can write HTML markup in the JS code.

 Lesson 1​

Components
Features
Components are the building blocks of any React
application, and a single app usually consists of multiple
components.
.

It splits the user interface into independent, reusable

parts that can be processed separately.
 Lesson 1​

Virtual DOM
Features
React keeps a lightweight representation of the real DOM
in the memory, and that is known as the virtual DOM.

When the state .of an object changes, virtual DOM

changes only that object in the real DOM, rather than
updating all the objects.
 Lesson 1​

One-way Data Binding

Features
React’s one-way data binding keeps everything modular
and fast.

A unidirectional. data flow means that when designing a

React app, you often nest child components within parent
components.
 Lesson 1​

High Performance
Features
React updates only those components that have changed,
rather than updating all the components at once.

.
This results in much faster web applications.