Saturday, December 31, 2016

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


Friday, December 30, 2016

React.js Routes and Navigation Bar

Thursday, December 29, 2016

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>
);
}
}

Tuesday, December 13, 2016

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

Sunday, December 4, 2016

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

Blog Archive