Another Web Engineer
This is the sixth part of Create react app with GraphQL way of WordPress data
In this part, we will develop a Post component for our application. But, before diving in this, we will develop a Loading component for seeing landing or search status in our application. Let’s dive into Loading component development.
Continue reading “Post Component in React”This is the fifth part of Create react app with GraphQL way of WordPress data
In this part, we will develop PostWidget component and a small edit of src/components/AppRouter.js
Continue reading “PostWidget component in React”This is the fourth part of Create react app with GraphQL way of WordPress data
In this part, we will develop Posts component at src/components/Posts.js
Continue reading “Posts component in React”This is the third part of Create react app with GraphQL way of WordPress data
In this part, we will build the App component at src/components/App.js
Here kick on styled-components. And we use Posts and PostWidget component here. For that, we can introduce props.
Continue reading “App Component in React”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”