Wordpress React Theme Development

1) Download wordpress file from https://wordpress.org/download/ 2) Open xampp, wamp or openserver. I will show with xampp server. Also Xampp server recommended too. 3) Add wordpress folder to htdocs folder (for xampp) 4) cd xampp\htdocs\wordpress\wp-content\themes 5) npx create-react-wptheme react_theme 6) cd react_theme/react-src 7) yarn start 8) go to wp-admin dashboard change worpdress theme to react_theme 9) again yarn start 10) yarn build

App.js

http://localhost/wordpress_react/?rest_route=/wp/v2/posts

import React, { Component } from 'react';

class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            data:[]
        }
    }

    componentDidMount() {
        return fetch(`http://localhost/wordpress_react/?rest_route=/wp/v2/posts`)
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    data: responseJson
                });
            })
            .catch((error) => {
                console.log(error);
            });
    }
        render(){
            return(
                <div>
                <h1>Fetching the data and updating the state now.</h1>
            {this.state.data.map((item, i) => (<p key={i}>{item.title.rendered}</p>))}

                </div>
            )
        }
}
export default App;

Comments

Javascript: Object to Array and Array to Object

Output: Final Array [ { mango: 1 }, { apple: 2 }, { banana: 3 }, { orange: 1 }, { watermelon: 1 }, { papaya: 1 } ] Output: Final Object { mango: 1, apple: 2, banana: 3, orange: 1, watermelon: 1, papaya: 1 }

Javascript: Callback and High Order Function

CALLBACK A callback is a function that gets invoked after an asynchronous result appears. a callback function is an async function argument. - Asynchronous code result handle using callback and promises. // callback function function with argument // ---argument :// if a function pass-through function as an argument, it is higher-order function. function needs to be called in order to execute. a callback is used when calling a function asynchronous What is a Callback or Higher-order Function? A callback function , also known as a higher-order function, is a function that is passed to another function (let’s call this other function “otherFunction”) as a parameter, and the callback function is called (or executed) inside the otherFunction. A callback function is essentially a pattern (an established solution to a common problem), and therefore, the use of a callback function is also known as a callback pattern. High-order function is a function that takes ...

Javascript Conference: Functional- Map, Reduce and Filter vs Object Oriented Programming

What is functional programming? and why? Source: https://www.youtube.com/watch?v=e-5obm1G_FY A programming paradigm a coding style a mindset a sexy, buzz-wordy trend safer, easier to debug/maintain established community Not functional: var name = “Anjana”; var greeting = “Hi, I’m ”; console.log(greeting + name); Output : “Hi, I’m Anjana” Functional: function greet(name) { return “Hi, I’m ” + name; } greet(“Anjana”); Output: “Hi, I’m Anjana” Avoid side effects use “pure” functions Not pure: var name = “Anjana”; function greet() { console.log(“Hi, I’m ” + name); } Pure: function greet(name) { return “Hi, I’m ” + name; } Use higher-order functions functions can be inputs/outputs function makeAdjectifier(adjective) { return function (string...

Coding

Search This Blog