kyoko> > こんにちは こんにちは < </ /kyoko kyoko> > < <alex alex> > I I work work as as a frontend developer a frontend developer for for Cybozu and Cybozu and I I work work as as a frontend advisor a frontend advisor for for SmartHR SmartHR. . < </ /alex alex> > < <alex alex> >My Twitter and GitHub accounts are @koba04 My Twitter and GitHub accounts are @koba04< </ /alex alex> > < <victoria victoria> > I I'm also one 'm also one of of the organizers the organizers of of React React. .js meetup js meetup in in Tokyo and Tokyo and a contributor a contributor of of React React. . < </ /victoria victoria> > < <victoria victoria> >I I've been working 've been working with with React React for for 5 5years years. .< </ /victoria victoria> > < </ /> >, , { {} } ) ); ;
programming paradigm—a style of building the structure and elements of computer programs—that expresses the logic of a computation without describing its control flow. Many languages that apply this style attempt to minimize or eliminate side effects by describing what the program must accomplish in terms of the problem domain, rather than describe how to accomplish it as a sequence of the programming language primitives
querySelector( ('.view' '.view') ); ; const const addButton addButton = = document document. .querySelector querySelector( ('.add-button' '.add-button') ); ; const const state state = = [ [] ]; ; addButton addButton. .addEventListener addEventListener( ('click' 'click', , ( () ) => => { { // update the state impleratively // update the state impleratively state state. .push push( (child child) ); ; // describe the view declaratively based on the state // describe the view declaratively based on the state render render( (state state) ); ; } }) ); ; // describing what the view should display // describing what the view should display const const render render = = state state => => { { view view. .innerHTML innerHTML = = state state. .map map( (s s => => ` `<span> <span>${ ${s s} }</span> </span>` `) ). .join join( ('' '') ); ; } } Describing what to update the view
insertBefore insertBefore( ( parentInstance parentInstance: : Instance Instance, , child child: : Instance Instance | | TextInstance TextInstance, , beforeChild beforeChild: : Instance Instance | | TextInstance TextInstance ) ): : void void { { // we have to remove a current instance at first // we have to remove a current instance at first const const index index = = parentInstance parentInstance. .children children. .indexOf indexOf( (child child) ); ; if if ( (index index !== !== - -1 1) ) { { parentInstance parentInstance. .children children. .splice splice( (index index, , 1 1) ); ; } } // And then, we insert the instance into a new index // And then, we insert the instance into a new index const const beforeIndex beforeIndex = = parentInstance parentInstance. .children children. .indexOf indexOf( (beforeChild beforeChild) ); ; parentInstance parentInstance. .children children. .splice splice( (beforeIndex beforeIndex, , 0 0, , child child) ); ; } }