CSFundamental
Published in

CSFundamental

Day 3: JSX continues

We will study JSX and introduction to components in React

Example 1:

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

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>

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>;
}
}

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Saranjeet Singh

I write tutorials on Python, JavaScript, React, and Django. I write for InPlainEnglish and TheStartUp .