DEV Community: Rana Emad

MySQL Commands You Need To Know To Create A New User

Rana Emad — Mon, 24 Aug 2020 11:49:51 +0000

Working with our root user on all our databases is not a smart move and we all know it. We are going to learn how to use the command line to create a new MySQL user and grant him all the permissions and privileges needed to work independently.

I am assuming you already have MySQL installed globally and the service is running. If that's the case you will have a root user to login with. Let's use him to create our new user!

MySQL Server Connection

Let's start by opening our terminal and connecting to our MySQL server!

We can connect by simply running:

mysql

To connect with the default user

To specify a certain user, we can run:

mysql -u root -p

Where -u stands for user and its value is root and -p stands for password so we will be prompted to enter the password for the specified user.

Create MySQL User

Our next step now, is what all this is about, creating the user. To do that we will gracefully run:

CREATE USER 'rana'@'localhost' identified by 'Bad@Password1';

This will give us a new user, who can connect to the server using the user rana and the password Bad@Password1

But if we tried to connect using our new user, we will find out that our user doesn't have access on anything and pretty much as good as dead. To fix that we need privileges!

Grant MySQL User Privileges

It's time to grant our user privileges to let him play around like the other kids!

If we want our user to have all the privileges to manipulate everything we can use:

GRANT ALL ON *.* TO 'rana'@'localhost';

The first asterisk in *.* stands for all the databases we have and the second one stands for all the tables we have within the database. We can specify which database and which table exactly we want to grant the privileges on. Also, all here gathers all the privileges available in the official MySQL docs

What if we want to create a user who is dedicated to a certain database for a certain project?

Let's assume we have a database called amazingdb! If we want our user to be able to play around with all the grants on this database, we will run:

GRANT ALL ON amazingdb.* to 'rana'@'localhost';

If we want the user to only have some grants like the basic CRUD operations grants, we can go for:

GRANT INSERT, SELECT, UPDATE, DELETE
ON amazingdb.* 
TO 'rana'@'localhost';

Finally, if we want to specify only one grant we will use:

GRANT INSERT ON amazingdb.* TO 'rana'@'localhost';

That's it! Now we can create all the users we need and give them all the privileges they need!

Deploy React Apps on Github Pages

Rana Emad — Fri, 14 Aug 2020 09:53:59 +0000

We have been learning and creating lots of fun stuff and I believe we have a good idea on how to build React apps. It's time for us to know how to deploy those apps and have a live URL to show our progress off!

We have been using Create React App to develop our React applications, so let's see what they have to offer for our deployment process!

Create React App

The only magic command we need is npm run build. Running this command will create a build folder for us with all of our code sitting in it waiting to be deployed to production.

In this folder, all our Javascript and CSS will be included in the static folder. Let's see what we are going to do with the contents of this folder in order to have it up and running on Github Pages!

Github Pages

Since I mostly use Github for version control, I'll take further advantage of it and use Github Pages to host my apps on it for free.

Luckily, there is a package that would help us take care of this and prevent us from reinventing the wheel, the gh-pages package. We install the package normally with npm install gh-pages and it would handle the building and updating of the gh-pages branch for us, whenever we let it know we're ready. Let's see how it works!

How It Works

Normally, our app will be deployed on a subdomain with our username on github.io like any other app, so to keep our app well informed about our root URL, we need to add a homepage attribute to our package.json file and assign the URL to it

"homepage":"https://yourGithubUsername.github.io/yourRepositoryName",

After that, we need to make sure we add a couple of scripts to run the build command for us and generate our build folder and then take the contents of that folder and publish it our to gh-pages branch

"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

Now all we need to do is run npm run deploy every time we make changes and want to deploy our app and it will be up and running on the server.

One last thing we should remember to do is enable Github Pages in our repository settings and set the default branch to gh-pages

By this mini deployment, I shall end my eighth baby step towards React greatness, until we meet in another one.

Any feedback or advice is always welcome. Reach out to me here, on Twitter, there and everywhere!

Metrics of Awesome: Authentication in React With JWT

Rana Emad — Thu, 06 Aug 2020 12:46:30 +0000

Signing up and signing in are parts of our indispensable web routine and if we plan on using React for creating complex web applications, we need to know how we are going to approach authentication in React.

We know by now, React handles communicating with our backend whatever language it uses, using APIs. There are many authentication methods available for APIs, one of which is JWT and that's what we are going to use to build today!

Build What?

Since, we are talking authentication, obviously we are going to build a sign up and a sign in page that enables users to authenticate, but on top of that, we will add a touch of fun by building a dashboard that tells us how awesome we are in clear percentages!

What's The Plan?

We want to have 3 pages:

Sign Up
Sign In
Dashboard

The Dashboard page will be restricted to signed in users only. Once we sign up or sign in we will receive a token that we can use to send in our headers with any request that is restricted to signed in users.

I am going to use a simple local Node.js API that I created specifically to act as my endpoint, feel free to use it, as well, if you don't feel like creating your own:

RanaEmad / metrics-of-awesome-api

A Node.js API with the main purpose of acting as a backend for practicing authentication in React. It enables the user to sign up, sign in and view a dashboard with his metrics of awesome through different endpoints.

App

After running our famous npx create-react-app . in our folder, we are going to start by installing our router and running npm install react-router-dom. We know for sure we have multiple pages so we need to set their routes up in our App.js file. If you need a refresher on how the router works, you can check Inspiration Of The Day: React Router

import React from "react";
import "./App.css";
import {BrowserRouter, Switch, Route} from "react-router-dom";

class App extends React.Component {
  render() {
    return (
      <BrowserRouter basename={process.env.PUBLIC_URL}>
        <div className="app">
          <Switch>
            <Route path="/" exact />
            <Route path="/signup" />
            <Route path="/signin" />
            <Route path="/dashboard" />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

SignUp

Now let's create our pages folder and add to it our SignUp folder to start creating our page!

We will create a simple form that accepts a name, email and password. We will make all our inputs controlled components that reflect their values in their states. We will also add an error state for any error we receive from our requests.

import React from "react";
import "./SignUp.css";

class SignUp extends React.Component {
  constructor() {
    super();
    this.state = {
      name: "",
      email: "",
      password: "",
      error: "",
    };
  }
  handleInputChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value,
    });
  };
  render() {
    let error = "";
    if (this.state.error !== "") {
      error = <div className="error">{this.state.error}</div>;
    }
    return (
      <div className="signup">
        <div className="header-image"></div>
        <h1 className="header-title">Sign Up</h1>
        {error}
        <form>
          <div className="form-group">
            <label>Name</label>
            <input
              type="text"
              name="name"
              value={this.state.name}
              onChange={this.handleInputChange}
            />
          </div>
          <div className="form-group">
            <label>Email</label>
            <input
              type="text"
              name="email"
              value={this.state.email}
              onChange={this.handleInputChange}
            />
          </div>
          <div className="form-group">
            <label>Password</label>
            <input
              type="password"
              name="password"
              value={this.state.password}
              onChange={this.handleInputChange}
            />
          </div>
          <div className="form-group">
            <input type="submit" value="Sign Up" />
          </div>
        </form>
      </div>
    );
  }
}

export default SignUp;

Instead of creating a separate method for handling each input we used the handleInputChange method to update all our states for us dynamically using the target name and value in the event.

What we have to handle next is our form submission and that made me realize, I don't want to handle all the token logic in the SignUp page. We will need a separate service that we can call, to communicate with our endpoint and set our token in our localStorage for us. Let's start creating our Auth service!

Auth

A new addition to our folder structure would be a services folder. This will contain our Auth class and it will handle for us the token exchange and keeping.

Our first method in our class would be for signing up. It would accept a name, email and password, send them to the endpoint in our Node.js app and receive a token or an error message in return depending on the validity of our credentials. After processing our data, we will still return it as we will return the whole promise to be further processed in our SignUp page to check for errors.

class Auth {
  signUp(name, email, password) {
    return fetch(process.env.REACT_APP_ENDPOINT_BASEURL + "api/users/signup", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        name: name,
        email: email,
        password: password,
      }),
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        if (data.auth) {
          localStorage.setItem("token", data.token);
        }
        return data;
      })
      .catch((error) => {
        console.error(error);
      });
  }
}

export default new Auth();

I saved my local endpoint base URL in an environment variable to be able to switch it easily later.

In a successful response we receive a JSON object with an auth attribute indicating whether the authentication happened or not and the token we are going to use.

{
    "auth":true,
    "token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVmMmE4NDgyZTM4ZDZhNmQ0MWE2NDlmNCIsImlhdCI6MTU5NjYyMTk1NCwiZXhwIjoxNTk2NzA4MzU0fQ.ad3E6QL2NbUa3Dh4gkJxZyY-1qZ5nUZNM_eQ2GDz8u8"
}

SignUp

Great! now we have our Auth service ready, all we need to do is import it and call it in our method while handling our submit event.

handleSubmit = (event) => {
    event.preventDefault();
    Auth.signUp(this.state.name, this.state.email, this.state.password).then(
      (data) => {
        if (!data.auth) {
          this.setState({ error: data.msg });
        } else {
          this.props.history.push("/dashboard");
          window.location.reload();
        }
      }
    );
  };

Our Auth service is returning a promise as agreed, so the first thing we check is our auth flag to display the error if exists and if we're all good we would finally be allowed to view our dashboard so we will use the React Router magic feature to navigate to our dashboard by pushing its route to our history prop and reloading our window.

We will just need to add our event to our form

<form onSubmit={this.handleSubmit}>

And our component in our route in App.js

<Route path="/signup" component={SignUp} />

Perfect! It's working! Now it's CSS time, let's add our signup.png in our SignUp folder and add our CSS to SignUp.css

.signup {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .signup .header-image {
    background-image: url("./signup.png");
    width: 30%;
    height: 30%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  .header-title {
    text-shadow: 1px 1px 1px #ff564f;
  }

And add some general CSS to App.css

@import url("https://fonts.googleapis.com/css2?family=Sniglet&display=swap");

* {
  box-sizing: border-box;
  font-family: "Sniglet", cursive;
}
html,
body,
#root,
.app {
  height: 100%;
}

body {
  padding: 0;
  margin: 0;
}

.app {
  background-color: #dae0ec;
  color: #324a58;
}

form {
  width: 30%;
}

form label {
  display: block;
  width: 100%;
  margin-bottom: 0.5rem;
}
form input {
  padding: 0.5rem;
  border: none;
  border-radius: 5px;
  width: 100%;
  margin-bottom: 1rem;
}

form input[type="submit"] {
  background-color: #2568ef;
  color: white;
  box-shadow: 0 0 3px 1px #ffe7e6;
}

Looking good!

SignIn

Our SignIn page would be pretty similar to our SignUp page so that would be a great practice for us to wrap our head around the whole process and review it one more time.

We will start this time by adding a signin method in our Auth service where it will send our email and password to be verified in the signin endpoint and saves our token in localStorage for us.

signIn(email, password) {
    return fetch(process.env.REACT_APP_ENDPOINT_BASEURL + "api/users/signin", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({
        email: email,
        password: password,
      }),
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        if (data.auth) {
          localStorage.setItem("token", data.token);
        }
        return data;
      })
      .catch((error) => {
        console.error(error);
      });
  }

After that, we will create our SignIn folder with our SignIn page and add to it a simple form that accepts an email and password. We will make our inputs controlled by adding the handleInputChange and we will call our Auth service in the handleSubmit method and process the response.

import React from "react";
import "./SignIn.css";
import Auth from "../../services/Auth";

class SignIn extends React.Component {
  constructor() {
    super();
    this.state = {
      email: "",
      password: "",
      error: "",
    };
  }
  handleInputChange = (event) => {
    const target = event.target;
    const value = target.value;
    const name = target.name;

    this.setState({
      [name]: value,
    });
  };

  handleSubmit = (event) => {
    event.preventDefault();
    Auth.signIn(this.state.email, this.state.password).then((data) => {
      if (!data.auth) {
        this.setState({ error: data.msg });
      } else {
        this.props.history.push("/dashboard");
        window.location.reload();
      }
    });
  };

  render() {
    let error = "";
    if (this.state.error !== "") {
      error = <div className="error">{this.state.error}</div>;
    }
    return (
      <div className="signin">
        <div className="header-image"></div>
        <h1 className="header-title">Sign Up</h1>
        {error}
        <form onSubmit={this.handleSubmit}>
          <div className="form-group">
            <label>Email</label>
            <input
              type="text"
              name="email"
              value={this.state.email}
              onChange={this.handleInputChange}
            />
          </div>
          <div className="form-group">
            <label>Password</label>
            <input
              type="password"
              name="password"
              value={this.state.password}
              onChange={this.handleInputChange}
            />
          </div>
          <div className="form-group">
            <input type="submit" value="Sign In" />
          </div>
        </form>
      </div>
    );
  }
}

export default SignIn;

Good! Now let's add signin.png to the SignIn folder and CSS to SignIn.css!

.signin {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.signin .header-image {
  background-image: url("./signin.png");
  width: 30%;
  height: 30%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.header-title {
  text-shadow: 1px 1px 1px #ff564f;
}

And our component in our route in App.js

<Route path="/signin" component={SignIn} />

We have a functional Sign In page!

Chart

To display our metrics in the dashboard, we are going to need a Chart, so let's build our Chart component first before getting carried away with our dashboard!

I chose the canvasjs charts to integrate in the app. They seemed easy enough to use for me, so let's create our components folder, add to it the Chart folder and get started!

I dowloaded the canvasjs.react.js and canvasjs.min.js files as instructed in the tutorial and placed them in my Chart folder. We are going to work with a pie chart, so I followed the straight forward instructions needed for that, customized it to my own taste and defined my own metrics of awesome!

import React from "react";
import CanvasJSReact from "./canvasjs.react";
var CanvasJSChart = CanvasJSReact.CanvasJSChart;

class Chart extends React.Component {
  render() {
    const options = {
      animationEnabled: true,
      backgroundColor: "#dae0ec",
      exportEnabled: false,
      data: [
        {
          type: "pie",
          startAngle: 75,
          toolTipContent: "<b>{label}</b>: {y}%",
          legendText: "{label}",
          indexLabelFontSize: 16,
          indexLabel: "You are {y}% {label}!",
          dataPoints: [
            { y: this.props.metrics.breathtaking, label: "Breathtaking" },
            { y: this.props.metrics.awesome, label: "Awesome" },
            { y: this.props.metrics.amazeballs, label: "Amazeballs" },
            { y: this.props.metrics.phenomenal, label: "Phenomenal" },
            { y: this.props.metrics.mindblowing, label: "Mind-Blowing" },
          ],
        },
      ],
    };
    return <CanvasJSChart options={options} />;
  }
}

export default Chart;

We will receive our percentage of the pie chart as a metrics prop, so our chart is done for now!

Dashboard

It's time to build our Dashboard page! In our Dashboard we want to display our metrics and want to be able to sign out.

We will want to call our endpoint to get our metrics data and send them to our chart so we will need the help of our Auth service once again.

In our Auth service let's add a getDashboard method. We will use this method to retrieve our saved token and use it to construct our header to be authorized to retrieve the information we need from our backend.

getDashboard() {
    return fetch(
      process.env.REACT_APP_ENDPOINT_BASEURL + "api/users/dashboard",
      {
        method: "GET",
        headers: {
          "x-access-token": localStorage.getItem("toke"),
        },
      }
    )
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        return data;
      })
      .catch((error) => {
        console.error(error);
      });
  }

In our Dashboard page, we want our metrics lo load first thing, so we will call this method in componentDidMount and use the returned data to set the values of our metrics.

import React from "react";
import "./Dashboard.css";
import Chart from "../../components/Chart/Chart";
import Auth from "../../services/Auth";

class Dashboard extends React.Component {
  constructor() {
    super();
    this.state = {
      metrics: {
        breathtaking: 18,
        awesome: 49,
        amazeballs: 9,
        phenomenal: 5,
        mindblowing: 19,
      },
    };
  }
  componentDidMount() {
    Auth.getDashboard().then((data) => {
      if (data.success) {
        this.setState({ metrics: data.metrics });
      }
    });
  }
  render() {
    return (
      <div className="dashboard">
        <div className="signout">Sign Out?</div>
        <div className="header-image"></div>
        <h1 className="header-title">Metrics Of Awesome!</h1>
        <div className="chart">
          <Chart metrics={this.state.metrics} />
        </div>
      </div>
    );
  }
}

export default Dashboard;

Amazing! Let's add CSS in Dashboard.css!

.dashboard {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.dashboard .header-image {
  background-image: url("./dashboard.png");
  width: 30%;
  height: 30%;
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

.header-title {
  text-shadow: 1px 1px 1px #ff564f;
}

.dashboard .signout {
  position: absolute;
  top: 0;
  right: 0;
  margin-right: 1rem;
  margin-top: 1rem;
  color: #ea462d;
  font-weight: 600;
  cursor: pointer;
}

.dashboard .chart {
  width: 100%;
}

And we shouldn't forget to update our route in App.js with our component

<Route path="/dashboard" component={Dashboard} />

Now, we have to handle two more things signing out and since users who are not signed in are restricted from accessing the dashboard, we need to check for that, as well.

In our Auth service, let's create both methods and see how we are going to use them!

signedIn() {
  const token = localStorage.getItem("token");
  if (token) {
    return true;
  }
  return false;
}

signOut() {
  localStorage.removeItem("token");
}

In our signedIn method, we will just check the token existence and return a flag accordingly.

In signOut, all we're going to do in that method is clear the token we saved.

Let's move to our Dashboard page and apply those functions! We'll add our handleSignOut method

handleSignOut = () => {
  Auth.signOut();
};

And attach it to the Sign Out label!

<div className="signout" onClick={this.handleSignOut}>
  Sign Out?
</div>

And for our sign in check, we will go all the way up to componentDidMount and redirect to the signin route if the token was missing

componentDidMount() {
    if (!Auth.signedIn()) {
      this.props.history.push("/signin");
      window.location.reload();
    }
    Auth.getDashboard().then((data) => {
      if (data.success) {
        this.setState({ metrics: data.metrics });
      }
    });
  }

Awesome!

The code can be found HERE

By this metrics of awesome, I shall end my seventh baby step towards React greatness, until we meet in another one.

Any feedback or advice is always welcome. Reach out to me here, on Twitter, there and everywhere!

RanaEmad / metrics-of-awesome

A React script with the main purpose of practicing authentication in React. It enables the user to sign up, sign in and view a dashboard with his metrics of awesome.

Exploring DigitalOcean Droplets And Using Them For Creating A PHP Environment

Rana Emad — Sun, 26 Jul 2020 13:20:19 +0000

Hosting is expiring and some serious panicking needs to take place! I had very basic hosting for my personal website and I was not satisfied with it. Once you realize you're not satisfied with your hosting, you think you're going to do proper research before it expires and switch on time, but next thing you find yourself a year later waking up on a renewal notification from your hosting service.

I created a poll a while ago, which helped me collect lots of valuable feedback and I decided to take a chance on DigitalOcean and see if it has what I am looking for.

I signed up using a referral link and got $100 worth of credit, but the catch is, it is valid for only 60 days. If you want to do the same here is my referral link. If you use it, you will get $100 valid for 60 days and once you spend $25, I will also get $25 worth of credit.

Droplets

DigitalOcean speaks in droplets. That's the environment unit used. We have to create a project first and assign our droplet to it. A project can have multiple droplets. While creating a droplet, we have many options to choose from, but I am going to go over what I thought worth highlighting in the pre-creation and post-creation of the droplet.

Pre-Creation

Choosing an image

We can choose one of the provided OS images and its version as the base to build upon for our droplet. Ubuntu is available, so that's a relief! We can also add our own custom image, which is something I will not be doing in the near future.

What I am excited about the most are the Marketplace Apps. They are 1-Click apps preconfigured for certain frameworks or platforms and as the name suggests, require only one click to be up and running on our droplet. I gave the MarketPlace a quick look and it seems to have sufficient apps for the most famous stacks and frameworks. I found apps for LAMP, NodeJS, WordPress, Django, Docker and more. Yes! Make my life easier, Marketplace!

Pricing

I found a wide range of droplet prices that varies from $5 to $960 per month with different sizes and transfer limits. A $5 droplet is what I will be using, it has 1 GB/1 CPU, 25 GB SSD and 1000 GB Transfer and that's more than enough for what I need at the moment. We can also enable automatic backups for our droplets. Backups cost 20% of the droplet price, so for the $5 droplet, we get to pay an extra 1$ per month.

Authentication

We can log onto our droplet using either an SSH key or username and password, which we can set for the root user while creating our droplet and changed any time after our droplet is up and running.

After choosing the most suitable options for our droplet, we can hit Create Droplet and wait for the magic to happen. So let's see the most important features that will allow us to manipulate our droplet!

Post-Creation

Access

Once we have our droplet created with its unique IP, we can click it and view all the ways we can customize it. Of course, we can access our droplet from any terminal using SSH, but through the access tab in our droplet, we can launch a console right in our browser and access it from there, as well and I believe that makes life easier if you have different devices with different OS.

Power

We can shut down our droplet and turn it back on any time, but just note that you will still be billed for your droplet all the time it is shut down. If you don't want to be billed for your droplet, you have to destroy it and this is irreversible.

Resize

As mentioned before, there are various droplets with different prices and sizes. Any time your consumption increases or decreases, you don't have to create a new droplet you can resize yours easily.

Destroy

Besides destroying your droplet, you can use this tab to rebuild your existing droplet with a different image in case you changed your mind about the one you already chose.

We know enough by now, so let's see what our droplet is capable of!

Creating a PHP Environment

The Easy Way

I like my life easy and that's what the MarketPlace tab is for. Since we are speaking PHP, a LAMP or a LEMP app are the first that come to mind, so I went for LEMP as my image, selected the rest of the droplet options and I was up and running in less than a minute.

The droplet appeared with its unique IP in my project and I could access it just by clicking it.

The instructions provided by the LEMP app were pretty clear and if you follow them exactly, you'll get to safe land.

The only unclear thing was the landing page. After you're done and you open your droplet IP in the browser, the landing page states that you should login using SSH to configure the LEMP installation and that gives mixed signals because it is already activated and up and running. It turns out, it is just a static page set as a sample and you can easily edit or replace it in your droplet web root.

The Hard Way

We mentioned that among the available images is Ubuntu, so to create a PHP environment, you can choose the version most suitable to you and then start installing and customizing your own LAMP/LEMP environment step by step like you would on any Linux machine.

The Docker Way

I am no Docker expert, but If you are a Docker person, there is a 1-Click app for it in the MarketPlace, so after following the installation steps, you can pull your image of choice and be good to go!

Great! Now, we have a good idea on what a droplet is, how to create it and how to use it to be an environment ready for PHP! All we need to do is, add our files and map a domain to our droplet to be officially live, but that's another story!

Reach out to me here or on Twitter, if you have better ideas or recommendations for using droplets. A good conversation is always welcome. Stay online!

Inspiration of The Day: React Router

Rana Emad — Tue, 21 Jul 2020 09:00:24 +0000

We have been using React to develop Single Page Applications, so far and it's not that we don't like SPAs, we love them, but we tend to get involved in more complex applications that require multiple pages, don't we? So we need to be prepared if we have multiple pages, we will need to jump gracefully from one route to another and to jump gracefully from one route to another, we will need, guess what?

React Router

Our mission this time is a breeze. We are going to explore the react-router-dom package which works like charm with our create-react-app, so that saves us a lot of pain.

We will practice four basic components provided in react-router-dom:

BrowserRouter

We need to encapsulate our top level or root element in this component to be able to specify our different routes. Usually, since I always use the App component as my start point in the application, it would be a good place for it.
Switch

Just like any other switch statement you met in your journey as a coder, it helps us compare multiple choices and tell us who the winner is and we use it to match the current URL against the routes we specified.
Route

Our Switch needs those choices to be Route components and that's the component where we can specify our path of choice and associate it with its corresponding component.
Link

We use this to replace our usual anchor tag, when we are actually directing to a specific path and it takes care of everything under the hood and creates the anchor tag for us.

Words don't really do the React Router functionality justice, but building web apps does!

Build What?

We all need some visual inspiration from time to time and since the pandemic we have been spending more time inside than outside, so I decided to bring a little outside inside in this web app.

We are going to build an inspiration fetcher for our bored eyes. It is going to fetch us some random images from unsplash.com via API to have ourselves the necessary eye candy to get us through the day.

Get your Inspiration Of The Day HERE

What's The Plan?

We want to have three main pages:

Home page

Where we display the random images we fetched
Single Image page

A page that displays any clicked image from the Home page, enlarged, along with the name of the photographer who took it.
Photographer page

A page to display the photographer's basic information and show off his latest work, when his name is clicked in the Single Image page.

Great! We have our pages. We only need one more component, since we noticed that both the Home and the Photographer pages would need to display an images grid, let's call it Images!

To codeland!

Home

After the installation and initialization of create-react-app, let us start by creating our first page, the Home.

We plan on fetching some random images from unsplash.com and then display them in a grid.

To use the API we will need a free app key. It's a simple process and you can know more about it from the Unsplash official docs.

For our project structure, this time, we have a new addition, pages. We will be separating pages from components. They will remain both normal React components, but the difference will be in the place they're stored. We want to keep ourselves organized and avoid any possible confusion of what goes where.

For our pages, we are going to create a folder structure similar to our components folder structure. We are going to start by creating a pages folder in the src folder, then a Home folder and inside it goes our Home.js and Home.css

In our Home.js we will communicate with the API endpoint and fetch 12 random images in componentDidMount as we are used to and set the response we get, in a state called images.

import React from "react";
import "./Home.css";

class Home extends React.Component {
  constructor() {
    super();
    this.state = {
      images: [],
    };
  }
  componentDidMount() {
    fetch("https://api.unsplash.com/photos/random?count=12", {
      headers: {
        Authorization: `Client-ID YourApiKey`,
      },
    })
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          images: data,
        });
      })
      .catch((error) => console.error(error));
  }
  render() {
    return
        (<div className="home">
            <h1 className="header">Inspiration Of The Day</h1>
         </div>);
  }
}

export default Home;

Now we need to create the Images component we agreed upon to have our page complete, but first, let's include our Home page in our App.js file to display the changes as we go!

import React from "react";
import "./App.css";
import Home from "./pages/Home/Home";

class App extends React.Component {
  render() {
      return (
        <div className="app">
          <Home />
        </div>
      );
    }
}

export default App;

Images

After creating our components folder in our src folder and including an Images folder in it, we can now fill our Images.js and Image.css files to display our inspirational images.

We will have a simple grid of the images and we plan on having those images passed to us as an array in a prop.

import React from "react";
import "./Images.css";

class Images extends React.Component {
  render() {
    return (
      <div className="images">
        {this.props.images.map((data) => (
          <img key={data.id} alt={data.description} className="image" src={data.urls.small} />
        ))}
      </div>
    );
  }
}

export default Images;

Nice! Now, let's include our Images component in our Home page and pass those images as a prop!

render() {
    return (
      <div className="home">
        <h1 className="header">Inspiration Of The Day</h1>
        <Images images={this.state.images} />
      </div>
    );
  }

Looking good! But it will look even better if we throw some CSS here and there

Images.css

.images {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  grid-gap: 2rem;
  padding: 0 5% 5% 5%;
  align-items: stretch;
}

.images .image {
  width: 100%;
  height: 100%;
  max-height:350px;
  border: teal 10px solid;
}

.image img{
    width: 100%;
    height: 100%;
}

App.css

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');
* {
  box-sizing: border-box;
}

html,
body,
#root,
.app {
  height: 100%;
}

body {
  background-color: #ff5c5c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1600 800'%3E%3Cg stroke='%23000' stroke-width='65.5' stroke-opacity='0.1' %3E%3Ccircle fill='%23ff5c5c' cx='0' cy='0' r='1800'/%3E%3Ccircle fill='%23f3535d' cx='0' cy='0' r='1700'/%3E%3Ccircle fill='%23e64b5e' cx='0' cy='0' r='1600'/%3E%3Ccircle fill='%23d9435e' cx='0' cy='0' r='1500'/%3E%3Ccircle fill='%23cb3b5d' cx='0' cy='0' r='1400'/%3E%3Ccircle fill='%23be355c' cx='0' cy='0' r='1300'/%3E%3Ccircle fill='%23b02f5a' cx='0' cy='0' r='1200'/%3E%3Ccircle fill='%23a22958' cx='0' cy='0' r='1100'/%3E%3Ccircle fill='%23942455' cx='0' cy='0' r='1000'/%3E%3Ccircle fill='%23862052' cx='0' cy='0' r='900'/%3E%3Ccircle fill='%23781b4e' cx='0' cy='0' r='800'/%3E%3Ccircle fill='%236a1849' cx='0' cy='0' r='700'/%3E%3Ccircle fill='%235d1444' cx='0' cy='0' r='600'/%3E%3Ccircle fill='%2350103e' cx='0' cy='0' r='500'/%3E%3Ccircle fill='%23430d38' cx='0' cy='0' r='400'/%3E%3Ccircle fill='%23370a32' cx='0' cy='0' r='300'/%3E%3Ccircle fill='%232b062b' cx='0' cy='0' r='200'/%3E%3Ccircle fill='%23210024' cx='0' cy='0' r='100'/%3E%3C/g%3E%3C/svg%3E");
  background-attachment: fixed;
  background-size: cover;
  /* background by SVGBackgrounds.com */
  font-family: "Pacifico", cursive;
  color: #c2bcc7;
}

Home.css

.home .header {
  text-align: center;
  font-size: 3rem;
  text-shadow: -11px -1px 5px #210024;
}

Lovely! We have our first page! Now it's time to start working on what this is all about, our router.

We will start in our console by running:

npm install react-router-dom

Now, let's get three out of the four components we mentioned before to work and import them at the beginning of App.js

import { BrowserRouter, Switch, Route } from "react-router-dom";

We need to wrap our app content in a BrowserRouter component as agreed to let our router know where to look. We will also need to create a Switch component that wraps our Route components to add the paths of our multiple routes.

return (
    <BrowserRouter basename={process.env.PUBLIC_URL}>
      <div className="app">
        <Switch>
             <Route path="/" exact component={Home} />
        </Switch>
      </div>
    </BrowserRouter>
  );

Adding the basename will probably make no difference to you on your local environment and your code will work just fine without it, but you'll thank me later when you deploy. The create-react-app takes care of setting the correct absolute path in the PUBLIC_URL env variable, but our react-router-dom would not be aware of that path unless we either prepend that variable to every route path or pass it to the basename in our BrowserRouter component and it will automatically take care of the prepending for us. So if you don't want your URLs all messed up on the server, remember this step.

Now we have another keyword used, exact. When we pass this to our Route component, we tell it to respond to ONLY the specified path with the specified component. If we didn't add that keyword, we can append any number of words or parameters to our path and it will still respond with the Home component.

SingleImage

We have our images in place and we should start creating our SingleImage page to display the clicked image in an enlarged size, but before we do that, we need to adjust our Images component and add to each image the fourth component we mentioned, Link.

We will wrap our img tag with Link and direct that path to single-image. Also, to know which image we are viewing, we are also going to pass along the image id we got from the data we fetched.

import React from "react";
import "./Images.css";
import { Link } from "react-router-dom";

class Images extends React.Component {
  render() {
    return (
      <div className="images">
        {this.props.images.map((data) => (
         <Link key={data.id} to={"/single-image/"+data.id} className="image" > <img alt={data.description} src={data.urls.small} /></Link>
        ))}
      </div>
    );
  }
}

export default Images;

Now, let's add our SingleImage page. We will have just this one enlarged image in our page and a link to the photographer who took it.

We will fetch the image data using the id parameter we passed in our link. We can access the parameters sent in Link components using this.props.match.params.ourParameterName

import React from "react";
import "./SingleImage.css";
import { Link } from "react-router-dom";

class SingleImage extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      image: {},
    };
  }
  componentDidMount() {
    fetch("https://api.unsplash.com/photos/" + this.props.match.params.id, {
      headers: {
        Authorization: `Client-ID ${process.env.REACT_APP_API_KEY}`,
      },
    })
      .then((response) => response.json())
      .then((data) => {
        this.setState({
          image: data,
        });
      })
      .catch((error) => console.error(error));
  }
  render() {
    if (this.state.image.user && this.state.image.urls) {
      return (
        <div className="single-image">
          <figure>
            <img
              alt={this.state.image.description}
              src={this.state.image.urls.full}
            />
            <figcaption>
              Photographed By{" "}
              <span className="image-photographer">
                <Link to={"/photographer/" + this.state.image.user.id}>
                  {this.state.image.user.name}
                </Link>
              </span>
            </figcaption>
          </figure>
        </div>
      );
    }
    return "";
  }
}

export default SingleImage;

I faced a problem where sometimes the nested objects where undefined, so I added an if condition to only render when we have all of our data ready. I also added a Link component to the photographer, the same way we did with image.

To see everything clearly, let's add our CSS in SingleImage.css, before moving on to the photographer's page!

.single-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.single-image figure {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
}

.single-image figcaption,
.single-image figcaption .image-photographer {
  text-align: center;
  color: #c2bcc7;
  font-family: "Pacifico", cursive;
}
.single-image figcaption {
  font-size: 2rem;
  text-shadow: -11px -1px 5px #210024;
}

.single-image figcaption .image-photographer {
  text-shadow: none;
  font-size: 3rem;
}
.single-image figcaption .image-photographer a {
  color: #c2bcc7;
}

.single-image figure img {
  width: 70%;
  height: 80%;
}

Purrrfect! We can officially add the path to our Switch component in the App.js file!

render() {
    return (
      <BrowserRouter>
        <div className="app">
          <Switch>
            <Route path="/single-image/:id" component={SingleImage} />
            <Route path="/" exact component={Home} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }

Annnnd it's working!

Photographer

For our Photographer page, we need to fetch two different sorts of data, the photographer's basic information and the photographer's latest photos.

In our componentDidMount we will call the two endpoints that enable us to do so and update our states with the resulting data.

import React from "react";
import "./Photographer.css";
import Images from "../../components/Images/Images";

class Photographer extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      user: {},
      images: [],
    };
  }
  componentDidMount() {
    fetch(
      "https://api.unsplash.com/users/" + this.props.match.params.username,
      {
        headers: {
          Authorization: `Client-ID ${process.env.REACT_APP_API_KEY}`,
        },
      }
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        this.setState({
          user: data,
        });
      })
      .catch((error) => console.error(error));

    fetch(
      "https://api.unsplash.com/users/" +
        this.props.match.params.username +
        "/photos?order_by=latest",
      {
        headers: {
          Authorization: `Client-ID ${process.env.REACT_APP_API_KEY}`,
        },
      }
    )
      .then((response) => response.json())
      .then((data) => {
        console.log(data);
        this.setState({
          images: data,
        });
      })
      .catch((error) => console.error(error));
  }
  render() {
    return (
      <div className="photographer">
        <div className="info">
          <h1 className="header">{this.state.user.name}</h1>
          <div className="info-block">
            <p className="header">Bio</p>
            <p>{this.state.user.bio}</p>
          </div>
          <div className="info-block">
            <p className="header">Location</p>
            <p>{this.state.user.location}</p>
          </div>
          <div className="info-block">
            <p className="header">Portfolio</p>
            <p><a href={this.state.user.portfolio_url}>{this.state.user.portfolio_url}</a></p>
          </div>
        </div>
        <div className="photographer-images">
          <h1 className="header"> Latest Work</h1>
          <Images images={this.state.images} />
        </div>
      </div>
    );
  }
}

export default Photographer;

Working well, but CSS is needed in Photographer.css

.photographer {
  display: grid;
  grid-template-columns: 2fr 8fr;
}

.photographer .info {
  margin-left: 2rem;
}

.info .info-block .header {
  font-weight: 900;
  color: teal;
}

.info .info-block a {
  color: #c2bcc7;
}

.photographer .photographer-images .header {
  text-align: center;
}

We're done! We have our inspiration of the day and every day!

The code can be found HERE

By this mini inspiration, I shall end my sixth baby step towards React greatness, until we meet in another one.

Any feedback or advice is always welcome. Reach out to me here, on Twitter, there and everywhere!

RanaEmad / inspiration-of-the-day

A React script that fetches a number of random images using the unsplash API and enables the user to view those images enlarged and view their photographers page with his latest work.

Make Your Website Social Media Card-able on Twitter, Facebook and More

Rana Emad — Sat, 11 Jul 2020 09:18:22 +0000

We all want our websites to be shared on Twitter, Facebook and all the different channels of social media. Whether they are our own websites that have our blogs and profiles or websites we built for other people. We all value those valuable clicks, so as a means of seduction to make our links clickable, we need to make them look attractive and pretty.

Instead of just sharing a bare link that doesn't give us enough indication of what the page content is about, we can turn it into a beautiful card that represents the content on each page of our website.

Open Graph

Years ago, Facebook granted us Open Graph to turn our links into lovely rich graph object that can be shared easily and beautifully. Open Graph uses meta tags to communicate with our website and grab the desired information we want displayed in our cards. You can know more about it on the Open Graph Protocol website.

They are also not only available for Facebook, they are widely used and are available for Twitter, LinkedIn, Pinterest and many more social media platforms.

Meta Tags

In order to build our cards, we have to pass our desired data through meta tags. We have lots of meta tags and you can find them all HERE, but if we're going to talk about the basic meta tags that are capable of making our card look good, then we have to mention the following 4 required tags:

og:title

Your title of choice
og:type

Whether it is a website or a video or an audio, ...etc.
og:image

The image you would like to display on your card and we're going to talk later about its
dimensions and best practices
og:url

The URL you want displayed in the card

Where?

Once we open our head tag in our HTML structure, we can include all the meta tags we want.

<head>
    <meta property="og:title" content="I am a title" /> 
    <meta property="og:type" content="website" />
    <meta property="og:url" content="IamAUrl.yes" />
    <meta property="og:image" content="imageURL.cool" />
</head>

Card Image Best Practices

Choosing an image should depend on the page content itself. Each card image should represent each page and should not be something generic for all the website pages. If it's a blog post, we can add the cover image of the post, if it's an e-commerce item, we can add the image of the item and so on.

Recommended Size

Facebook

The perfect fit: 1200x628
Minimum allowed dimensions 200x200
Maximum size 8MB

If the image is smaller than 600x315, it will not be displayed as a large full width image. It will be displayed in smaller size on the side.

You can find out more in Facebook's official docs

Twitter

The perfect fit is not specified officially, but after some googling 1200x628 would work fine for a large summary card, as well
Minimum allowed dimensions: 300x157
Maximum allowed dimensions: 4096x4096
Maximum size: 5MB

Twitter has its own meta tags for further customization. You can find all the information you need about them in the official Twitter docs.

To use any of these tags, there are 2 required tags to be added:

twitter:title
twitter:card

What I am going to highlight is the twitter:card meta tag. There are 2 views to choose from for your card and they depend on the value you give to that tag.

You can set it to either:

summary

<meta name="twitter:card" content="summary">

summary_large_image

<meta name="twitter:card" content="summary_large_image">

The perfect fit: 1200x627
Minimum allowed width: 200px

How do I know it works?

Social media websites will not leave us clueless on this one. Each website provides a tool we can use to view our progress and validate our cards with no surprises.

Now we have all what we need to make our websites look superb on social media!

Ping me @R_anaEm with your favorite website cards and show off your own!

Whiteboard: React Hooks

Rana Emad — Fri, 03 Jul 2020 10:01:23 +0000

We have talked before in Text Recorder: React States, Event Handling and Conditional Rendering about states and how to set them and handle their changes. That was while using Class components, but of course we don't have to use Class components to get all the perks, do we?

Let's find out how we can do the same for Function components!

Hooks

Hooks allow us to use states and lifecycle methods within a Function component. They were not always there, they have been recently introduced in React 16.8

They are Javascript functions, but they can NOT be called inside loops, conditions, or nested functions. They always have to be called at the top level of your React function.

We are going to discuss 2 main Hooks:

useState
useEffect

UseState

To set a state in a Class component, we used this.state in the constructor or this.setState() anywhere else. Our code would look something like this:

this.setState({
        dummyState: "dum dum"
});

To use Hooks to rewrite the above code, we are going to need the help of useState. It accepts a parameter that can be used to set the initial value of the state and returns an array with its first element as the current value of this state and its second element as a function to be used later to set the value of the state.

const [dummyState, setDummyState]= useState("dum dum");

We can name them anything we want, of course, but the convention goes as above. Also, it is common to use the array destructuring method to easily access the returned values.

To update the state's value later, we simply call the returned function with the updated value.

setDummyState("dum dum dum");

useEffect

We previously learned about componentDidMount, componentDidUpdate, and componentWillUnmount in Woof Vs. Meow: Data Fetching and React Component Lifecycle. Our useEffect Hook can act as an equivalent to all of them combined. Isn't that some cool Hook?

useEffect accepts a function as a parameter and also an optional array. Let's translate the following code to Hooks to get a better understanding!

Both

componentDidMount(){
    functionThatFetchesSomeData();
}

And

componentDidUpdate(){
    functionThatFetchesSomeData();
}

Can be translated to the same thing by the useEffect Hook

useEffect(()=>{
    functionThatFetchesSomeData();
});

As mentioned before, the useEffect Hook acts as componentDidUpdate. It re-runs whenever any update occurs. Sometimes we want to filter when to run our useEffect and that's why the second array parameter exists. By passing a certain state to this array, we would be telling our Hook to compare its current value with its previous value and only if they were different from each other then our code would run.

useEffect(()=>{
    functionThatFetchesSomeData();
},[userId]);

We can have multiple useEffect Hooks and each can have its own filter and its own code.

If we only want to fetch data when the component mounts and we don't want to rerun our code on update, we can trick our Hook and provide it with an empty array as the second argument and by that it would never detect any changes in the array and will only run once.

Our final method to discuss is componentWillUnmount which is known to be used as a clean up method. To let our Hook know what to clean up all we have to do is return a function with our instructions.

useEffect(()=>{
    functionThatOpensAnImaginaryConnection();

    return ()=>{
        functionThatClosesAnImaginaryConnection();
    }

});

That's enough to get us started on building something! I am already Hooked!

Build What?

Do you know how sometimes when you are explaining something, you just feel like backing your theory up with a disfigured hand-drawn diagram? Or when you're trying to solve a problem and you need to scribble some notes to understand it better?

Today, we are going to build our own whiteboard to draw upon all the disfigured shapes and scribbles we want!

Experiment a little HERE

What's The Plan?

We want to have a huge white space to draw on, so there goes our first component, let's call it Board! We also, want to have a couple of controls to change the color and erase our content, so that will add to our application three more components; one for Controls, the other for Color and another for Eraser.

Let's roll!

Board

By now, we should be able to install create-react-app and create our folder structure with our eyes blindfolded, so I am going to sit this one out.

The first thing we need in our Board component is a canvas element. Usually, to add 2d context to our canvas and make it drawable, we select it using its id, but in React no selections with id-s or classes take place. Instead, to do that we are going to use refs.

We have talked previously, about handling refs in Class components and they're not so different in Function components. Let's see how they look like!

import React from "react";
import "./Board.css";

function Board() {
  const canvasRef = React.useRef(null);
  return (
    <div className="board">
      <canvas ref={canvasRef} />
    </div>
  );
}

export default Board;

Let's add our Board to our App to view the changes as we are used to!

import React from "react";
import "./App.css";
import Board from "./components/Board/Board";

function App() {
  return (
    <div className="app">
      <Board />
    </div>
  );
}

export default App;

Now we are going to start using our Hooks. Let's import useState and start by adding our context!

import React,{useState} from "react";
import "./Board.css";

function Board() {
  const canvasRef = React.useRef(null);
  const [ctx, setCtx] = useState({});
  return (
    <div className="board">
      <canvas ref={canvasRef} />
    </div>
  );
}

export default Board;

We are going to need to set our context for the canvas the first thing. In Class components we would have used componentDidMount, which as we agreed in our case would be replaced by useEffect Hook. So let's import it and set our context!

import React, { useState, useEffect } from "react";
import "./Board.css";

function Board() {
  const canvasRef = React.useRef(null);
  const [ctx, setCtx] = useState({});
  useEffect(() => {
    let canv = canvasRef.current;

    let canvCtx = canv.getContext("2d");
    canvCtx.lineJoin = "round";
    canvCtx.lineCap = "round";
    canvCtx.lineWidth = 5;
    setCtx(canvCtx);
  }, [ctx]);

  return (
    <div className="board">
      <canvas ref={canvasRef} />
    </div>
  );
}

export default Board;

I gave the context some basic settings and added ctx as my second parameter to useEffect to trigger it only when ctx changes and avoid entering an infinite loop of setting its value.

Great! Now we need to take care of the events we will use.

We would need to handle 3 major events:

onMouseDown when we click the mouse to start drawing
onMouseMove when we move the mouse while drawing
onMouseUp when we leave the mouse to stop drawing

Let's add these events to our canvas element

<canvas
  ref={canvasRef}
  onMouseDown={handleMouseDown}
  onMouseUp={handleMouseUp}
  onMouseMove={handleMouseMove}
/>

handleMouseDown

For this event we are going to need a flag to keep track of whether the drawing process is started or not and give it an initial state of false

const [drawing, setDrawing] = useState(false);

And in our function we are just going to set it to true

function handleMouseDown() {
  setDrawing(true);
}

handleMouseUp

In this function we are going to do the exact opposite to what we did in the handleMouseDown function

function handleMouseUp() {
  setDrawing(false);
}

handleMouseMove

This is our main function that handles the drawing. We need to move to the last mouse position we detected and draw a line from that point all the way to our current mouse position.

So, first thing is we are going to record the previous position with a start value of (0,0)

const [position, setPosition] = useState({ x: 0, y: 0 });

We also need to record our canvas offset. In our case the canvas would be located at the top left corner of the window, but maybe we would like to add another element or some CSS that will shift its position, later.

const [canvasOffset, setCanvasOffset] = useState({ x: 0, y: 0 });

To guarantee that our mouse position gives us the expected results, we will record the canvas left and top offset, when setting our context.

useEffect(() => {
    let canv = canvasRef.current;

    let canvCtx = canv.getContext("2d");
    canvCtx.lineJoin = "round";
    canvCtx.lineCap = "round";
    canvCtx.lineWidth = 5;
    setCtx(canvCtx);

    let offset = canv.getBoundingClientRect();
    setCanvasOffset({ x: parseInt(offset.left), y: parseInt(offset.top) });
  }, [ctx]);

After that, we will easily be able to detect the position by subtracting that offset from our mouse position. Now, we have our previous and current position. Before we begin our path, we just need to check our drawing flag to make sure the process is ongoing and after we're done we will set our position for the next stroke.

function handleMouseMove(e) {
    let mousex = e.clientX - canvasOffset.x;
    let mousey = e.clientY - canvasOffset.y;
    if (drawing) {
      ctx.strokeStyle = "#000000";
      ctx.beginPath();
      ctx.moveTo(position.x, position.y);
      ctx.lineTo(mousex, mousey);
      ctx.stroke();
    }
    setPosition({ x: mousex, y: mousey });
  }

Also, we will need to set the position once the mouse is clicked to have a position to move to for our next stroke, so we need to modify our handleMouseDown function.

function handleMouseDown(e) {
  setDrawing(true);
  setPosition({
      x: parseInt(e.clientX - canvasOffset.x),
      y: parseInt(e.clientY - canvasOffset.y),
    });
}

Cool! Now, let's add some CSS to our App.css

* {
  box-sizing: border-box;
}
html,
body,
#root {
  width: 100%;
  height: 100%;
}
.app {
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

And our Board.css

.board {
  background-color: white;
  cursor: crosshair;
  margin: 0 auto;
  position: relative;
  width: 100%;
  overflow: hidden;
  flex: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

All of that is wonderful and I can draw on my whiteboard, but there was one problem I was left to struggle with. I don't work with canvas often, so I spent some significant amount of time trying to figure out why the lines look pixelated and realizing how much I love backend development. I found out that this was because I was styling the canvas height with CSS and somehow that messes it up and I should just dynamically assign the window's inner width and inner height to the canvas width and height attributes or the parent's offset width and offset height.

To achieve that, let's add a new ref for the canvas parent to be able to access its offset width and height!

const parentRef = React.useRef(null);

We should also add it to the parent element.

return (
    <div className="board" ref={parentRef}>
      <canvas
        ref={canvasRef}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onMouseMove={handleMouseMove}
      />
    </div>
  );

We can assign the width and height right before we set our context.

useEffect(() => {
  let canv = canvasRef.current;
  canv.width = parentRef.current.offsetWidth;
  canv.height = parentRef.current.offsetHeight;

  let canvCtx = canv.getContext("2d");
  canvCtx.lineJoin = "round";
  canvCtx.lineCap = "round";
  canvCtx.lineWidth = 5;
  setCtx(canvCtx);

  let offset = canv.getBoundingClientRect();
  setCanvasOffset({ x: parseInt(offset.left), y: parseInt(offset.top) });
}, [ctx]);

Lovely! Now we can draw freely on our board!

Controls

It's time to take our whiteboard a step further and add the Controls component. It will only have a couple of buttons, so I designed it to lay on top of the canvas.

In the Controls component we will just add a simple structure to contain our buttons

import React from "react";
import "./Controls.css";

function Controls() {
  return <div className="controls"></div>;
}

export default Controls;

And add some CSS in Controls.css to position it on our canvas

.controls {
  position: absolute;
  top: 0;
  display: flex;
  justify-content: center;
  width: auto;
}

Color

Let's move on to our Color component! We need a color picker. I chose the react-color package, which can be installed by running:

npm install react-color --save

While we're at it, I also want to add icons to the controls, so we can install the react-fontawesome package by running:

npm i --save @fortawesome/fontawesome-svg-core  @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

Let's start by importing Font Awesome and adding the icon for the color!

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPalette } from "@fortawesome/free-solid-svg-icons";

function Color() {
  return (
    <div className="color">
      <FontAwesomeIcon
                title="choose color"
        className="fa-icon"
        icon={faPalette}
      />
    </div>
  );
}

export default Color;

Now, we need to add the color picker. I like the way the ChromePicker looks so I will import it.

I only want the picker to pop up once I click the palette icon, so I will need to add a flag to detect whether it was clicked or not, some custom CSS and handle click events.

import React, { useState } from "react";
import { ChromePicker } from "react-color";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faPalette } from "@fortawesome/free-solid-svg-icons";

function Color(props) {
  const popover = {
    position: "absolute",
    zIndex: "2",
  };
  const cover = {
    position: "fixed",
    top: "0px",
    right: "0px",
    bottom: "0px",
    left: "0px",
  };
  const [displayed, setDisplayed] = useState(false);

  function handleClick() {
    setDisplayed(true);
  }

  function handleClose() {
    setDisplayed(false);
  }

  return (
    <div className="color">
      <FontAwesomeIcon
        onClick={handleClick}
        title="choose color"
        className="fa-icon"
        icon={faPalette}
      />
      {displayed ? (
        <div style={popover}>
          <div style={cover} onClick={handleClose} />
          <ChromePicker />
        </div>
      ) : null}
    </div>
  );
}

export default Color;

Good! Now let's add our Color component to our Controls component

import React from "react";
import "./Controls.css";
import Color from "../Color/Color";

function Controls() {
  return <div className="controls">
      <Color />
  </div>;
}

export default Controls;

And our Controls component to our Board component to see how far we've gone.

return (
    <div className="board" ref={parentRef}>
    <Controls />
      <canvas
        ref={canvasRef}
        onMouseDown={handleMouseDown}
        onMouseUp={handleMouseUp}
        onMouseMove={handleMouseMove}
      />
    </div>
  );

Okay, now, we need to add another thing to our Board component. We haven't handled how the selected color we choose from the color picker is going to reflect in drawing on our board.

Let's use our Hooks to track our color value and set its default value as black.

const [color, setColor] = useState("#000000");

Now let's modify our handleMouseMove function to have the strokeStyle set as the color state!

function handleMouseMove(e) {
    let mousex = e.clientX - canvasOffset.x;
    let mousey = e.clientY - canvasOffset.y;
    if (drawing) {
      ctx.strokeStyle = color;
      ctx.beginPath();
      ctx.moveTo(position.x, position.y);
      ctx.lineTo(mousex, mousey);
      ctx.stroke();
    }
    setPosition({ x: mousex, y: mousey });
  }

One more thing, we want that color state to be updated when the color picker changes, so we are going to add another function that handles that and send it to our Controls component as a prop and from there, also send it to the Color component as a prop.

function handleColor(color) {
  setColor(color);
}

return (
  <div className="board" ref={parentRef}>
    <Controls handleColor={handleColor} />
    <canvas
      ref={canvasRef}
      onMouseDown={handleMouseDown}
      onMouseUp={handleMouseUp}
      onMouseMove={handleMouseMove}
    />
  </div>
);

And in our Controls component, let's pass the prop to the Color component!

function Controls(props) {
  return <div className="controls">
      <Color handleColor={props.handleColor} />
  </div>;
}

Now, let's go back to our Color component and add a state to track the color changes!

const [color, setColor] = useState("#000000");

After that, we can handle our color picker change using our prop. We want the hex value of the color which is enclosed in the parameter sent to the handleChange function.

function handleChange(pickerColor) {
    setColor(pickerColor.hex);
    props.handleColor(pickerColor.hex);
  }

We also want to update our picker itself with the selected color.

<ChromePicker color={color} onChange={handleChange} />

Perfect! Now, our color is reflecting! Let's add some CSS in our Controls.css for our button to look pretty.

.controls .fa-icon {
  cursor: pointer;
  font-size: 3rem;
  margin: 0.5rem;
  padding: 0.5rem;
  border-radius: 30%;
  box-shadow: 0 0 6px black;
  z-index: 2;
  color: #071a54;
  background: linear-gradient(
    90deg,
    rgba(174, 238, 237, 1) 0%,
    rgba(181, 23, 23, 1) 100%
  );
}

Eraser

Our work is almost done, now we just need to be able to use our eraser. I am going to cheat here and just change the color to white. We can use the ctx.globalCompositeOperation = 'destination-out'; method, but changing the color to white would just do the trick for us.

Our component will look like this

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faEraser } from "@fortawesome/free-solid-svg-icons";

function Eraser(props) {
  function handleEraser(e) {
    e.preventDefault();
    props.handleColor("#ffffff");
  }

  return (
    <div className="eraser">
      <FontAwesomeIcon
                title="erase"
        icon={faEraser}
        className="fa-icon"
        onClick={handleEraser}
      />
    </div>
  );
}

export default Eraser;

In our Controls component, we will pass the same prop we passed to our Color component to make it reflect in our board as we draw.

import React from "react";
import "./Controls.css";
import Color from "../Color/Color";
import Eraser from "../Eraser/Eraser";

function Controls(props) {
  return (
    <div className="controls">
      <Color handleColor={props.handleColor} />
      <Eraser handleColor={props.handleColor} />
    </div>
  );
}

export default Controls;

And here it is! Our fully functional whiteboard!

The code can be found HERE

By this mini whiteboard, I shall end my fifth baby step towards React greatness, until we meet in another one.

Any feedback or advice is always welcome. Reach out to me here, on Twitter, there and everywhere!

RanaEmad / whiteboard

A React script that acts as a whiteboard for users to draw freely on

Woof Vs. Meow: Data Fetching and React Component Lifecycle

Rana Emad — Tue, 23 Jun 2020 13:49:40 +0000

It's about time we start adding a data layer to our delicious React application cake. Let's see when, where and how we should add this data!

Fetch Me Some Data

We have been serving static React sites so far, probably that won't be the case for long. We will need to exchange data in our applications, whether it is from our own backend or from remote endpoints. For that APIs are life! Basically, React communicates with anything and everything using APIs.

React is flexible and wouldn't mind the language as long as it's a response that can be parsed and read. You can use REST, GraphQL and even SOAP, but we will stick to REST APIs for now.

We have many options, but I'd like to highlight that Javascript has blessed us with fetch and also axios's advantages have been bestowed on us, so we are well prepared, when it comes to APIs in Javascript.

Component Lifecycle Methods

Before we fetch our data, we need to know our component's lifecycle first and how it works to be able to call our endpoints and update our data in the most suitable location for it without disturbing the peace of our lifecycle.

I found the following useful to play with, to get to know these methods

Provided by https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/

And here is my interpretation of the most common lifecycle methods we are more likely to meet:

render()

Our famous render method have been helping us display our elements to the screen ever since we've started. It is the only required method and it is expected to return our elements whether in their normal form as JSX elements or in an array form or a textual form in case the output is a string or a number.

No changes to state or props or any sort of modification should take place in this method, as it is only as, the name suggests, for rendering.

constructor()

The constructor method is called before the component is mounted.

It is used for only 2 purposes:

Setting our states using this.state
Binding event handler methods

If we are not doing any of those, implementing a constructor for our component would not be necessary.

componentDidMount()

This method is called right after the component is mounted or in other words inserted into the tree. This is our go to method, if we want to load things first thing after the component is initiated, so it is good for fetching data from remote endpoints and adding event listeners.

componentDidUpdate()

This method is invoked immediately after the occurrence of an update, be it a prop, a state or any other update.

It is passed the prevProps and prevState as parameters to enable us to assign our change to a certain case determined by the comparison of our current value and our previous value.

We can also set our states in this method, but we must wrap it in a condition or else we will end up stuck in an infinite loop.

componentWillUnmount

This method can act as our tear down method. It is called immediately before a component is unmounted or in other words destroyed. We can use it for clean up like resetting counters or clearing arrays or anything we want to get rid of when the component has fulfilled its purpose.

Well, that covers the basics. We have our lifecycle methods in a row, let's start building!

Build What?

We are going to make humanity's sweethearts compete for its love. We are building a React script that runs a mini contest between dogs and cats. We are going to fetch random images of dogs versus random images of cats with the help of APIs and calculate the accumulated score to determine our final winner.

Choose your fighter HERE

What's the Plan?

What we want is to have 3 rounds. For each round we want to fetch 2 images from 2 endpoints, one for a dog and one for a cat. We want to click a button in each round to decide which image is the winner and at the end of the 3 rounds, we will calculate the total score and declare our winner!

What we need:

A Dog component to handle the dog image fetching and have the button for adding dog points
A Cat component to handle the cat image fetching and have the button for adding cat points
A Winner component to declare our winner at the end of the rounds
Our App component to bootstrap it all together

Off we go!

Dog

After running npx create-react-app . in our root folder of choice and laying out our folder structure by adding our components folder inside our src folder, let's start by adding our Dog component!

We will create a Dog folder and add to it a Dog.js file and a Dog.css file.

In our component, we are planning on having the image we are going to fetch and a button to increase the dog score, so the basic layout will be as follows:

import React from "react";
import "./Dog.css";

class Dog extends React.Component {
  constructor() {
    super();
    this.state = {
      img: "",
    };
  }

  handleClick=()=>{}

  render() {
    return (
      <div className="dog">
        <img alt="dog" src={this.state.img} />
        <button className="btn btn-bright" onClick={this.handleClick}>WOOF!</button>
      </div>
    );
  }
}

export default Dog;

Let's leave our handleClick empty for now and see how we are going to deal with it later.

Now, we want to fetch the image. I have chosen https://dog.ceo/ as my API, but feel free to use any API of your choice.
I will set my endpoint in a url variable in the constructor for ease of use when calling it later.

constructor() {
    super();
    this.url = "https://dog.ceo/api/breeds/image/random";
    this.state = {
      img: "",
    };
  }

I am going to use good -not so old- fetch, but if you prefer axios don't let me stop you!

fetchImg = () => {
    fetch(this.url)
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        if (data.status === "success") {
          this.setState({ img: data.message });
        }
      })
      .catch((error) => {
        console.error(error);
      });
  };

My first intuition was to call the fetchImg method in the constructor, but remember, it is advised to avoid introducing any side-effects or subscriptions there and as we discussed earlier, components have a certain lifecycle to be respected, so we are not going to call it there.

We want to fetch the image immediately after the component mounts, so the most suitable lifecycle method for that is componentDidMount

componentDidMount() {
    this.fetchImg();
  }

Lovely! Now let's add our Dog component to our App.js file to display what we've done so far.

import React from "react";
import "./App.css";
import Dog from "./components/Dog/Dog";

function App() {
  return (
    <div className="app">
      <Dog />
    </div>
  );
}

export default App;

Cat

Since everything is working as expected, let's repeat the same process for cat, but with a different API. My API of choice is https://thecatapi.com/

It requires an API key, but don't worry, you can sign up and get one for free.

import React from "react";
import "./Cat.css";

class Cat extends React.Component {
  constructor() {
    super();
    this.url = "https://api.thecatapi.com/v1/images/search";
    this.state = {
      img: "",
    };
  }

  componentDidMount() {
    this.fetchImg();
  }
  fetchImg = () => {
    fetch(this.url, {
      headers: {
        "x-api-key": "YOUR API KEY GOES HERE",
      },
    })
      .then((response) => {
        return response.json();
      })
      .then((data) => {
        if (data.length > 0 && data[0].url) {
          this.setState({ img: data[0].url });
        }
      })
      .catch((error) => {
        console.error(error);
      });
  };

  handelClick=()=>{}

  render() {
    return (
      <div className="cat">
        <img alt="cat" src={this.state.img} />
        <button className="btn btn-bright" onClick={this.handleClick}>MEOW!</button>
      </div>
    );
  }
}

export default Cat;

We will also add it to App.js

import React from "react";
import "./App.css";
import Dog from "./components/Dog/Dog";
import Cat from "./components/Cat/Cat";

function App() {
  return (
    <div className="app">
      <Dog />
      <Cat />
    </div>
  );
}

export default App;

App

Now, that we have have both our components set, we are going to need to add states to keep each component's score and what round we're in, so let's convert our function component to a class component and add our states!

import React from "react";
import "./App.css";
import Dog from "./components/Dog/Dog";
import Cat from "./components/Cat/Cat";

class App extends React.Component {
constructor() {
    super();
    this.state = {
      round: 1,
      catScore: 0,
      dogScore: 0,
    };
  }
  render() {
    return (
      <div className="app">
        <Dog />
        <Cat />
      </div>
    );
  }
}

export default App;

Awesome! Now, what we need is to add the score when the corresponding button is pressed. So we need to make our onClick handler send data to the App component hmmm... That's a tough one.

Turns out it really isn't. We can accomplish that by creating a method in our App and send it as a prop to both the Dog and the Cat components. That way, when we handle the click event we can call that prop and instruct it to do whatever we want!

Our method will receive a string, that indicates who won and accordingly, we're going to increase the score and move to the next round.

handleWin = (type = "dog") => {
    if (type === "cat") {
      this.setState((state) => ({
        catScore: state.catScore + 1,
        round: state.round + 1,
      }));
    } else {
      this.setState((state) => ({
        dogScore: state.dogScore + 1,
        round: state.round + 1,
      }));
    }
  };

We will send this method as a prop to both Cat and Dog

render() {
    return (
      <div className="app">
        <Dog win={this.handleWin} />
        <Cat win={this.handleWin} />
      </div>
    );
  }

In our Dog component we will call our prop in the handleClick method and pass it the string dog

handleClick = () => {
  this.props.win("dog");
};

We will also do the same for the Cat component with changing the passed string

handleClick = () => {
  this.props.win("cat");
};

Perfect! Now, all our functionality for updating the rounds and score are done!

Let's add a header and display which round we're in, in App.js

render() {
    return (
      <div className="app">
        <div className="header">
          <h1>Choose Your Fighter!</h1>
          <h1>Round {this.state.round}</h1>
        </div>
        <div className="fighters">
          <Dog win={this.handleWin} />
          <Cat win={this.handleWin} />
        </div>
      </div>
    );
  }

And also make things look prettier with our CSS. We will need to add the paws.jpg image in our src folder first.

App.css

* {
  box-sizing: border-box;
}

.btn {
  padding: 10px;
  border-radius: 100px;
  border: none;
  cursor: pointer;
}
.btn-bright {
  background-color: #862042ed;
  box-shadow: #0b4c42 0px 0px 9px 0px;
  border: 1px solid #425361;
  color: #b0deea;
  font-weight: 900;
  font-size: 1.2rem;
}

.app {
  background-image: url("./paws.jpg");
  min-height: 100vh;
  background-size: cover;
  background-repeat: no-repeat;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.app h1 {
  color: aliceblue;
  font-size: 4rem;
  text-shadow: black 1px 1px 20px;
  font-weight: 500;
  text-align: center;
  margin: 0;
}
.app .header {
  width: 100%;
  backdrop-filter: blur(5px);
  margin-bottom: 10px;
}

.fighters {
  width: 50%;
  display: flex;
  justify-content: space-between;
}

.animate-fighters {
  animation-name: fighters;
  animation-duration: 2s;
}

@keyframes fighters {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@media screen and (max-width: 900px) {
  :root {
    font-size: 16px;
  }
}
@media screen and (max-width: 700px) {
  :root {
    font-size: 10px;
  }
}
@media screen and (max-width: 400px) {
  :root {
    font-size: 5px;
  }
}

Dog.css

.dog {
  display: flex;
  flex-direction: column;
}

.dog img {
  width: 15vw;
  height: 15vw;
  border: 10px #5b8390 solid;
}

.dog .btn {
  margin-top: 1rem;
}

Cat.css

.cat {
  display: flex;
  flex-direction: column;
}

.cat img {
  width: 15vw;
  height: 15vw;
  border: 10px #5b8390 solid;
}

.cat .btn {
  margin-top: 1rem;
}

Great! Everything looks the way we want it to look, but we have a problem. When we choose a winner for our round and move to the next one, the images don't change, as our states stay the same, so we need to trigger our fetchImg in Cat and Dog to get fresh images for every round.

We can't do that in the handleClick method in the component itself as it will only update the winner and leave the other image unchanged.

Our solution would need to trigger both fetch methods from our parent component. For this problem, I chose refs as my solution.

Refs provide us with a way to access our child elements. Sometimes like in our case, we would want to modify our child without using props, so refs step up for the job.

To add Refs we will do that in the constructor using React.createRef()

constructor() {
    super();
    this.state = {
      round: 1,
      catScore: 0,
      dogScore: 0,
    };
    this.dogRef = React.createRef();
    this.catRef = React.createRef();
  }

And then, we will add a ref attribute to our components calling our declared refs

render() {
    return (
      <div className="app">
        <div className="header">
          <h1>Choose Your Fighter!</h1>
          <h1>Round {this.state.round}</h1>
        </div>
        <div className="fighters">
          <Dog ref={this.dogRef} win={this.handleWin} />
          <Cat ref={this.catRef} win={this.handleWin} />
        </div>
      </div>
    );
  }

In our handleWin method we can access our desired nodes using current and then, we can call the fetchImg method.

handleWin = (type = "dog") => {
    if (type === "cat") {
      this.setState((state) => ({
        catScore: state.catScore + 1,
        round: state.round + 1,
      }));
    } else {
      this.setState((state) => ({
        dogScore: state.dogScore + 1,
        round: state.round + 1,
      }));
    }

    this.dogRef.current.fetchImg();
    this.catRef.current.fetchImg();
  };

Lovely! Our images are changing!

Winner

For now our rounds increase infinitely without declaring a winner and it's about time we fix that!

We should have our cat.svg and dog.svg images placed in our Winner folder. We will just render a simple header and image depending on the winner passed to us as a prop.

import React from "react";
import "./Winner.css";
import cat from "./cat.svg";
import dog from "./dog.svg";

class Winner extends React.Component {
  render() {
    let winner = (
      <>
        <h1>Woof Wins!</h1>
        <img alt="dog" src={dog} />
      </>
    );
    if (this.props.winner === "cat") {
      winner = (
        <>
          <h1>Meow Wins!</h1>
          <img alt="cat" src={cat} />
        </>
      );
    }

    return <div className="winner">{winner}</div>;
  }
}

export default Winner;

We will add our CSS to our Winner.css

.winner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  height: 80vh;
  backdrop-filter: blur(5px);
  border-radius: 100%;
  border: 10px solid #7dacbc;
}
.winner img {
  width: 50%;
}

Good! Now, that we have our component all set we need to import it, set a condition and render it in our App component.

Our threshold for the rounds is 3, if we passed that, we will compare scores and declare our winner.

render() {
    let content = (
      <>
        <div className="header">
          <h1>Choose Your Fighter!</h1>
          <h1>Round {this.state.round}</h1>
        </div>
        <div className="fighters">
          <Dog ref={this.dogRef} win={this.handleWin} />
          <Cat ref={this.catRef} win={this.handleWin} />
        </div>
      </>
    );
    if (this.state.round === 4) {
      let winner = "dog";
      if (this.state.catScore > this.state.dogScore) {
        winner = "cat";
      }
      content = <Winner winner={winner} />;
    }
    return <div className="app">{content}</div>;
  }

Lovely! As a last greedy thing let me just add some animation in between the transition of rounds.

I'll use the animate-fighters class to give us some sort of fade in.

It will need to be initialized in our constructor

constructor() {
    super();
    this.state = {
      round: 1,
      catScore: 0,
      dogScore: 0,
      animateFighters: "animate-fighters",
    };
    this.dogRef = React.createRef();
    this.catRef = React.createRef();
  }

Also, Added in render and reset after the animation ends to be able to repeat the process in the 3 rounds

let content = (
      <>
        <div className="header">
          <h1>Choose Your Fighter!</h1>
          <h1>Round {this.state.round}</h1>
        </div>
        <div
          className={`fighters ${this.state.animateFighters}`}
          onAnimationEnd={() => this.setState({ animateFighters: "" })}
        >
          <Dog ref={this.dogRef} win={this.handleWin} />
          <Cat ref={this.catRef} win={this.handleWin} />
        </div>
      </>
    );

And set in handleWin to re-animate at the beginning of the next round

handleWin = (type = "dog") => {
    if (type === "cat") {
      this.setState((state) => ({
        catScore: state.catScore + 1,
        round: state.round + 1,
        animateFighters: "animate-fighters",
      }));
    } else {
      this.setState((state) => ({
        dogScore: state.dogScore + 1,
        round: state.round + 1,
        animateFighters: "animate-fighters",
      }));
    }

    this.dogRef.current.fetchImg();
    this.catRef.current.fetchImg();
  };

Annnd it works like charm!

The code can be found HERE

By this mini contest, I shall end my fourth baby step towards React greatness, until we meet in another one.

Any feedback or advice is always welcome. Reach out to me here, on Twitter, there and everywhere!

RanaEmad / woof-vs-meow

A React script that fetches random images for cats and dogs via APIs to use it in a contest and declare the winner at the end

How easy do you find resources that can help a developer transition from intermediate to senior level?

Rana Emad — Tue, 16 Jun 2020 14:10:47 +0000

I have noticed that there are infinite resources to get you started as a beginner, but rare ones that define advanced topics that can help you level up and reach a senior level.

There is some sort of unwritten agreement that you have to learn advanced topics the hard way through your work experience, but some developers are not lucky enough to be subjected to the right challenges that might help them grow. How do you educate yourself?

Text Recorder: React States, Event Handling and Conditional Rendering

Rana Emad — Fri, 12 Jun 2020 15:43:56 +0000

React stopped being scary by now and that's very good news. Now, we can turn any HTML code into React components, isn't that something?
We've made it this far and now it's time to take a step further and get to play around with something awesome!

States

We owe Javascript a lot of things, but the most magical of them all is page interactivity. We can click, hover and do all sorts of things and the page will instantly respond and rearrange itself magically based on our actions.

Of course, React is not built to deny us these magical features, on the contrary, it is built to make our lives even easier when using them and that's where states come in handy.

We can keep our data saved in states and whenever a state is changed, it is designed to automatically reflect its change smoothly and effortlessly in all the locations it is used.

States are similar to Props. They help us play around with our data, but the difference is states allow us to change the original value while props can't be changed. They are immutable. So, if we know for a fact we are going to change a certain value, then we should declare it as a state not a prop.

States are available in Class Components. We can access our states easily in a similar manner to props using this.state

And we can set it using 2 different ways:

Directly in the constructor using an object with all our states, but this method can ONLY be used in the constructor and nowhere else

constructor(){
    super();
    this.state={
        iAmAState:"",
        iAmAnotherState:[]
    };
}

Using setState() and that can be used wherever we want to update a state. We pass it an object with only the affected state and it merges the changes for us
```
this.setState({
    iAmAState:"I am updated!"
});
```

Event Handling

We have been talking about state changes and for those changes to take place we are going to need something to trigger them. That's where events enter.

We love events and we always listen to them. *wink*

Setting up our components to handle events is not very different from normal HTML elements, as an example to handle a click event on a button we set the onclick attribute to call a Javascript function <button onclick="myJavascriptFunction()">Click me</button>

In JSX the naming is a little different, it's usually camelCase of the original, so onclick turns into onClick and is assigned using a curly brace that is passed the name of the method within the class using this <button onClick={this.handleClick}>Click me</button>

I have also noticed that handle + the name of the event is used as a naming convention for the method executing the handling code. Not sure why, but I'm going to follow the herd until further notice.

Now that we can handle our events, let's work that brain and build something!

Build What?

I am new to technical blogging. My first post in this series was my first post ever. In the writing process, I started facing some challenges, one of which was code snippets. Sometimes I want to emphasize something by showing the sequence the code was written in. A GIF would do for illustrations, but not for code snippets as it would deny us the ultimate developer skill of copying and pasting and I would not allow that on my watch! Also, I have a word for you: Accessibility. So that leaves us with including multiple divided snippets of the same block. As I wrote, I sat there daydreaming if only there was a text recorder! And there it was my next coding task!

I am going to be my own knight with a shining React armor and with the help of states, I should start creating the text recorder of my dreams and hopefully, later, I'll continue working on it and make it embed-able somehow to save myself the drama... or not. The future remains a mystery.

You are allowed to play around for a little while HERE first

What's The Plan?

What we want is to press record, write our text, stop recording and then play what we have recorded with the ability to reset and start over with another text.

To do that, all we need is a text area and a bunch buttons, so I think we can fit it all in one TextRecorder component.

Sorry to inform you, that our plan is to approach this the stupid way. We are going to track every key press and save the whole text in an object along with the current timestamp. From that history we will easily be able to get the sequence the text was written in and the time difference between each key stroke and the previous one.

Sounds like a great stupid plan, let's start coding!

TextRecorder

As usual we're going to start by running npx create-react-app . in our root folder of choice, then we are going to create the folder structure we agreed upon previously while creating our mini calendar to create a TextRecorder component.

Mini Calendar: React Components, Props and Project Structure

Rana Emad ・ Jun 3 ・ 9 min read

#react #javascript #webdev #frontend

We are going to create a components folder in the src folder, add to it a TextRecorder folder and inside it we are going to create a TextRecorder.js file and a TextRecorder.css file.

Previously, while creating our mini calendar, we used function components, now since we are using states, it's time to use class components.

import React from "react";
import "./TextRecorder.css";

class TextRecorder extends React.Component {
  render() {
    return <div className="text-recorder"></div>;
  }
}

export default TextRecorder;

Now, let's clear the App.css file and import our TextRecorder in App.js to view our lonely component on screen as we work.

import React from "react";
import "./App.css";
import TextRecorder from "./components/TextRecorder/TextRecorder";

function App() {
  return (
    <div className="app">
      <TextRecorder />
    </div>
  );
}

export default App;

Great! Now back to our TextRecorder, what do we need?

A header
A text area
some buttons

<div className="text-recorder">
  <h1 className="header">Text Recorder</h1>
  <textarea
    className="text"
    rows="10"
    placeholder="Press Record and start typing..."
  ></textarea>
  <div className="controls">
    <button className="btn">Record</button>
    <button className="btn">Stop Recording</button>
    <button className="btn">Play</button>
    <button className="btn">Reset</button>
  </div>
</div>

To make things a little better for the eyes, let's add our CSS into our TextRecorder.css

.text-recorder {
  display: flex;
  flex-direction: column;
  justify-items: center;
  width: 80vw;
}

.text-recorder .header {
  text-align: center;
}

.text-recorder .text {
  background-color: #16202c;
  box-shadow: white 0px 0px 5px 3px;
  border: none;
  color: white;
  padding: 15px;
  border-radius: 10px;
  font-size: 16px;
  width: 80%;
  margin: 0 auto;
  margin-bottom: 20px;
}

.controls {
  display: flex;
  justify-content: space-evenly;
}

.controls .btn {
  padding: 10px;
  background-color: #16202c;
  border: none;
  border-radius: 100px;
  box-shadow: white 0px 0px 4px 0px;
  color: white;
  cursor: pointer;
}

And App.css

* {
  box-sizing: border-box;
}

html,
body,
#root {
  height: 100%;
}

#root {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #16202c;
  color: white;
}

The buttons look okay, but to me they seem like they need icons to spice things up a little.

I am going to use Font Awesome icons so to add them to our project let's run

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/react-fontawesome

After that, let's import our icons of choice in our component. I chose those gems:

import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import {
  faRecordVinyl,
  faStop,
  faPlay,
  faRedo,
} from "@fortawesome/free-solid-svg-icons";

Now, let's add them to our buttons. I added a custom color to brighten things up.

<div className="controls">
  <button className="btn">
    <FontAwesomeIcon icon={faRecordVinyl} color="#c51818" /> Record
  </button>
  <button className="btn">
    <FontAwesomeIcon icon={faStop} color="#c51818" /> Stop Recording
  </button>
  <button className="btn">
    <FontAwesomeIcon icon={faPlay} color="#c51818" /> Play
  </button>
  <button className="btn">
    <FontAwesomeIcon icon={faRedo} color="#c51818" /> Reset
  </button>
</div>

Looking good! Let's get our buttons working!

We are going to start with our Record button. We will need to track our click event and handle it using handleRecord method in our class

handleRecord=()=>{

}

We agreed that camelCase is a winner, so onClick it is in our button.

<button className="btn" onClick={this.handleRecord}>
  <FontAwesomeIcon icon={faRecordVinyl} color="#c51818" /> Record
</button>

Once I press record, I would want to record my first timestamp in my history with the current value of the text area so let's set our first states!

We will load our constructor first thing in our class and make sure we call super() to trigger our super class constructor, as well.
Our component is not passed any props, but if it were, we would pass a props variable to them both. After that, we will set three states, one to store all our history, the other to keep track of the text written in our text area and one to indicate that the record button was pressed.

constructor(){
    super();
    this.state={
        history:{},
                text:"",
                record:false
    };
}

Remember, we are only allowed to set state directly in the constructor, but whenever we need to change our state later like in handleRecord, we will always use this.setState({})

handleRecord = () => {
  let history = {};
  history[new Date().getTime()] = this.state.text;
  this.setState({
    history,
    record:true
  });
};

Usually, if we call this.setState in a method, we will need to bind this method first or else we will get a type error that considers our variable undefined. To avoid that, we can either bind it in the constructor using this.handleRecord = this.handleRecord.bind(this) OR we can use arrow functions and it will automatically handle the binding for us.

Nice! Now after we know that recording has started we need to go to our next step and it is saving the history of every key up event with its timestamp.

Similar to handleRecord we will create a handleKeyUp method and call it in our text area

<textarea
  className="text"
  rows="10"
  placeholder="Press Record and start typing..."
  onKeyUp={this.handelKeyUp}
></textarea>

We will need to check first if our record button was pressed using our record flag state, then add to our history the text area value.

handleKeyUp = () => {
  if (this.state.record) {
    let history = this.state.history;
    history[new Date().getTime()] = this.state.text;
    this.setState({
      history
    });
  }
};

Theoretically, that's great but so far, we haven't set the text area value to reflect in the text state. Let's get on with it, then!

We want to turn it into a controlled component. We will add a handleTextChange method and update the text state in it whenever the text area is changed to make React control its value, hence, the name.

handleTextChange = (e) => {
  this.setState({
    text: e.target.value,
  });
};

Then we will add it to our onChange event in the text area

<textarea
  className="text"
  rows="10"
  placeholder="Press Record and start typing..."
  onKeyUp={this.handelKeyUp}
  onChange={this.handleTextChange}
></textarea>

Now everything is synced together let's stop that recording!

Of course, we will have a handleStopRecording method, in which all we need to do, is just set our record flag to false.

handleStopRecording = () => {
  this.setState({
    record: false
  });
};

Let's not forget to add it to the onClick attribute in our button

<button className="btn" onClick={this.handleStopRecording}>
  <FontAwesomeIcon icon={faStop} color="#c51818" /> Stop Recording
</button>

Here comes our most important feature *drumroll*

The Play button!

We will add handlePlay as expected and set it in the play button.

<button className="btn" onClick={this.handlePlay}>
  <FontAwesomeIcon icon={faPlay} color="#c51818" /> Play
</button>

In our handlePlay method, we will start by clearing the current text state, then we will get all our stored timestamps which are the history object keys. We will loop after that, through all the timestamps getting the time difference between each entry and the previous one and wait this amount of time before setting the text state with our value, which of course, will be automatically reflected in our text area.

handlePlay = () => {
    this.setState({
      text: ""
  });
    let keys = Object.keys(this.state.history);
    let prevTimestamp = keys.shift();
    let time = 0;
    keys.forEach((timestamp) => {
      time += (timestamp - prevTimestamp);
      setTimeout(() => {
        this.setState({ text: this.state.history[timestamp] });
      }, time);
      prevTimestamp=timestamp;
    });
};

Hooray! We just played our recorded text!

Now, the hard part is over we need one more method to handle our reset button.

Guess what we're going to name it?

<button className="btn" onClick={this.handleReset}>
  <FontAwesomeIcon icon={faRedo} color="#c51818" /> Reset
</button>

In handleReset we're just going to return all our variables to their original state like in the constructor to be able to start over with a new recording.

handleReset = () => {
  this.setState({
    history: {},
    text: "",
    record: false
  });
};

Alright, all our functionality is complete!

I don't like having all the buttons laid next to each other at the same time, though. Let's play around to make them only visible when needed! Here is what we are aiming at:

At the beginning only the Record button should be visible
After we hit Record only the Stop Recording should be visible
After the Stop Recording button is hit, both the Play and Reset buttons should be visible
When the Reset button is hit we will go back to only the Record button and so on

Conditional Rendering

We have three ways for conditional rendering

We can return entirely different blocks of JSX depending on the condition
We can store the elements to be rendered in a variable according to the condition and call it later using curly braces in our return statement
We can use ternary operations within the JSX code since they are Javascript expressions as long as they are enclosed in curly braces

For my buttons, I believe the second way is the most suitable way. We would be storing the buttons to be rendered in a variable and call it later in our controls block.

At first, we are going to declare a controls variable and set it with the record button as a default value since that is expected to be our initial state.

let controls = (
  <button className="btn" onClick={this.handleRecord}>
    <FontAwesomeIcon icon={faRecordVinyl} color="#c51818" /> Record
  </button>
);

Then, I am going to comment out all my buttons for now and call the controls variable until we make sure everything is working as expected

<div className="controls">
  {controls}
  {/* <button className="btn" onClick={this.handleRecord}>
    <FontAwesomeIcon icon={faRecordVinyl} color="#c51818" /> Record
  </button>
  <button className="btn" onClick={this.handleStopRecording}>
    <FontAwesomeIcon icon={faStop} color="#c51818" /> Stop Recording
  </button>
  <button className="btn" onClick={this.handlePlay}>
    <FontAwesomeIcon icon={faPlay} color="#c51818" /> Play
  </button>
  <button className="btn" onClick={this.handleReset}>
    <FontAwesomeIcon icon={faRedo} color="#c51818" /> Reset
  </button> */}
</div>

After that, we're going to check our record flag to see if recording was triggered and in that case make only the Stop Recording button visible.

let controls = (
  <button className="btn" onClick={this.handleRecord}>
    <FontAwesomeIcon icon={faRecordVinyl} color="#c51818" /> Record
  </button>
);
if (this.state.record) {
  controls = (
    <button className="btn" onClick={this.handleStopRecording}>
      <FontAwesomeIcon icon={faStop} color="#c51818" /> Stop Recording
    </button>
  );
}

To detect that the Stop Recording button was pressed, we're going to need to add one more flag similar to the record flag, let's call it stop

We will add it in the constructor

constructor() {
  super();
  this.state = {
    history: {},
    text: "",
    record: false,
    stop: false,
  };
}

Update it in handleStopRecording

handleStopRecording = () => {
  this.setState({
    record: false,
    stop: true,
  });
};

And clear it in handleReset

handleReset = () => {
  this.setState({
    history: {},
    text: "",
    record: false,
    stop: false
  });
};

After that, we need to add another condition to render the play and reset button in case that flag was set to true. We're going to wrap our buttons in a <React.Fragment> element since we want to return multiple elements

if (this.state.stop) {
  controls = (
    <React.Fragment>
      <button className="btn" onClick={this.handlePlay}>
        <FontAwesomeIcon icon={faPlay} color="#c51818" /> Play
      </button>
      <button className="btn" onClick={this.handleReset}>
        <FontAwesomeIcon icon={faRedo} color="#c51818" /> Reset
      </button>
    </React.Fragment>
  );
}

And YAAAAAAAAY! We're done! We can clear all our commented buttons now!

The code can be found HERE

By this mini text recorder I shall end my third baby step towards React greatness, until we meet in another one.

Any feedback or advice is always welcome. Reach out to me here, on Twitter, there and everywhere!

RanaEmad / text-recorder

A React script that records the sequence a certain text is written in and plays it back

Mini Calendar: React Components, Props and Project Structure

Rana Emad — Wed, 03 Jun 2020 18:32:16 +0000

Still React-ing! Now that we are more confident in our JSX skills and we know how to set up a development environment to work with, it's time to take a step further and get to know what React is really made of.

Components

Apparently, the component is the main building unit in React so we need to get a good grasp on how it works, as our lives would be pretty much revolving around it.

I found 2 types of Components:

Function Component
Class Component

I have tried to find out which is better or which is more used and why, but couldn't find solid information.

Some say class components give access to additional features like state, but others reply that the same functionality can be compensated for by hooks in function components. I found lots of arguments, but nothing real, so, as agreed these are more advanced topics for future Rana to decide upon. For present Rana the only difference between them both is the syntax, so let's check it out!

Function Component

Just your normal Javascript function, but returns a JSX element, the only unusual thing about it, is that the first letter of its name will be capitalized in order for us to be able to distinguish it from other markup tags, when it's called.

function MyFunctionComponent(){
     return (
        <div>
          <h1>Hello, Function Component!</h1>
        </div>
     );
}

OR if you're an ES6 or later person

const MyFunctionalComponent=()=>(
      <div>
        <h1>Hello, Function Component!</h1>
      </div>
    );

Class Component

Your usual class, but it has to extend the React.Component class to get all the React perks. Also, the JSX code to be rendered has to be returned by, obviously, the render method.

class MyClassComponent extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, Class Component!</h1>
      </div>
    );
  }
}

Nested Components

A horrible mistake I did earlier is, I insisted on rendering multiple sibling elements at once and that's not possible, so remember kids, always wrap all your elements in one and only one element
OR
I found another magic trick where we can enclose all our elements in a React.Fragment element

<React.Fragment>
   <div>1</div>
   <div>2</div>
   <div>3</div>
</ React.Fragment>

But what if I want to render a component within a component? Nest away!

If I were a component, either a function or a class and was called, I would look like this:

<Rana />

I have a self closing tag, because I am writing on an empty stomach, but there is a sexy pasta alfredo component sitting right beside me looking like this:

<PastaAlfredo />

Of course, who am I to resist? The pasta component and I need to become one so it stopped sitting beside me and it is now sitting in my stomach, so now I look like this:

<Rana>
    <PastaAlfredo />
</Rana>

Props

If you want to nest components you're probably going to want to pass those poor children some data to modify their behavior. That's where props come in handy.

For function components we just pass a props variable (it could be any name of our choice, but that's how the convention goes) as an argument and for class components we can access the props using this.props

So far so good we have nice concepts in hand. Now let's try and use them to build something!

Build What?

Last time, thanks to our marvelous React coding skills, we were capable of knowing what day today is, now we will take what we already have a tad further and mix it to build a mini calendar for the whole month.

The code can be found HERE

Project Structure

Let's start by running npx create-react-app . in our root folder of choice!

Previously, we postponed going through the create-react-app project structure for the future and the future is now!

The public folder

Or what I like to call things that doesn't really concern me folder.

It is where our one and only HTML file is located. We don't need more than that to render our very useful code.
The app's manifest file, favicon and logos for the app's service worker to work properly if enabled.

So, we will rarely need to change anything in that folder.

The src folder

That's probably where we will be living while developing.
I was checking how I was going to structure the folders for adding components to keep myself organized and there were multiple options from which I liked a couple. Both of them start by creating a components folder within the src folder and then:

Group files by type. Separate the CSS from the logic where each would be in a separate folder and each file would be named after its component
Group files by component. Create a folder with the name of the component within the components folder and add everything related to it in it whether it's CSS or Javascript.

I chose to go with the later for now to make it easier for me to move components from project to project until I dig deeper in component reusability.

The Plan

Let's try and define the components we need!

First of all, we will need a convenient space to contain all our days, so let's call our first component Month.

Second, we will need a Day component to represent each day in our month, so there goes our second component!

We will include the unique day brands in the Day component and we will include all our Day components in our Month component. That's a solid plan.

Day

I will be using function components for now and save class components for later.
Let me start by creating a components folder and inside it create a Day folder that includes an empty Day.js file.

Baby steps, so for now let's just add the date inside our Day component. I'll just put a dummy 1 until we figure out our next step.

import React from "react";

function Day() {
  return <div className="day">1</div>;
}

export default Day;

Month

We will create a folder structure for the Month component similar to our Day component.

In our Month.js file we will import our Day component and add elements for the month heading and the days.

import React from "react";
import Day from "../Day/Day";

function Month() {
  return (
    <div className="month">
      <div className="heading">June</div>
      <div className="days">
        <Day />
      </div>
    </div>
  );
}

export default Month;

App

In our App.js file let's clean up what we don't need and add our Month component to view our progress on screen as we go.

import React from "react";
import "./App.css";
import Month from "./components/Month/Month";

function App() {
  return (
    <div className="app">
      <Month />
    </div>
  );
}

export default App;

I cleared the App.css file and just set the styles that will affect the elements globally.

@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

* {
  box-sizing: border-box;
}
html,
body,
#root,
.app {
  height: 100%;
}

Month

Great! Everything is rendered. Now we only have 1 day and we need to add all the days. I am definitely not going to add about 30 days manually, so it's loop O'clock.. But how?

React loves arrays and so do we! We are going to loop normally from 1 to the last day of the current month and for each loop we're going to push a Day component in our days array.

To render the days array we will just wrap it with curly braces and they'll take care of everything.

function Month() {
  let days = [];
  const currentDate = new Date();
  const daysOfMonth = new Date(
    currentDate.getFullYear(),
    currentDate.getMonth() + 1,
    0
  ).getDate();

  for (let i = 1; i <= daysOfMonth; i++) {
    days.push(<Day />);
  }

  return (
    <div className="month">
      <div className="heading">June</div>
      <div className="days">
       {days}
      </div>
    </div>
  );
}

Before we sail any further, let me just throw some grid view styling in a Month.css file and import it into our component to be able to get a better understanding of what goes where.

.month {
  height: 100%;
  display: grid;
  grid-template-rows: 5% auto;
  padding: 1rem;
}

.month .heading {
  text-align: center;
  align-self: center;
  font-family: "Great Vibes", cursive;
  font-size: 42px;
  color: #ab1111;
  font-weight: 600;
}

.month .days {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-gap: 2px;
}

@media screen and (max-width: 950px) {
  .month .days {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media screen and (max-width: 800px) {
  .month .days {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media screen and (max-width: 400px) {
  .month .days {
    grid-template-columns: 1fr;
  }
}

Lovely! Now we have 30 ones rendered to the screen and now we need to replace them with the actual dates. Props to the rescue!

In our loop let's send the date as a prop in our loop

for (let i = 1; i <= daysOfMonth; i++) {
  days.push(<Day date={i} />);
}

In our Day component let's replace our dummy text with the actual date.

function Day(props) {
return <div className="day">{props.date}</div>;
}

Everything is working well, but I got prompted a warning in the console: Warning: Each child in a list should have a unique "key" prop.

To get rid of that I added a key prop for the Day component and set it with an incremental unique key for each.

Great! Now that everything is set, we need to add our unique day brands we implemented previously in

Learning React: A Documentary

Rana Emad ・ May 28 '20

#react #javascript #webdev #frontend

To be able to do that we need to send what day of the week it is to our Day component as a prop and while we're at it let's get the month in the heading dynamically, as well.

let months = [];
months[0] = "January";
months[1] = "February";
months[2] = "March";
months[3] = "April";
months[4] = "May";
months[5] = "June";
months[6] = "July";
months[7] = "August";
months[8] = "September";
months[9] = "October";
months[10] = "November";
months[11] = "December";
function Month(){
let days = [];
  const currentDate = new Date();
  const daysOfMonth = new Date(
    currentDate.getFullYear(),
    currentDate.getMonth() + 1,
    0
  ).getDate();
for (let i = 1; i <= daysOfMonth; i++) {
  let weekDay = new Date(
    currentDate.getFullYear(),
    currentDate.getMonth(),
    i
  ).getDay();
  days.push(<Day key={"day" + i} date={i} weekDay={weekDay} />);
}
return (
    <div className="month">
      <div className="heading">{months[currentDate.getMonth()]}</div>
      <div className="days">{days}</div>
    </div>
  );
}

Day

For our Day component we will add an array of days and use it to assign classes for custom styling.

let week = [];
week[0] = "Sunday";
week[1] = "Monday";
week[2] = "Tuesday";
week[3] = "Wednesday";
week[4] = "Thursday";
week[5] = "Friday";
week[6] = "Saturday";

function Day(props) {
  return (
    <div className={"day " + week[props.weekDay].toLowerCase()}>
      <div className="date">{props.date}</div>
      <div className="weekday">{week[props.weekDay]}</div>
    </div>
  );
}

Now we have all the data we need so let's add our SVG images to our Day folder and fill a Day.css with magic and import it!

.day {
  padding: 1.5rem;
  background-repeat: no-repeat;
  background-size: 50%;
  background-position: bottom;
  opacity: 0.7;
  box-shadow: 1px 1px 6px 0px black;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}

.day.sunday {
  background-size: 40%;
}

.sunday {
  background-image: url("./sunday.svg");
}
.monday {
  background-image: url("./monday.svg");
}
.tuesday {
  background-image: url("./tuesday.svg");
}
.wednesday {
  background-image: url("./wednesday.svg");
}
.thursday {
  background-image: url("./thursday.svg");
}
.friday {
  background-image: url("./friday.svg");
}
.saturday {
  background-image: url("./saturday.svg");
}

.weekday {
  margin: 0 auto;
  font-family: "Great Vibes", cursive;
  font-size: 1.5rem;
}

.wednesday .weekday {
  color: #f9a727;
  text-shadow: 1px 1px #3f3d55;
}
.saturday .weekday {
  color: #e50914;
  text-shadow: 1px 1px #00bfa6;
}
.thursday .weekday {
  color: #2f2f41;
  text-shadow: 1px 1px #00b0ff;
}
.friday .weekday {
  color: #d83e75;
  text-shadow: 1px 1px #2f2f41;
}
.sunday .weekday {
  color: #ff6584;
  text-shadow: 1px 1px #3f3d55;
}
.monday .weekday {
  color: #0e01bf;
  text-shadow: 1px 1px #ffb8b8;
}
.tuesday .weekday {
  color: #36799a;
  text-shadow: 1px 1px #ffb8b8;
}

Hooray! Our calendar is all set, but I am getting a little greedy. I want to highlight today so that I won't be lost.

In our Month.js file let's send a prop to set that.

for (let i = 1; i <= daysOfMonth; i++) {
  let weekDay = new Date(
    currentDate.getFullYear(),
    currentDate.getMonth(),
    i
  ).getDay();

  let today = "";
  if (i === currentDate.getDate()) {
    today = " today ";
  }

  days.push(<Day key={"day" + i} date={i} weekDay={weekDay} today={today} />);
}

In our Day.js file let's read that prop and set it as a class.

function Day(props) {
  return (
    <div className={"day " + props.today + week[props.weekDay].toLowerCase()}>
      <div className="date">{props.date}</div>
      <div className="weekday">{week[props.weekDay]}</div>
    </div>
  );
}

Finally, let's add styling in Day.css to highlight today.

.today {
  box-shadow: 0px 0px 5px 2px #770909;
  opacity: 1;
}

Voila! We have our calendar!

By this mini calendar I shall end my second baby step towards React greatness, until we meet in another one.

Any feedback or advice is always welcome. Reach out to me here, on Twitter, there and everywhere!

RanaEmad / calendar

A React calendar design for the current month

Learning React: A Documentary

Rana Emad — Thu, 28 May 2020 10:41:21 +0000

I am Software Engineer, who has always been a little intimidated by front end development, but hopefully that's about to change.
I am more of a backend-er. I usually just reach the point with front end where my work looks professional enough, then I start running in the opposite direction. So this lockdown we're gonna work on our relationship and make amends, front end!

Why Document?

To keep myself motivated and lock myself in a routine to stick to, I decided to document my learning journey and the problems I face. That way I get to learn twice, once through absorbing all the concepts and the other, when I am writing about them.
As a bonus, I will also get a great reference for myself to go back to, when I fall into the same problems I once fell into, like the forgetful fish I know I am.

So let's get our React feet wet!

What Do I Need?

Learning by doing is the best process for me to achieve any progress, so the first question I asked myself was: What do I need to start coding other than the obvious essentials as a text editor or an IDE and a browser?

After a little exploration here and there I set up the React Developer Tools extension in my browser for debugging and I already had the ESLint extension installed in my editor, so I thought that should be enough for now.

I also found out that I have 2 paths, when it comes to adding React to a project:

The easy way for simpler projects: include some scripts in an HTML file and we'd be good to go
The more convenient way for more complex projects: create-react-app

As a true beginner, who has not been worn out by apathy, I decided to walk down both roads.
Instead of just printing out "Hello, World!" I thought maybe for change's sake I'll make things a tad more interesting and build another thing just as simple.

Build What?

Since in lockdown, time has taken its role as an illusion seriously and most of us agree that every day has simply lost its first name and turned into just day, my hello world app would just pop up what day it is today, whenever time loses its purpose.

We will try to create a unique brand for each day to make it stand out among its colleagues.

Check out what we're about to build: https://ranaemad.github.io/whatdaytoday/

JSX

I quickly went through React.createElement(), but once I found JSX I knew I have reached my destination.

When it comes to JSX, I think all we need to know for now, is that HTML married Javascript and had a stubborn child who refuses to use class and replaces it with className, among a couple of other modifications, but he's nice enough to let us use Javascript expressions, so we like him.

The Easy Way

Time to get our hands dirty! I started by creating a whatdaytoday.html file in my root folder, added some basic HTML boilerplate in it, added a div with id app to render our content in and linked a main.css file in it for later customization.

whatdaytoday.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>What Day Today?</title>
    <link rel="stylesheet" href="main.css" />
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

To use React all we have to do is include a couple of script tags before closing our body.

<script
  src="https://unpkg.com/react@16/umd/react.development.js"
  crossorigin
></script>
<script
  src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
  crossorigin
></script>

Nice, but that would work if we're using the createElement() method, what if we want to run JSX? To do that we will need the help of Babel to compile our code for us, so we will include 1 more script tag.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Great! We are all set! Now let's add our React code in a separate react.js file.

Let's start by adding a div with an image and dummy text and render them into our app div.

react.js

const App = (
  <div className="day">
    <div className="heading">Thursday</div>
    <img src="thursday.svg alt="thursday" />
  </div>
);

ReactDOM.render(App, document.getElementById("app"));

I have included SVG images that represent each day in the root folder and everything looks fine, then why is it not working? Hmmm...

I kept refreshing and googling for 5 minutes before I realized, I am not running a server (which Babel needs for compiling external scripts) and I am just opening the path to the HTML file in the browser.

Cool cool cool, running php -S localhost:8080 solved the problem for me, but any other server would have worked just fine.

Now that we're sure everything works, let's get the day dynamically from today's date and replace our dummy text and image with a custom one.

I'll initialize all the days data in a week array and go from there.

react.js

let week = [
  {
    day: "Sunday",
    img: "sunday.svg",
  },
  {
    day: "Monday",
    img: "monday.svg",
  },
  {
    day: "Tuesday",
    img: "tuesday.svg",
  },
  {
    day: "Wednesday",
    img: "wednesday.svg",
  },
  {
    day: "Thursday",
    img: "thursday.svg",
  },
  {
    day: "Friday",
    img: "friday.svg",
  },
  {
    day: "Saturday",
    img: "saturday.svg",
  },
];

const day = new Date().getDay();
const today = week[day];

const App = (
  <div className={"day " + today.day.toLowerCase()}>
    <div className="heading">{today.day}</div>
    <img src={today.img} alt={today.day} />
  </div>
);

ReactDOM.render(App, document.getElementById("app"));

Good, now we can throw some css in our main.css file to make each day stand out.

main.css

@import url("https://fonts.googleapis.com/css2?family=Great+Vibes&display=swap");

.day {
  height: 100vh;
  font-family: "Great Vibes", cursive;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.heading {
  font-size: 4.5rem;
  margin-bottom: 0;
  font-weight: bold;
}

.day img {
  width: 50vw;
}

.wednesday .heading {
  color: #f9a727;
  text-shadow: 2px 2px #3f3d55;
}
.saturday .heading {
  color: #e50914;
  text-shadow: 2px 2px #00bfa6;
}
.thursday .heading {
  color: #2f2f41;
  text-shadow: 2px 2px #00b0ff;
}
.friday .heading {
  color: #d83e75;
  text-shadow: 2px 2px #2f2f41;
}
.sunday .heading {
  color: #ff6584;
  text-shadow: 2px 2px #3f3d55;
}
.monday .heading {
  color: #0e01bf;
  text-shadow: 2px 2px #ffb8b8;
}
.tuesday .heading {
  color: #36799a;
  text-shadow: 2px 2px #ffb8b8;
}

@media screen and (max-width: 600px) {
  :root {
    font-size: 10px;
  }
}
@media screen and (max-width: 300px) {
  :root {
    font-size: 5px;
  }
}

Annnnd it is up and running YAY!

You can find the code for this section HERE

The More Convenient Way

Let's transfer the code from the previous section to fit into create-react-app! To use create-react-app we have to have node installed and luckily, I already do. I just ran npx create-react-app . in my root folder and went from there.

To start the app I simply ran npm start and it was automatically up and running on port 3000 outputting the React logo on screen.

I gave the folder structure a look and decided that's for future Rana to worry about and for now I am just going to find the app starting point and replace what's already there with my code and see if it works. (SPOILER ALERT: it did!)

I went straight to the App.js file, imported all the days SVG images placed in the src folder, the same way the React logo was imported. After that, I had to make a tiny modification in the week array to make the img point to a variable instead of text. The changes are instantly reflected in the browser and I don't have to refresh. I already love create-react-app. <3

src/App.js

import React from "react";

import sunday from "./sunday.svg";
import monday from "./monday.svg";
import tuesday from "./tuesday.svg";
import wednesday from "./wednesday.svg";
import thursday from "./thursday.svg";
import friday from "./friday.svg";
import saturday from "./saturday.svg";

import "./App.css";
let week = [
  {
    day: "Sunday",
    img: sunday,
  },
  {
    day: "Monday",
    img: monday,
  },
  {
    day: "Tuesday",
    img: tuesday,
  },
  {
    day: "Wednesday",
    img: wednesday,
  },
  {
    day: "Thursday",
    img: thursday,
  },
  {
    day: "Friday",
    img: friday,
  },
  {
    day: "Saturday",
    img: saturday,
  },
];

After that, I replaced the already existing JSX code with mine and also replaced the css in App.css annnd we did it! Our work here is done!

You can find the code for this section HERE

By this mini victory I shall end my first baby step towards React greatness, until we meet in another one.

Any feedback or advice is always welcome. Reach out to me here, on Twitter, there and everywhere!