Vous êtes sur la page 1sur 12

Introduction ReactJS

Franois Agneray

21 Janvier 2016 Action nationale DevLOG JavaScript


Prsentation
Permet de faciliter la cration d'application web monopage

Les caractristiques :

ReactJS permet de fabriquer des composants


web

Un composant ReactJS gnre du code HTML


chaque changement d'tat

ReactJS ne gre que la partie interface de


l'application web (Vue)

ReactJS peut tre utilis avec une autres


bibliothque ou un framework (AngularJS)
JSX
Les composants ReactJS sont dcrits via le langage JSX

Un premier exemple de composant simple :



Notre composant dfini une mthode render()

Notre composant accepte un paramtre d'entre name accessible via this.props

Notre composant est mont sur le nud dont l'id est app

varHelloMessage=React.createClass({
render:function(){
return<div>Hello{this.props.name}</div>;
}
});

ReactDOM.render(<HelloMessagename="John"/>,app);
Babel
Les scripts JSX doivent tre compils en JavaScript
varHelloMessage=React.createClass({
render:function(){
return<div>Hello{this.props.name}</div>;
}
});

ReactDOM.render(<HelloMessagename="John"/>,app);

varHelloMessage=React.createClass({
displayName:"HelloMessage",
render:functionrender(){
returnReact.createElement("div",null,"Hello",this.props.name);
}
});

ReactDOM.render(React.createElement(HelloMessage,{name:"John"}),app);
HTML
Pour fonctionner la page HTML doit :

Charger la bibliothque ReactJS

Charger la bibliothque Babel Browser

Spcifier le type text/babel pour les fichiers JSX

<!DOCTYPEhtml>
<htmllang="en">
<head>
<title>HelloReact!</title>
<linkrel="stylesheet"href="css/app.css"/>
</head>
<body>
<divid="app"></div>

<scriptsrc="bower_components/react/react.min.js"></script>
<scriptsrc="bower_components/react/reactdom.min.js"></script>
<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/babel
core/5.8.23/browser.min.js"></script>
<scripttype="text/babel"src="js/helloworld.jsx"></script>
</body>
</html>
Composant avec tat
Un composant ReactJS peut garder un tat interne
varTimer=React.createClass({
getInitialState:function(){
return{secondsElapsed:0};
Secondes : 0
},
tick:function(){
this.setState({secondsElapsed:this.state.secondsElapsed+1});
},
componentDidMount:function(){ Secondes : 1
this.interval=setInterval(this.tick,1000);
},
componentWillUnmount:function(){
clearInterval(this.interval);
}, Secondes : 2
render:function(){
return(
<div>Secondes:{this.state.secondsElapsed}</div>
); ...
}
});

ReactDOM.render(<Timer/>,app);
Composant complexe
varBoard=React.createClass({
render:function(){
varclassName="board";
if(this.props.selected){
className+="selected";
}
return(
<divclassName={className}>
{this.props.index+1}
</div>
);
}
});

.board{
border:5pxsolid#ccc;
float:left;
font:70024pxHelvetica;
marginright:20px;
padding:20px;
}
Composant complexe
varBoardSwitcher=React.createClass({
getInitialState:function(){
return{selectedIndex:0}
},

onToggleClick:function(){
this.setState({
selectedIndex:(this.state.selectedIndex+1)%this.props.numBoards
})
},

render:function(){
varboards=[];
for(varii=0;ii<this.props.numBoards;ii++){
varisSelected=(ii===this.state.selectedIndex);
boards.push(<Boardindex={ii}selected={isSelected}/>);
}

return(
<div>
<divclassName="boards">{boards}</div>
<buttononClick={this.onToggleClick}>Toggle</button>
<div>selectedboard:{this.state.selectedIndex+1}</div>
</div>
);
}
});
Composant complexe
React.render( .boards{
<BoardSwitchernumBoards={5}/>, margin:20px0;
document.body overflow:hidden;
); }
.board.selected{
bordercolor:#3BA8AA;
}

onClick
Sudoku

http://andrey.nering.com.br/sudoku/
Netflix
Conclusion

La documentation et des tutoriaux sont disponibles sur :

https://facebook.github.io

Des exemples d'application sont disponibles sur :

https://react.rocks

http://www.overreact.io/