Presentation in Masterclass for Developers Program 16 July 2017, Jakarta, Indonesia ------------------------------------------------------------ I know this presentation does not cover everything about reactjs, we only give 10 minutes. thanks for Rod Nolan from facebook , you are the best instructor :D

1. Introduction to ReactJs
From a PHP Developer Point of View
Masterclass for Developers
Jakarta, 16 July 2017

2. Abdul Jabar Hakim
Work in 8villages Indonesia
as Frontend Developer
Goes To Campus Program (2 Months)
PHP Indonesia Regional Bekasi
About Me
PHP Indonesia
Members

3. ReactJs ?

4. ReactJs is library
for building User Interface
Not Same
Laravel
Not Same
CodeIgniter
Not Same
YII

5. ReactJs is V in MVC
Controller
Model Model Model
View

6. Why React ?
Virtual DOM
Not So Hard
(with JSX)
Reusable
One Way
DataFlow
etc, etc, etc......
Write Once
Use Everywhere

7. talking about
ReactJs
we talking about
Component
MainApp
Component
Component
Header
Component
Navigation
Component
CardList
Component Component Component
Component Component Component

8. Data Control ?
props are set by the parent and they are fixed
throughout the lifetime of a component.
For data that is going to change, use state.

9. Control Data
with
Props
MainApp
Component
Header
Component
Navigation
Component
CardList
Component
import Header from '../layout/Header';
import Navigation from '../layout/Navigation;
import Cardlist from '../layout/CardList;
....
<Header dataHeader={dataForHeader} />
<Navigation dataNavigation={dataForNavigation} />
<CardList dataCardList={dataForCardList} />
.....
...
console.log(this.props.dataHeader)
....
like,
$this->load->view('myView', $data,true)

10. Control Data
with
State
import React from 'react';
class exampleApp extends React.Component {
constructor(props) {
super(props);
this.state = {
defaultName : 'Anonymous'
};
}
changeName(){
this.setState({
defaultName:'Hakim'
});
}
render () {
return(
<div style={{textAlign:'center',marginTop:50}}>
<h1>{this.state.defaultName}</h1>
<button onClick = {this.changeName.bind(this)}>
Test</button>
</div>
);
}
}
export default exampleApp;

11. Lets Improve now !
https://facebook.github.io/react
If you want learn react,
just learn javascript
https://facebook.github.io/react/docs/installation.html