![react-redux.fw.png](https://cdn.steemitimages.com/DQmRpmFiQxCwe4jswNSCADhUgLnyH8Ce249cszhzrYXLGvC/react-redux.fw.png)
<br>
# 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
```
<br>
Thus our react project is created.

We run the project with the `yarn start` command and we get the following image.
![react1.png](https://cdn.steemitimages.com/DQmQnXrden2M2WYmcsDar5XbA1ZvzBUwDP9xk6GrgLvbpu1/react1.png)
<br>
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;
```
<br>
The following image occurs when we do so.
![react2.png](https://cdn.steemitimages.com/DQmf9L97xxxjcRQaYdVh2ixkUtpYRXstFRdC62MVDw4QWyw/react2.png)
<br>
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.
```
<!--Import Google Icon Font-->
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <!--Import materialize.css-->
     <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>
```
<br>
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.
![react3.png](https://cdn.steemitimages.com/DQmSDzZ2eoMgN3kU2TA6BT4btdXo8wCNeoWWhrs1yERFWmh/react3.png)
<br>
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>
    );
  }
}
```
<br>
### 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
```
<br>
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>
```
<br>
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.
![react4.png](https://cdn.steemitimages.com/DQmbfaPg4dLJmMEYKCQoMGwe4gc7aWqUqJMvoc5ehoemsB1/react4.png)
<br>
### 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>
```
<br>
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
```
<br>
![react1.gif](https://cdn.steemitimages.com/DQmNbc8JmxuETf5y5F85s86LpaC37NtNKjUKZUUUQcjWsE8/react1.gif)
<br>
### 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
```
<br>
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>
```
<br>
![react2.gif](https://cdn.steemitimages.com/DQmU8SLVRbbpzK1bdGvmc3tksFbERRaBZm9obb3WrCXANjE/react2.gif)
<br>
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