Another Web Engineer
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.
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
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”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.
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/
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
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.pharContinue reading “Amazing travel with WP-CLI”