Day 3: JSX continues

We will study JSX and introduction to components in React

JSX expressions, after compilation, become regular JS functions. And you can also specify the attributes with JSX.

Example 1:

const photo = < img src={user.theUrl} />

we can use either curly brackets for expressions and quotes for string values.

Children

you may specify children as well in JSX. However, all your children must be under a div tag.

Example 2:

const ele = (
  <div>
    <h1>Hey there!</h1>
    <p>wake up!!</p>  
  </div>
);

Rendering Elements

As we discussed JSX elements, components are made of these elements. An element is like a single frame in a movie, it is immutable and represents the UI at a certain point in time.

Root DOM node

Everything inside of our root tag manages by React. The root is the whole component of our app, which will include other components.

<div id="root"></div>

There are 2 types of components, first is the stateless component ( functional ) and stateful components (stateful class component) and they return JSX.

Example 3:

There are two types of components:

Stateless Functional Component

function Welcome(props) {
    return <p>hey, {props.name}</p> ;
}

Stateful Class Component

class Welcome extends React.Component {
    render () {
           return <p>Hey, {this.props.name}</p>;
}
}

In the next lesson, we will create the first React app and learn more about Components.

Photo by Norayr Grigoryan on Unsplash