In the previous post (React basic 6 — Use Axios Library to Fetch Data), we've got image data from the Unsplash API and stored it in the React state. This post covers the basic steps to render the response in a list, such as creating an array of JSX elements from the data array.

Creating a simple list component with map function to render those images

Map in javascript allows you to alter elements of an array and create a brand new array of these altered elements retaining the original order. …

Image for post
Image for post

Axios is a library that makes it easy to send asynchronous HTTP requests to REST endpoints, and we will use this library to get some image data from Unsplash API as instructed in the Udemy course.

Unsplash is a shared stock photograph website contributed by numbers of photographers throughout the world. From their documentation page, you can learn how their API works and key information you will need to send the first Get request, such as your access key (you will need to create your developer account and app on their website in order to obtain an access key).

Step 1. Install axios to your React app

Simply type npm install -- save axios command to your terminal. …

Now we went over basic class structures from the last post (React basic 4 — Class Based Component and Lifecycle Methods), I would like to go over handling events. The key is the use of props to invoke a method of a parent Class from its child Class's event, which comes at the end of this post.

In the next few posts, we will be creating a simple image search app like this.

Image for post
Image for post

Basic event handler

For the very basic event handler, we can create a method and invoke the event from a DOM event object. As you can see from below example, a method can be called from JSX using {} syntax. …

Image for post
Image for post

In contrast to the functional component from the previous post (React basic 3 — Reusable Functional Components), if your component should manage states properly, class component may be the way to go. Class component comes with a built-in lifecycle that allows you to manipulate your component at different phases. This post explains how to create a class-based component by going over the most fundamental, constructor() and render() lifecycle methods first.

Create the first class-based component

Step 1. Declare class and extend React.Component

The structure of class-based component is similar to the functional component. Instead of declaring with const for functional components, we extend React.Component subclass to declare a class. …

Image for post
Image for post

The most important gist in React is its component-based framework. Now with the basic understanding with JSX from the previous post (React basic 2 — JSX, the syntax extension to JavaScript that looks like HTML), it's important to understand how we can organize reusable components to minimize codes that we have to write.

There are two fundamental component types available in React: functional and class-based. Although class-based components can handle more complex logics, functional components are more straightforward and easier to implement.

Create a basic functional component

Step 1. Create a new component js file

From the JSX in index.js, select a portion of your UI that could be a component. Create another js file with a name that describes its purpose to your application (the common naming convention is a pascal case like UserInterfaceComponent.js). …

Image for post
Image for post

As you might have seen from the last React app post (React basic 1 — “Hello React World”. Setting Up Your First React App.), this funny syntax that looks like HTML, called JSX, is commonly used in React to format UI template. JSX is an extension of JavaScript that helps engineers to visualize how the UI looks like. In this entry I would like to list some of syntax rules and capabilities around JSX.

Some specific syntax for JSX that is different from HTML

In order to clearly differentiate from common syntax used in JavaScript, you either have to or are recommended to use some unique syntax like the followings in…

Image for post
Image for post

Initially introduced by Facebook, React is the popular JavaScript library for creating UI templates that render fast. React is component-based framework, and creates an in-memory cache with the virtual DOM-- it doesn't load the entire page each time, but it can only render specific components.

I took the crush course in Udemy by Stephen Grider (Modern React with Redux), and I wanted to take notes on the basic steps to create a simple React application for my future reference. For those of you who are interested in the in-depth understanding, please take his course!

For setting up the development environment especially for learning React, React provides create-react-app. In this post, I will highlight the key steps to create your first React application using create-react-app. …

Takuma Kakehi

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