Scribd Logo
Upload

Welcome to Scribd!

  • 2016 Js React PDF

    Uploaded by

    Héla Ben Khalfallah
    171 views12 pages

    Original Title

    2016_js_react.pdf

    Copyright

    © © All Rights Reserved

    Available Formats

    PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    171 views12 pages

    2016 Js React PDF

    Uploaded by

    Héla Ben Khalfallah

    Copyright:

    © All Rights Reserved
    Download as PDF, TXT or read online from Scribd
    Flag for inappropriate content
    of 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/

    You might also like