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-1

What Will I Learn?

• You will learn to create a react project.
• You will learn the logic of BrowserRouter concept.
• You will learn the Link and NavLink modules in the react router.
• You will learn how to create navbar with materializecss.
• You will learn the sub-component router in the react.
• You will learn how to create react component functions.

Requirements

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

Difficulty

• Basic

Tutorial Contents

Hello to everyone,

We're starting a new tutorial series.In this tutorial series we will develop the react application.We will build the redux structure to better manage state objects that are complex when developing the react application.Thus we will learn to use redux on the react.

We will perform authentication settings and data storage for our application using firebase. We will also review and use cloud functions to instantly show other users' shares to other users.

We will doall the design of the application using materializecss.At the end of this tutorial series, we will examine all the fine details of materializecss.

Here are the topics in this tutorial:

• Create React Project
• Create Navbar Component
• Create SignInLinks Component
• Create SignOutLinks Component

Let’s start

Create React Project

When creating a project, it is very important to configure the project. When we configure this blog site, we need to set up what we want to do. Otherwise it will become more complex as the project progresses, and perhaps not be able to complete the project.

The most logical and shortest way to create a react project is to use the create-react-app.With the create-react-app, we can build all essential components for reacting in a short time.

At the command line, we write the following command to the location where we will create the project.

create-react-app react-blog

Thus our react project is created.

We run the project with the yarn start command and we get the following image.



Since we have created the react project in this way, it is contained in a number of unnecessary files. We can delete these junk files if we want, but the App.js file to resolve the confusion of meaning, let's do as follows.

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
        <div>
        <h1>Blog Site</h1>
        </div>
    );
  }
}

export default App;

The following image occurs when we do so.



We will use materialize to design the pages of our project. We can import materializecss cdn after editing the pages. If we place the following cdn in the head field on the public / index.html page, we can use the materialize codes in our project.

(html comment removed: Import Google Icon Font)
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     (html comment removed: Import materialize.css)
     <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

We can start to create the files of our project.

Our project will perform verification procedures and write data and get data from the firebase firestore. The created projects will enter users in detail and a list of projects in other users will be displayed. Users will be able to see the details by clicking on the project summary.

We'll add an unchanged layout page on a changed page. This layout page will contain links that users will see after logging in and without logging in.

With the logic that we create, let us create the components folder in the src folder.

Let us create auth, dashboard, layout and Project folders under the components folder.

Since the auth folder will perform authentication operations, it must host login and sign up components. So create the signIn.js and signUp.js files in the auth folder.

The dashboard page is the page you should see after logging in. List of projects and announcements should be included. We add the Dashboard.js and Notification.js files to the dashboard folder.

The navbar that we created in the Layout folder should be included. Since the signedInLinks.js and signedOutLinks.js files will be included in the navbar component, they must be included in these files in the layout folder.

In the project folder, the user will create the project and because these projects will be listed, the CreateProject.js, ProjectDetails.js, ProjectList.js, and ProjectSummary.js files should be included.

After creating all the files, components will be created as follows.



Finally, we can form the basis of the router structure to provide link redirection. We need to download react-router-dom files to use a router in the react.

We can download the command line if we write the yarn add react-router-dom.

We'll get the app component as the base, so we need to write the routing codes here.

//Import the routing module.
import {BrowserRouter} from 'react-router-dom';

class App extends Component {
  render() {
    return (
      //other components must be included in the BrowserRouter component
      <BrowserRouter>
        <div className="App">
        <h1>Blog Site</h1>
        </div>
      </BrowserRouter>
    );
  }
}

Create Navbar Component

Navbar is a structure that contains links to the page. We will keep the links to routing on our navbar.

We only need to use the nav-wrapper class because we use materializeCSS to create a navbar.

We can create the navbar component by creating the navbar function in the navbar.js file.

import React from 'react';
//to perform routing
import {Link} from 'react-router-dom';

const Navbar=()=>{
    return(
        //navbar forming class
        <nav className="nav-wrapper light-blue lighten-2">
            <div className="container">
                <Link to='/' className="brand-logo">Project Blog</Link>
            </div>
        </nav>
    )
}

export default Navbar

We need to use this componenti App component.

//Let's import the navbar function in the file
import Navbar from './components/layout/Navbar';
…
<BrowserRouter>
        <div className="App">
        <Navbar />
        </div>
      </BrowserRouter>

So we created our navbar. Since we will do the forwarding process here and we define it in the App component, the Navbar component will appear on all pages.

Create SignInLinks Component

In this section we will define the links that the user will see when they log in. We have already defined the signInLinks.js file. We will call this file in the Navbar.js file so the links will be visible on the navbar.

Navbar.js

import SignedInLinks from './SignedInLinks';
…
//navbar forming class
        <nav className="nav-wrapper light-blue lighten-2">
            <div className="container">
                <Link to='/' className="brand-logo">Project Blog</Link>
                {/* SignedInLinks component */}
                <SignedInLinks/>
            </div>
        </nav>

The user must be able to produce new projects, to be able to see their profile and to exit after they have logged in. So we need to create a link in the navbar. We need to use NavLink when defining links with NavLink you can router in navbar.

SignInLinks.js

import React from 'react';
//to perform routing
import {NavLink} from 'react-router-dom';

const SignInLinks=()=>{
    return(
        // links to the right
        <ul className="right">
           <li><NavLink to='/'>New Project</NavLink></li>
           <li><NavLink to='/'>Log Out</NavLink></li>
           <li><NavLink to='/' className="btn btn-floating red">PK</NavLink></li>
        </ul>
    )
}

export default SignInLinks

Create SignOutLinks Component

In this section, we will create links that the user will see without login. We will use NavLink to place links in the Navbar.

SignOutLinks.js

import React from 'react';
//to perform routing
import {NavLink} from 'react-router-dom';

const SignOutLinks=()=>{
    return(
        <ul className="right">
           <li><NavLink to='/'>Signup</NavLink></li>
           <li><NavLink to='/'>Login</NavLink></li>
        </ul>
    )
}

export default SignOutLinks

The following image occurs if we use this component in the Navbar.js file.

import SignedOutLinks from './SignedOutLinks';
…
//navbar forming class
        <nav className="nav-wrapper light-blue lighten-2">
            <div className="container">
                <Link to='/' className="brand-logo">Project Blog</Link>
                <SignedInLinks/>
                <SignedOutLinks/>
            </div>
        </nav>

Since we don't have any firebase authentication now, all links are seen side by side. keep this for now as we will do this in the next tutorials.

See you in future tutorials

Proof of Work Done

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