AppRouter setup with React, GraphQL, WordPress App

This is the second part of Create react app with GraphQL way of WordPress data

In this part, we will build src/AppRouter.js.


We will use { BrowserRouter, Route, Switch } from react-router-dom.
We will use ApolloClient and {gql} from apollo-boost package to connect React with Apollo. And import milligram CSS.
We will use the App component here. Also, import Post and NotFound components in src/AppRouter.js from respective files.

Continue reading “AppRouter setup with React, GraphQL, WordPress App”

Setup for React front-end with GraphQL to fetch WordPress back-end

This is the first part of Create react app with GraphQL way of WordPress data

Download WP-GraphQL from https://github.com/wp-graphql/wp-graphql and rename it wp-graphql. Install it in WordPress and active this plugin as usual. Then, visit

domain.name/?graphql
WP-Graphql success message
wp-graphql success message

If it shows a page of error, then confirmed wp-graphql plugin works.

Continue reading “Setup for React front-end with GraphQL to fetch WordPress back-end”

Create react app with GraphQL way of WordPress data

I am not going to compare REST vs GraphQL. As a silly Web developer, it is out of my boundary. If you are curious about this comparison, here are some good resources I found –

Also, GraphQL is topics in WordPress now-a-day.
https://kinsta.com/blog/wordpress-revolution-with-graphql/

You can find some other article about this tech war.

Anyhow, lets go to our main topics.
To make our journey a little easier, I will divide this development process in some parts.
Remember, I am writing these posts with share my development process. So, any part can be update in future part.
All posts are not completed yet. I am trying to complete all in next few days.

Create a react application with WordPress Rest API

Assume, create-react-app installed. Otherwise, follow https://mrinalbd.com/start-adventure-with-react/

Install brand new app with bash command.

npx create-react-app mrinalreact

Then, change directory and npm start with following command

cd mrinalreact && npm start

App will start at http://localhost:3000/

Continue reading “Create a react application with WordPress Rest API”

Start adventure with React

Install

First, we have to check our environment has node, npm and create-react-app tools available.
Type

node -v

in command prompt/terminal to check node is available. If not available grab it from https://nodejs.org/en/. Just need to install it. Nothing else.
Then, check npm is available with

npm -v


If it is not latest (5.2+) or broken type

[sudo] npm install npm -g

Hit enter and check npm available.
To install create react app type

[sudo] npm install -g create-react-app

All prerequisite installed.
Then, go to the desired directory in terminal and type

npx create-react-app new-react

Change directory to this new-app. Lastly, start this brand new react application with

cd new-app && npm start

Amazing travel with WP-CLI

WP-CLI is a great tools for develop and manage WordPress site without hassle.

Install WP-CLI

Before drive a bus, first need driving license. So, to use WP-CLI, install it in computer. I am using it on Ubuntu 16.04 operating system. LAMP stack and default terminal will fit for this. Open old, fat, big, black TERMINAL. If computer has already CURL installed, then type

$ curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
Continue reading “Amazing travel with WP-CLI”