This project is that when users click the button, fetched Gif API and shows gifs.

React can shows items without a search button or click the search button. I think click search button need more step than showing items without clicking the search button. So I tried to make it by clicking the search button.

First, npx creact-react-app ./

seconds, import { useEffect, useState } from “react”;

I will use react hook, so I need useEffect and useState.

const [gifs, setGifs] = useState([]);

This for the fetched gifs pictures, searched…

There are two kinds of components you can use in React

Class Components && Functional Components

Both components use the same concept, but there are a little bit different when you use them. For example, state, setState, useEffect, componentDidMount ………. you will see those terms later on my tutorials.

I am not sure, but I heard many companies change system class components to functional components.

Class Components

Before the functional component came out, React only had class components. There are many people who use class components and you can see them in the old system. Class components start with a need render() function before return.

class Welcome…


After you know about JSX, you are ready to start to React!

It will easy to show pictures better than write all of them.

First, install nodejs.


Install either one but I always download LTS.

When you install, if you see the check button which “path automatically”, you should check it for convenience later.

Now you are ready to start to React!

If you use Window => open “cmd”

If you use Mac => open “terminal”

Start with JSX

Before starting this tutorial, it is better to know the basics of JavaScript, HTML, CSS.

People might ask me why start from JSX not showing “Hello World” on the webpage, but I am sure that knowing JSX is basic of basic when people start to React.js

What is JSX?

According to React documents, React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display.

In JSX, you can use JavaScript with HTML which is a useful feature.

This picture shows how React uses JavaScript and HTML in the js file. We do not need to use HTML and JavaScript files separately.

Thanks to React.js

Summary : JSX can use HTML in the js file!

Grid is magic!

I usually used flex-box before I know a grid. I knew about the grid, but I did not think to use my project because I thought the grid is hard and complicated. However, I was totally wrong. It is easy!

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

In React we will likely be building a SPA, or Single Page Application. This means we wont require multiple pages being loaded, just the original GET request with our initial HTML, CSS and JS files from the Server. This requires us to figure out how to make the experience of Client-Side routing work to our advantage.

To get started with React Router in a web app, you’ll need a React web app. If you need to create one, you can try Create React App. It’s a popular tool that works really well with React Router.

First, install make a new…

While I am studying JS Advanced Functions, I think the “bind” and “this” are important to move next session which is React.

The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.

bind() syntax = “ function.bind(thisArg[, arg1[, arg2[, ...]]])”

“thisArg” will be the value to be passed as the this parameter to the target function when the bound function is called. The value is ignored if the bound function is constructed using the new operator

Faker gem is really useful when you make temporary data. Faker will add faker data as much as you want.

Just install faker and add it in your gemfile and use it.

First “install” faker gem in your terminal

Second add your “gemfile”


Classes in Ruby are first-class objects — each is an instance of class Class . When a new class is created, an object of type Class is initialized and assigned to a global constant.

  • example of creating a instance of class

The Person class(class Person)is defined with the class keyword, followed by the class name and closed with an end. The body of this class is between the class and end keywords. In this instance of class, class names begin with capital letters because they are stored in Ruby constants. …

Young Han

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store