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: Frontend - AngularJS

# FrontEnd Technologies: # Web (Internet) - Html, css framework (bootstrap, material design-> component based) Angular 2 - Single page application (fast). - Web application or website that interacts with the user by dynamically rewritting the current page rather than loading entire new pages from a server. - Can do asynchronous jobs. # Tools: - Typescript - VS code # MVVW (Model View ViewModel Pattern) -> two-way data binding - In angular, the controller (the C in MVC) is replaced by ViewModel (the VM in MVVM). # Typescript Programming Language Typescript (.ts) is imp in angular 2. - supersetup js - strictly typed program - can do class based oop - future programming language. - security maintain (TS code compile and run in js) - JS with additional features. # Data Binding - Controller and Views synchronize. Types: 1. Event - eg: click, onClick, change 2. Property - eg: hide, show 3. 2-way binding - Reflect in view if changes in model- c...

Coding

Search This Blog