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. …

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…


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…

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. …

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…

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…

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