react.js with PHP, cookies/CORS/session id etc

I am working on a react.js app on my Windows machine. Dev server is running on http://localhost:3000. While connection to my backend PHP server at http://mydomain.com, I ran into multiple issues related to CORS - Cross Origin Resource Sharing

Here are some problems and solution

If you want everything to work smoothly, do this

In your PHP code, add this:

header("Access-Control-Allow-Origin: http://localhost:3000");

header("Access-Control-Allow-Credentials: true");

or in your .htaccess file add this:

Access-Control-Allow-Origin: http://localhost:3000

Access-Control-Allow-Credentials: true

and while sending requests from react.js, for which I was using fetch API, in every request add credentials: 'include'

fetch('http://mydomain.com/script.php,{credentials: 'include'}).then(function (response) {
    return response.json()
}).then(function (resp) {
    console.log(resp)
    that.setState({blogList: resp})
})

---------------------------------

Another solution is to run Chrome like this: (this will disable CORS checks)

chrome.exe --disable-web-security --user-data-dir=c:\mydata

------------------------------------------

Another error message you may get depending upon your code/config is this: (but the above solution is perfect)

A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true.

-------------------------

Another error you might encounter is this:(Even this problem will disappear if you follow the first solution)

1. PHP is sending PHPSESSID as a response cookie in your first request

2. But your next request is not using that cookie as a request cookie, or is using a different PHPSESSID

React.js Routes and Navigation Bar

https://medium.com/@dabit3/beginner-s-guide-to-react-router-53094349669

http://stackoverflow.com/questions/35687353/react-bootstrap-link-item-in-a-navitem

React.js - fetching html from a URL and setting it in an element

import * as React from "react";
export default class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            data: ''
        };
    }

    componentDidMount() {
        let self = this;
        fetch('http://blog.domain.com/admin.php')
            .then(function (response) {
                return response.text()
            }).then(function (text) {
            console.log(text)
            self.setState({
                data: text
            });
        })
    }

    render() {
        return (<div dangerouslySetInnerHTML={{__html: this.state.data}}></div>
        );
    }
}

installing nodejs on Amazon Linux

curl -sL https://rpm.nodesource.com/setup_6.x | bash -

yum -y install nodejs

higher order components(HOC) in react

https://www.sitepoint.com/react-higher-order-components/

react.js read further

relay, mabx, redux, graphql
css + react + radium

react.js

https://www.safaribooksonline.com/library/view/reactjs-fundamentals-and/9780134688671/

https://www.safaribooksonline.com/library/view/advanced-reactjs-livelessons/9780134676920/

getInitialState() will make it available as this.state

multiple apps in one page

return inside render is same as createElement

return () pattern is required since in the parenthesis you don't have to worry about multiple lines
promise in ES6 - reject/resolve will tie to catch/then

lifecycle methods - componentDidMount componentWillMount componentDidUnMount

higher order component - not clear

propTypes - good for types/validation

performance improvement => shouldComponentUpdate/add key to siblings

buying/purchasing a wildcard ssl certificate

http://serverfault.com/questions/599219/how-to-decide-where-to-purchase-a-wildcard-ssl-certificate

renew letsencrypt certs

./letsencrypt-auto renew

no module named interface -> http://stackoverflow.com/questions/38170100/letsencrypt-importerror-no-module-named-interface-on-amazon-linux-while-renewin

React.js fundamentals

Babel,webpack, ES6 => ES5

JS

functional programming -> map,filter,reduce

execution context -> call,bind,apply

ES6 new features

template strings

default arguments, variable arguments
arrow functions

lexical scoping for vars but dynamic scoping for this

but lexical scoping for this with arrow functions

destructuring => arrays and objects

react export,import similar to destructuring 
ES6 classes are similar to other OOP classes, but use prototyping in background