React JS Application | Dashboard| Part 3–30
Creating the inital Screen and Components
As always we will start with working on dummy data. This test data will be hosted on the client-side to build out the UI components while creating the user-based click events that will push/post data to be used later with our redux architecture, the server, and eventually our database.
For now, we will work on the dashboard of our recipe app. Let us think about the layout of this component from a hierarchical perspective for a second. at our local root, the <Dashboard> tag has several children components nested in the DOM of the <Dashboard> tag. This will keep your UI code clean
<Dashboard container>
-- <div Row>
---- <div Col>
------ <RecipeList>
---------- <RecipeSummary />
---- <div Col>
------ <Notifications>Let us look at the dash now:
// Dashboard.jsimport RecipeList from "path/RecipeList":
import Notifications from "path/Notifications":class Dashboard extends Component {render() {
retrun (
<div className="container">
<div className="row">
<div className="col">
<RecipeList /> </div> <div className="col">
<Notifications /> </div> </div> </div> )
}
}
Once that is done, we can start working on the <RecipeList /> the component that will display a highlight of every recipe inside the dashboard.
Same thing here it is a good idea to think of the DOM hierarchy to limit useless elements and make styling easier.
// DOM Map for Dash screen<RecipeList />
-- <div recipe-list>
---- <RecipeSummary /><RecipeSummary />
-- <div card>
---- <div content>
----- <h1 title>
----- <p post>
----- <p author>
----- <p date>
Now we can create the RecipeList:
// RecipeList.jsimport RecipeSummary from "path/RecipeSummary":const RecipeList = () => {
retrun (
<div className="recipe-list" >
<RecipeSummary />
</div> )
}export default RecipeSummary;
We can simply map this on the dash screen alone. This keeps it tight. Consider separating sub-functions to their own files to keep code readable.
Next, we will create the summary. This will later use a mapping function for elements in a list to be dynamically displayed on a feed recursively.
// RecipeSummary.jsconst RecipeSummary = () => {
retrun (
<div className="card" >
<div className="card-content">
<h1>Title</h1>
<p>Recipe</p>
<p>Author</p>
<p>Date</p> <div>
</div> )
}export default RecipeSummary;
The last component relative to the recipe is our detail page of the recipe. We will ink everything shortly:
Once again we will create a DOM hierarchy to keep us organized.
<RecipeDetail />
-- <div container>
---- <div card>
------ <div card-content>
-------- <h1 Title>
-------- <p recipe>
------ <div card-footer>
-------- <p author>
-------- <p date>Now we build out the reusable component.
// RecipeDetail.jsconst RecipeDetail = () => {
retrun (
<div className="container" >
<div className="card">
<div classname="card-content">
<h1>Title</h1>
<p>Recipe</p>
</div>
<div classname="card-footer">
<p>Author</p>
<p>Date</p>
</div>
<div>
</div>
)
}export default RecipeDetail;
Now we will make this component dynamic using mapping to map incoming data recursively until there are no more recipes (elements in the array/list).
Finally, all we need to do is link that component to be presented as if a click event occurred.
// App.jsimport "./styles.css";
import NavBar from "path/NavBar"
import Dashboard from "path/Dashboard"
import RecipeDetail from "path/RecipeDetail"
import {BrowseRouter as Router, Route, Swtich} from "path/react-router-dom"function App() {
return( <Router />
<div className="app"> <NavBar />
<div className="content"> <Swtich />
<Route path="/" exact /> <Dashboard /> </Route>
<Route path="/recipe/:id" /> <RecipeDetail /> </Route>
<Swtich /> </div>
</div>
</Router> )
}
Whenever that path is satisfied we will direct to that component. Later we will use this to dynamically display a specific recipe.
for example, your URL could display localhost:3000/recipe/49
and the router will route to the <RecipeDetail> component. Since we are using the library of react-router-dom we are being passed various props. This allows us to fetch those props from the URL (similar to POST or GET) to be used in our code to dynamically fetch and display data.
Back inside our RecipeDetail component, we can pull that ID from the URL to display.
// RecipeDetail.jsconst RecipeDetail = (props) => {
const id = props.match.params.id;
retrun (
<div className="container" >
<div className="card">
<div classname="card-content">
<h1>Title - {id}</h1>
<p>Recipe</p>
</div>
<div classname="card-footer">
<p>Author</p>
<p>Date</p>
</div>
<div>
</div>
)
}export default RecipeDetail;
Real quick, if you don't understand props well as a concept (parameters and arguments essentially) then you should go back to my basics js series to understand these objects, how to retrieve them, and understanding dot notation.
