Sign in

Introduction to React

What are the components?

How to build components in React?

<section>
<div class='component-1 component'>
<h3>Declarative</h3>
<p>React makes it painless to create interactive UIs...</p>
<p>Declarative views make your code more predictable...</p>
</div>
<div class='component-2 component'>
<h3>Component-Based</h3>
<p>Build encapsulated components that manage their...</p>
<p>Since component logic is written in JavaScript...</p>
</div>
<div class='component-3 component'>
<h3>Learn Once, Write Anywhere</h3>
<p>We don't make assumptions about the rest of...</p>
<p>React can also render on the server using...</p>
</div>
</section>
section {
display: flex;
flex: 0 1 30%;
-webkit-flex: 0 1 30%;
margin: 0 auto;
width: 97%;
overflow-x: auto;
}
.component {
margin-left: 5px;
margin-right: 5px;
padding: 10px
}
h3 {
font-size: 1.25rem;
font-family: sans-serif;
margin-bottom: 20px;
color: #6d6d6d;
padding-top: 0;
font-weight: 300;
line-height: 1.3;
}
p {
margin-top: 0;
font-size: 1.0625rem;
line-height: 1.7;
max-width: 42rem;
}
a {
background: #bbeffdad;
background-color: #bbeffdad;
color: #1a1a1a;
border-bottom: 1px solid #00000033;
text-decoration: none;
}
h3,
p {
font-family: sans-serif;
}
a:hover {
background: #bbeffd;
background-color: #bbeffd;
}
@media (max-width: 779px) {
.component {
min-width: 50%;
margin-left: 0;
margin-right: 0;
}
}
@media (max-width: 600px) {
.component {
min-width: 80%;
margin-left: 0;
margin-right: 0;
}
}

Template-like Component

const Adcomponent = props => {...}
<div className="component-1 component">
<h3>{props.adHeading}</h3>
<p>{props.adParagraph1}</p>
<p>{props.adParagraph2}</p>
</div>
return (
<div className="component-1 component">
<h3>{props.adHeading}</h3>
<p>{props.adParagraph1}</p>
<p>{props.adParagraph2}</p>
</div>
);
<section>
<div class='component-1 component'>
<div id='ad1'></div>
</div>
<div class='component-2 component'>
<div id='ad2'></div>
</div>
<div class='component-3 component'>
<div id='ad3'></div>
</div>
</section>
ReactDOM.render(
<Adcomponent
adHeading="Declarative"
adParagraph1="React makes it painless to create interactive UIs..."
adParagraph2="Declarative views make your code more predictable..."
/>,
document.querySelector("#ad1")
);
ReactDOM.render(
<Adcomponent
adHeading="Component-Based"
adParagraph1="Build encapsulated components that manage their..."
adParagraph2="Since component logic is written in JavaScript..."
/>,
document.querySelector("#ad2")
);
ReactDOM.render(
<Adcomponent
adHeading="Learn Once, Write Anywhere"
adParagraph1="We don't make assumptions about the rest..."
adParagraph2="React can also render on the server..."
/>,
document.querySelector("#ad3")
);
const Adcomponent = props => {
return (
<div className="component-1 component">
<h3>{props.adHeading}</h3>
<p>{props.adParagraph1}</p>
<p>{props.adParagraph2}</p>
</div>
);
};
ReactDOM.render(
<Adcomponent
adHeading="Declarative"
adParagraph1="React makes it painless to create interactive UIs..."
adParagraph2="Declarative views make your code more predictable..."
/>,
document.querySelector("#ad1")
);
ReactDOM.render(
<Adcomponent
adHeading="Component-Based"
adParagraph1="Build encapsulated components that manage their..."
adParagraph2="Since component logic is written in JavaScript..."
/>,
document.querySelector("#ad2")
);
ReactDOM.render(
<Adcomponent
adHeading="Learn Once, Write Anywhere"
adParagraph1="We don't make assumptions about the rest..."
adParagraph2="React can also render on the server..."
/>,
document.querySelector("#ad3")
);
<div id='root'></div>
const Adcomponent = props => {
return (
<div className="component-1 component">
<h3>{props.adHeading}</h3>
<p>{props.adParagraph1}</p>
<p>{props.adParagraph2}</p>
</div>
);
};
const app = (
<section>
<Adcomponent
adHeading="Declarative"
adParagraph1="React makes it painless to create interactive..."
adParagraph2="Declarative views make your code more..."
/>
<Adcomponent
adHeading="Component-Based"
adParagraph1="Build encapsulated components that manage their..."
adParagraph2="Since component logic is written in JavaScript..."
/>
<Adcomponent
adHeading="Learn Once, Write Anywhere"
adParagraph1="We don't make assumptions about the rest..."
adParagraph2="React can also render on the server..." />
</section>
);
const rootNode = document.querySelector("#root");
ReactDOM.render(app, rootNode);

Terminology

JSX

ReactDOM

Props

Babel

Webpack

Techstack | Flutterwave

Hi, I am Bello Osagie, a web developer. I teach web development for free… so join me and have fun learning. Let’s code together!!! 😎

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