Concept 1: Components as Building Blocks

• React applications are entirely made out of components.

• The components are the building blocks of user interfaces in React.

• Each piece of UI has it's own data, logic and appearance (how it works and looks).

• We build complex UIs by building multiple components and combining them.

Components can be reused, nested inside each other, and we can pass data between them.

Example:

Concept 2: JSX

• JSX is a declarative syntax to describe what components look like and how they work and components must return a block of JSX.

• JSX is also an extension of JavaScript that allows us to embed JavaScript, CSS, and React components into HTML.

• Each JSX element is converted to a React.createElement function call because browsers do not understand JSX but HTML.

• The rules of JSX would be discussed tomorrow(Day 2).

Concept 3: Props

• Props are used to pass data from parent components to child components(down the component tree).

• With props, parent components control how child components look and work.

• Anything can be passed as props: single values, arrays, objects, functions, even other components.

• Props are read-only(immutable) and can only be updated by the parent component. This is one of React's strict rule. If you need to mutate props you actually need state (State is internal data that can be updated by the component's logic)**.**

React uses a one-way data-flow making applications more easier to debug as we have more control over the data.

Simple props example:

To be continued............................