4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills
Difficulty
beginnerRepository
Click to openVideo
Click to openLive demo
Not available
Average duration
4 hrs
React improves the creation of custom components, which you can render throughout your web-app using the ReactDOM.render() method. A custom component allows you to divide and conquer, separating logical and visual challenges into smaller pieces- giving you greater control over the display and functionalities of each part of the web-app.
For example, to create a bootstrap <Card />
; component you'd code this:
function Card(props){ return ( <div className="card"> <img className="card-img-top" src="http://via.placeholder.com/350x150" alt="Card image cap" /> <div className="card-body"> <h5 className="card-title">Card title</h5> <p className="card-text">Some quick example text to build on the card title and fill the card's content.</p> <a href="#" className="btn btn-primary">Go somewhere</a> </div> </div> ); }
After declaring it, you are able to import and use it in your webapp like this:
//import react into the bundle import React from 'react'; import ReactDOM from 'react-dom'; import Card from './component/Card.jsx' ReactDOM.render(<Card />, document.querySelector('#root'));
Additionally, you can pass information through the Card component using props:
<!-- Use of the custom component --> <Card imageUrl="http://via.placeholder.com/350x150" title="A nice image" />
... for usage within the render method of your Card component (notice the image src and card title):
//Declaration of custom component (Card.js) function Card(props){ return ( <div className="card"> <img className="card-img-top" src={props.imageUrl} alt="Card image cap" /> <div className="card-body"> <h5 className="card-title">{props.title}</h5> <p className="card-text">Some quick example text to build on the card title and fill the card's content.</p> <a href="#" className="btn btn-primary">Go somewhere</a> </div> </div> ); }
Do not clone this repository.
a) If using Gitpod (reommended) you can clone the boilerplate by clicking here.
b) If working locally type the following command from your command line:
` $ git clone https://github.com/4GeeksAcademy/react-hello`. `
π‘ Important: Remember to create a new repository, update the remote (git remote set-url origin <your new url>
), and upload the code to your new repository using add
, commit
and push
.
Create a seconds-counter component, called SecondsCounter. It should look like this one.
<SecondsCounter seconds={3434} />
4Geeks Coding Projects tutorials and exercises for people learning to code or improving their coding skills
Difficulty
beginnerRepository
Click to openVideo
Click to openLive demo
Not available
Average duration
4 hrs
All rights reserved, 4Geeks LLC 2021. Read more about 4Geeks and what we are going here.