Our first Button component
Let’s start with good practices by organizing our folder in a way to make components “reusable”, likes buttons, textboxes, dropdown menus etc…
Right click the src and add a new ‘component‘ folder and inside of it a ‘common‘ one. Your tree now look like this :
Creating the component
We will create a Button reusable component who returns a html button with a ‘Props’ Property, that’s a special keyword for React and is being used for passing data from one component to another. Open the Button.js and paste the following code :
// LOC : ./components/common/Button.js
import React from 'react';
// Declare a Button function
function Button(props) {
// When called, the Button will returns the <button>
return (
// on click, execute the passed property
<button className="button" onClick={props.handleClick}>
Submit
</button>
);
}
export default Button;Use and display our button by opening the main App.js file and removing everything inside the <div className="App"> Node and replace / add by the following :
import './App.css';
import Button from './components/common/Button'
function App() {
return (
<div className="App">
<Button/>
</div>
);
}
export default App;In here we had :
- Imported our Button component
- Rendered it by calling
<Button/>
That’s it ! We just created and used our first component !
But well, the button doesn’t do anything…
Passing a property to our Button
Since we defined an onClick property onClick={props.handleClick} to our Button we can pass every function we wants :
// LOC : ./App.js
// Create a simple function to display an alert
function Alert() {
alert("click from App.js")
}
function App() {
return (
<div className="App">
// We call the function with brackets
<Button handleClick={Alert} />
</div>
);
}Now we can create every dymanic Button components we wants for each function we needs to add on!
Look we just created another button with a different function :
// LOC : ./App.js
function Alert() {
alert("click from App.js")
}
function Logging() {
console.log("click from App.js")
}
function App() {
return (
<div className="App">
<Button handleClick={Alert} />
<Button handleClick={Logging} />
</div>
);
}
Since we want our component to be reusable we also need to adjust the title of the button according to different situations
Open again the Button.js and add a new property {props.btnText}, it will only contain the inner html of our button :
function Button(props) {
return (
<button className="button" onClick={props.handleClick}>
{props.btnText}
</button>
);
}Usage :
<Button handleClick={Alert} btnText="Save" />
<Button handleClick={Logging} btnText="Cancel" />
Pretty cool isn’t it ?
Stylize our page and buttons
Designing components is really simple in React since we use regular css classes.
By default App.css don’t have the body class, we needs to insert it and set the full height page to add a cool background
body {
height: 100vh;
padding: 0;
background: linear-gradient(37deg, rgba(9,33,54,1) 0%, rgba(69,53,92,1) 100%);
}We already defined a button class in className="button" so open App.css and add :
.button {
width: 200px;
font-size: 16px;
font-weight: 600;
color: rgb(54, 44, 99);
cursor: pointer;
margin: 20px;
height: 55px;
text-align:center;
border: none;
border-radius: 50px;
box-shadow: 0 3px 9px 0 rgba(241, 237, 247, 0.75);
}
Looks better !
Creating a container
When you think React, you have to draw youself a map in your mind, how many pages will i have to build, what content on it etc…
If we want to build a Wallet, we have at least 6 pages like :
- Create wallet page
- Managing wallet page
- Overview page (balance etc)
- Send page
- Receive page
- Settings ? page
Now we need a container to wrap our buttons and all our futur components into a ‘box’ / ‘card’ or ‘skeleton’, it’s a major layout implementation for a great reusable UI.
We will specify a maximum width of the skeleton and the following properties to display :
- the container title
- container content
- container footer (buttons etc)
Create a Container.js in /src/components/common
pro tip : if the elements you have in mind will be displayed horizontally always add display:flex; in the parent div style.
import React from 'react';
function Container(props) {
return (
<div className="container">
<div className="container--content">
<div className="container-content--top">
{/* // header text of the container */}
<h1 className="container--title">{props.containerTitle}</h1>
</div>
<div className="container-content--middle">
{/* // content can be mnemonic text to copy ( ex textbox Component) */}
{props.containerContent}
</div>
<div className="container-content--bottom">
{/* can be buttons / texts (ex our </Buttons> components) */}
{props.containerBottom}
</div>
</div>
</div>
);
}
export default Container;The styles of the component :
.container {
width: 750px;
display:block;
height: 100%;
margin-top: 30px;
margin-left: auto;
margin-right: auto;
border-radius:6px;
background-color: #ffffff;
box-shadow: 0 10px 45px rgba(255, 255, 255, 0.1);
}
.container--content {
display: flex;
flex-direction: column;
justify-content: space-between;
height: 100%;
box-sizing: border-box;
border-radius:6px;
box-shadow: 0 10px 45px rgba(255, 255, 255, 0.1);
overflow: hidden;
}
.container-content--top {
text-align: left;
margin-left: 20px;
}
.container-content--middle {
color:black;
padding:15px;
}
.container-content--bottom {
justify-content: center;
padding:15px;
display:flex;
color:black;
}Replace the .button style from width:200; to width: -webkit-fill-available; for a button who fit the content of our container
Filling our container and display it
We previously saw how to use properties for our buttons, it’s exactly the same procedure for our container, in App.js customize the way you wants the properties of your container and his contents
function App() {
return (
<div className="App">
<Container
containerTitle='New Wallet'
containerContent='hungry sign invite enlist taxi decade whisper life animal provide swallow angle issue tool almost purchase cruise palace bulk soft elite castle jar valley'
containerBottom={<Button handleClick={Alert} btnText="Continue" />}>
</Container>
</div>
);
}
export default App;
Do you see where we are headed to ?