Build A Blog Site With React, Redux Firebase And MaterializeCSS (Part 2)

in #utopian-io5 years ago

react-redux.fw.png

Repository

React

https://github.com/facebook/react

Material-ui

https://github.com/mui-org/material-ui

My Github Address

https://github.com/pckurdu

This Project Github Address

https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-2

What Will I Learn?

  • You will learn how to do routing operations using the react-router.
  • You will learn the card class in MaterializeCSS.
  • You will learn Switch and Route modules in react-router.
  • You will learn how to send and access parameters when routing.
  • You will learn the path attribute and the exact attribute that provides the exact path orientation in the routing process.
  • You will learn NavLink, which is performing the routing process with the navigation method.

Requirements

  • text editor (I used visual studio code editor)
  • Basic javascript information
  • Basic react information

Difficulty

  • Basic

Tutorial Contents

In this tutorial we will create the dashboard page of our project. When creating the dashboard page, we will use the Switch and Route modules in the react-router structure. In the dashboard page, we'll create the Notifications and ProjectList components in the dashboard creation section and import them into the Dashboard Component.

In the next section, we will create the ProjectDetails component and run the routing process with the parameter. We'll show you how to access parameters and paths within a react component.

In the next section we'll show you how to create routing using the NavLink feature on the links on the navbar.

The sections in this tutorial are listed below:

  • Create Dashboard Component
  • Exposing The Dashboard Component
  • Create ProjectDetails Component
  • Create NavLink

Create Dashboard Component

In this section, we'll set up the dashboard page that the user will see after logging in. We will divide this dashboard page into two. On the left side of the page we'll show the project list in the right side of the page we'll show the notifications.

We can create the Dashboard component as follows by sticking to the plan described above.

import React, { Component } from 'react'

class Dashboard extends Component {
  render() {
    return (
      <div className="dashboard container">
        <div className="row">
        {/* 6 pieces were used depending on the grid structure. */}
          <div className="col s12 m6">
            {/* here ProjectList Component  */}
          </div>
          {/* Depending on the grid structure, 5 pieces were used and 1 column was shifted. */}
          <div className="col s12 m5 offset-m1">
            {/* here Notifications Component  */}
          </div>
        </div>
      </div>
    )
  }
}

export default Dashboard



So we have defined the dashboard component but the components in the separated pages have not yet been created.
Let's import this to the dashboard page by creating the Notifications component.

Within the notifications component, we will notify all users of any changes made by a user but it is enough to write only the codes required for the component to ocur because we create the Dashboard component in this section.

In Notifications.js

import React from 'react'

//with arrow function we create notifications  component
const Notifications = () => {
  return (
    <div>
      <p>Notifications</p>
    </div>
  )
}

export default Notifications



Once you have created the Notifications component, it must be imported to view this component on the dashboard page.

In Dashboard.js

import Notifications from './Notifications'
…
{/* Depending on the grid structure, 5 pieces were used and 1 column was shifted. */}
          <div className="col s12 m5 offset-m1">
            {/* here Notifications Component  */}
            <Notifications/>>
          </div>



Below you can see the Notifications component created.
react1.png


When we create the Notifications Component and add it to the Dashboard component, we can create the ProjectList Component.

The ProjectList component will contain a list of projects. I will use the card design in materializecss to show the projects. For the time being, we will create content containing the summary of the project and then we will bring the project information from the firebase-firestore.

In ProjectList.js

import React from 'react'

const ProjectList = () => {
  return (
    <div className="project-list section">

    {/* We use the card class to create a card. */}
      <div className="card z-depth-0 project-summary">
      {/* With the card-content class, we create the body part of the card space. */}
        <div className="card-content grey-text text-darken-3">
          <span className="card-title ">Project title</span>
          <p>Posted by The Pckurdu</p>
          <p className="grey-text">3rd September, 2am</p>
        </div>
      </div>

      <div className="card z-depth-0 project-summary">
        <div className="card-content grey-text text-darken-3">
          <span className="card-title ">Project title</span>
          <p>Posted by The Pckurdu</p>
          <p className="grey-text">3rd September, 2am</p>
        </div>
      </div>

      <div className="card z-depth-0 project-summary">
        <div className="card-content grey-text text-darken-3">
          <span className="card-title ">Project title</span>
          <p>Posted by The Pckurdu</p>
          <p className="grey-text">3rd September, 2am</p>
        </div>
      </div>
      
    </div>
  )
}

export default ProjectList



Let's import the ProjectList component in the Dashboard component.

In Dashboard.js

import ProjectList from '../projects/ProjectList'
…
{/* 6 pieces were used depending on the grid structure. */}
          <div className="col s12 m6">
            {/* here ProjectList Component  */}
            <ProjectList/>
          </div>



Below you can see the ProjectList component created.
react2.png

Since we created the Dashboard component, we can define it in the App.js file so that it can be viewed in the project.

Exposing The Dashboard Component

Since the dashboard page is a page to be seen after the user has logged in, we cannot place it directly into the App component. If we place the page directly, it will be seen when the project is opened because the App component is the main component and because the user is not logged in, the information will be missing.

To provide this event, we can use the routing event in the react. If it is within the routing structure within the app component, it can only be seen as a result of the routing process.

Let's import the modules and component that we will use first.

In App.js

//Import the routing module,Switch and Route.
import {BrowserRouter,Switch, Route} from 'react-router-dom';
//Let's import the Dashboard function in the file
import Dashboard from './components/dashboard/Dashboard'



We need Switch and Route modules for routing. The switch module contains the routes that will make certain routing and the Route module performs routing.

{/* we keep the routing routing together with the switch. */}
        <Switch>
            <Route path='/'component={Dashboard} />
        </Switch>



react1.gif

Create ProjectDetails Component

In this section, we will create the ProjectDetails Component and examine id submission during the routing process and according to this id sent ProjectDetails components we will create.

Let's start by creating the function in the ProjectDetails.js file.

import React from 'react'

const ProjectDetails = (props) => {
  return (
    // details of a project into the card structure.
    <div className="container section project-details">
      <div className="card z-depth-0">
        <div className="card-content">
          <span className="card-title">Project title</span>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et labore quaerat quibusdam vel saepe, ab voluptate accusantium culpa nemo fuga earum? Soluta amet nobis officia sed neque fuga aperiam quia?</p>
        </div>
        <div className="card-action grey lighten-4 grey-text">
          <div>Posted by The Pckurdu</div>
          <div>2nd September, 2am</div>
        </div>
      </div>
    </div>
  )
}

export default ProjectDetails



After creating the page, we must define it in the Switch structure in App.js. So we can access this page with the router structure.

In App.js

//Let's import the ProjectDetails function in the file
import ProjectDetails from './components/projects/ProjectDetails'
…
{/* we are routing to the page when referring to the id. */}
     <Route path='/project/:id' component={ProjectDetails} />



Using path attribute, we can do routing with id. The error will not occur when we run the page, but we can not do routing.
react2.gif


We need to use exact attribute to overcome this problem, it occurs because path = '/' is redirected. Since there is a '/' in the two orientations, the react is referring to the first path according to the definition. When we use exact, we give the direction command when the path is exactly written to the page, and the error disappears.

<Switch>
            <Route exact path='/'component={Dashboard} />
            {/* we are routing to the page when referring to the id. */}
            <Route path='/project/:id' component={ProjectDetails} />
</Switch>



react3.gif


The page is directed as we want now that we can perform the capture process. Now we have to catch the id.
id information is contained in the props in component. So let's create this componentte props and print the props information to the console.

In ProjectDetails.js

const ProjectDetails = (props) => {
    console.log(props)
…
}



react3.png


We can capture path with location information in props and we can access the parameter with the match information in props.

Then let us access the id using this information and print this parameter next to title.

const ProjectDetails = (props) => {
    const id = props.match.params.id;
  return (
    // details of a project into the card structure.
    <div className="container section project-details">
      <div className="card z-depth-0">
        <div className="card-content">
          <span className="card-title">Project title- {id}</span>
          <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Et labore quaerat quibusdam vel saepe, ab voluptate accusantium culpa nemo fuga earum? Soluta amet nobis officia sed neque fuga aperiam quia?</p>
        </div>
        <div className="card-action grey lighten-4 grey-text">
          <div>Posted by The Pckurdu</div>
          <div>2nd September, 2am</div>
        </div>
      </div>
    </div>
  )
}



react4.gif

Create NavLink

In this section we will perform the forwarding process that will take place when the buttons on the navbar are clicked.
Let us create the appropriate components for the links on the navbar.

Create SignIn Component

import React from 'react'

export default function SignIn() {
  return (
    <div>
    SignIn
    </div>
  )
}

Create SignUp Component

import React from 'react'

export default function SignUp() {
  return (
    <div>
    Sign Up
    </div>
  )
}

Create CreateProject Component

import React from 'react'

export default function CreateProject() {
  return (
    <div>
    CreateProject
    </div>
  )
}



In the SignInLinks.js file, set '/create' to New Project.

<ul className="right">
           <li><NavLink to='/create'>New Project</NavLink></li>
           <li><NavLink to='/'>Log Out</NavLink></li>
           <li><NavLink to='/' className="btn btn-floating red">PK</NavLink></li>
</ul>



In the SignOutLinks, we make the necessary adjustments as follows.

<ul className="right">
           <li><NavLink to='/signup'>Signup</NavLink></li>
           <li><NavLink to='/signin'>Login</NavLink></li>
        </ul>



If we leave it like this it will not work the way we want. We need to set the places to work on. We need to define this setting within the switch structure.

In App.js

import SignIn from './components/auth/SignIn'
import SignUp from './components/auth/SignUp'
import CreateProject from './components/projects/CreateProject'
…
<Switch>
            <Route exact path='/'component={Dashboard} />
            {/* we are routing to the page when referring to the id. */}
            <Route path='/project/:id' component={ProjectDetails} />
            {/* required settings for routing */}
            <Route path='/signin' component={SignIn} />
            <Route path='/signup' component={SignUp} />
            <Route path='/create' component={CreateProject} />
        </Switch>



react5.gif

Curriculum

https://steemit.com/utopian-io/@pckurdu/build-a-blog-site-with-react-redux-firebase-and-materializecss-part-1

Proof of Work Done

https://github.com/pckurdu/Build-A-Blog-Site-With-React-Redux-Firebase-And-MaterializeCSS-Part-2

Sort:  

Thank you for your contribution @pckurdu.
After analyzing your tutorial we suggest the following points:

  • Your contribution was very good. Well structured, explained and with GIFs showing the results of your development.

  • Thanks for your attention to our suggestions in the previous tutorials. Your tutorials are getting better.

Looking forward to your upcoming tutorials.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.


Need help? Chat with us on Discord.

[utopian-moderator]

Thank you for your review, @portugalcoin! Keep up the good work!

Hi @pckurdu!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your post is eligible for our upvote, thanks to our collaboration with @utopian-io!
Feel free to join our @steem-ua Discord server

Congratulations @pckurdu! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You received more than 2000 upvotes. Your next target is to reach 3000 upvotes.

Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word STOP

Vote for @Steemitboard as a witness and get one more award and increased upvotes!

Hey, @pckurdu!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support Utopian.io!
Simply set @utopian.pay as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord https://discord.gg/h52nFrV.

Vote for Utopian Witness!

Coin Marketplace

STEEM 0.35
TRX 0.12
JST 0.040
BTC 70597.89
ETH 3559.60
USDT 1.00
SBD 4.77