WarsawJS Slides: Template

Martyna Nowocień

"React na start" [PL]

2017-03-08

@Geekchick_Marty

React

javascript library
UI
V & C from MVC
one way data flow
izomorphic rendering
ignore good practices?

Component example

            
                class Hello extends React.Component {
                    render() {
                        return(
                            <h1>Hello World</h1>
                        )
                    }
                }

JSX example

            
                class Hello extends React.Component {
                    render() {
                        return(<div>Hello World</div>)
                    }
                }
                class Hello extends React.Component {
                    render() {
                        return React.createElement('div', null, `Hello World`);
                    }
                }

angular: <div ng-repeat='element in list'>
ember: {{#each element in list}}
knockout: data-bind='foreach: list'>

JSX: {list.map(createElementRow)}

Virtual DOM

The Virtual DOM is an abstraction of the HTML DOM. It is lightweight and detached from the browser-specific implementation details. Since the DOM itself was already an abstraction, the virtual DOM is, in fact, an abstraction of an abstraction.

http://reactkungfu.com/

Structuring React Projects

Directory per Concept
Directory per Component
Directory per View

Directory per Concept

actions
     LaneActions.js
     NoteActions.js
components
     App.jsx
     Editable.jsx
     Lane.jsx
     Lanes.jsx
     Note.jsx
     Notes.jsx
constants
     itemTypes.js
index.jsx
libs
     alt.js
     persist.js
     storage.js
main.css
stores
     LaneStore.js
     NoteStore.js

Directory per Component

actions
     LaneActions.js
     NoteActions.js
components
     App
          App.jsx
          app.css
          app_test.jsx
          index.js
     Editable
          Editable.jsx
          editable.css
          editable_test.jsx
          index.js
...
     index.js
constants
     itemTypes.js
index.jsx
libs
     alt.js
     persist.js
     storage.js
main.css
stores
     LaneStore.js
     NoteStore.js

Directory per View

components
     Note
          Note.jsx
          index.js
          note.css
          note_test.jsx
     Routes
          Routes.jsx
          index.js
          routes_test.jsx
     index.js
...
index.jsx
main.css
views
Home
     Home.jsx
     home.css
     home_test.jsx
     index.js
Register
     Register.jsx
     index.js
     register.css
     register_test.jsx
index.js