Tweet
Tweet

Slide 1

Slide 1 text

Structuring a React.js App

Slide 2

Slide 2 text

Mauricio Soares Software Developer @ Loggi @omauriciosoares gh/mauriciosoares

Slide 3

Slide 3 text

Default Pattern ʮʒʒ actions ʮʒʒ components ʮʒʒ containers ʮʒʒ index.js ʦʒʒ reducers

Slide 4

Slide 4 text

Works very well for small projects But still there’s a problem…

Slide 5

Slide 5 text

Too many components ʮʒʒ actions ʮʒʒ components ʔ ʦʒʒ … 30 files ʮʒʒ containers ʔ ʦʒʒ … 15 files ʮʒʒ index.js ʦʒʒ reducers

Slide 6

Slide 6 text

A Solution Not the silver bullet

Slide 7

Slide 7 text

ʮʒʒ actions ʮʒʒ index.js ʮʒʒ reducers ʮʒʒ screens ʦʒʒ shared

Slide 8

Slide 8 text

Actions and Reducers basically keeps the same

Slide 9

Slide 9 text

ʮʒʒ actions ʮʒʒ index.js ʮʒʒ reducers ʮʒʒ screens ʦʒʒ shared shared is everything that can be used within your application (utils / components / routes / constants)

Slide 10

Slide 10 text

ʮʒʒ actions ʮʒʒ index.js ʮʒʒ reducers ʮʒʒ screens ʦʒʒ shared Screens are components that have a great responsability on your application (usually containers)

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

ʦʒʒ screens ʮʒʒ header ʔ ʦʒʒ index.js ʮʒʒ map ʔ ʦʒʒ index.js ʮʒʒ order ʔ ʦʒʒ index.js ʦʒʒ sidebar ʔ ʦʒʒ index.js

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

ʦʒʒ screens ʦʒʒ order ʦʒʒ screens ʮʒʒ form ʔ ʦʒʒ index.js ʦʒʒ summary ʦʒʒ index.js Screens may have inner screens

Slide 16

Slide 16 text

ʦʒʒ screens ʦʒʒ order ʮʒʒ screens ʔ ʮʒʒ form ʔ ʔ ʦʒʒ index.js ʔ ʦʒʒ summary ʔ ʦʒʒ index.js ʦʒʒ shared ʦʒʒ components ʦʒʒ select ʦʒʒ index.js Screens may have a shared folder

Slide 17

Slide 17 text

If a file is shared among other root screens, it goes to the root shared folder

Slide 18

Slide 18 text

ʦʒʒ screens ʦʒʒ order ʦʒʒ shared ʦʒʒ components ʦʒʒ select ʮʒʒ __tests__ ʦʒʒ index.js Tests files belongs to it’s context

Slide 19

Slide 19 text

ʦʒʒ screens ʦʒʒ order ʦʒʒ shared ʦʒʒ components ʦʒʒ select ʮʒʒ __tests__ ʮʒʒ index.css ʦʒʒ index.js CSS files belongs to it’s context as well (thank God webpack!)

Slide 20

Slide 20 text

inner folders === path hell

Slide 21

Slide 21 text

import CoreComponent from '../../../../../../../shared/components/core-component'

Slide 22

Slide 22 text

web builders for the rescue! webpack: https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories grunt: https://github.com/jmreidy/grunt-browserify#alias

Slide 23

Slide 23 text

import CoreComponent from 'shared/components/core-component';

Slide 24

Slide 24 text

Thanks!