Learn React tutorials for beginners

Adding images to the post

Gatsby offers us a different type of plugins to lazy load the images…

Getting the Posts List

So far we didn’t display any posts on the index page in this tutorial…

Hosting the gatsby blog

We are using the netlify to host our blog because netlify offers a…

Syntax highlighting to the code blocks

In this tutorial, we are going to learn how to add a syntax…

Seo in Gatsby

Search engine optimization is very important to every site it’s bad…

Adding blog posts

In this tutorial, we are adding some blog posts to our blog by using…

Getting started Gatsby

In this tutorial, We are going to set up a development environment for…

Introduction to Gatsby

What is a Gatsby.js? Gatsby.js is a static site generator for the…

Querying the data

Gatsby uses the graphql for querying the data from the different data…

Gatsby Tutorial

In this tutorial series, we are building a blazing speed blog with SEO…

Loading images

To load images we need to use url-loader and file-loader. Add a new…

Entry and Output

Let’s create a webpack.config.js file. webpack.conig.js entry : we…

Webpack Intro

What is the Webpack? Webpack is a module bundler if you know about…

Loaders

What is Loaders? Loaders help us to take the particular source code…

Plugins

The whole part of webpack is built with plugins a plugin is just an…

Style Loaders

In this tutorial, you learn about how to import styles as a module…

Webpack Tutorial

In this tutorial series, you will learn about webpack which is a…

Dev server

Webpack dev server Webpack dev server is used to spin up a server so…

Programmatically navigate

What is Programmatic navigation? It means we need to redirect the user…

Tutorial

In this tutorial series, you will learn about react router v4 which…

Adding 404 Pages

What is a 404 page? A 404 page is also called not found page it means…

Introduction

What is react router? React router is a routing library built on top…

Nested Routes

Nested routing helps us to render the sub-routes like users/1, users/…

active styles using NavLink

NavLink It is used to style the active routes so that user knows on…

Routing

open index.js file and import the three components (App,Users,Contact…

Url Parameters

Url parameters helps us to render the same component based on its…

Jsx and Virtual Dom

What is JSX? JSX means JavaScript XML which is used in react to write…

Node and npm

What is Nodejs? Nodejs is a backend JavaScript framework built on top…

What is React

React is a JavaScript library used to build views which are mainly…

Setup the development environment

Create react app To set up the dev environment we need to install the…

Components and props

Components Components are the reusable pieces of code which often you…

Event handling and state

Event handling In normal HTML5 we are using an onclick but in react we…

Styling and animation

Styling So far we didn’t add any styles to our app now it’s time to…

Introduction

In this tutorial, you will learn about fundamental concepts of reactjs…