REACT WORKFLOWS
CEM ARGUVANLI
cemarguvanli@gmail.com
twitter.com/cemarguvanli

CREATE
REACT
APP

BENEFITS
▸ No Webpack configurations
▸ No Babel configurations
▸ Sass & CSS modules (came with v2.0)
▸ Start coding right away

CONFIGURATION SHOULD NOT
STAND IN THE WAY OF GETTING
STARTED.
Dan Abramov
TEXT

WHY
SHOULD
NOT
USE CRA

THE MAGIC IS HIDDEN FROM YOUR VIEW
▸ What is going on?
▸ There will be always customizing issues**
▸ You can’t use latest updates
▸ Extra dependencies
▸ Eject

WEBPACK

Module Bundler
Webpack is a build tool that
puts all of your assets, including
JavaScript, images, fonts, and
CSS, in a dependency graph.

BENEFITS
▸ Stable production deploys
▸ Dead asset elimination
▸ Fast
▸ Full of control
▸ Good documentation

DEPENDENCIES
▸ webpack: We need Webpack to bundle our code.
▸ webpack-cli: We will be using some CLI features of
Webpack to make our lives easier while writing some
scripts.
▸ webpack-dev-server: we will create a server using the
webpack-dev-server package. This is only meant to be used
in the development environment, and not for production.
This means while developing and working on my code, I
don’t need a separate server like NodeJS to setup manually.

DEPENDENCIES
▸ webpack-merge: To divide our configuration into chunks
▸ style-loader: This adds CSS to the DOM by injecting a
script tag in the header
▸ sass-loader: For SCSS support
▸ webpack-visualizer-plugin: To see a visual representation
of each of our bundle size — how much space they are
taking and what are their dependencies.

DEPENDENCIES
▸ node-sass: A dependency for sass-loader
▸ css-loader: To convert our .scss files into .css
▸ mini-css-extract-plugin: This plugin extracts CSS into
separate files. It creates a CSS file per JS file which
contains CSS.
▸ uglifyjs-webpack-plugin: To minify JavaScript code for
production

DEPENDENCIES
▸ optimize-css-assets-webpack-plugin: To minify CSS code for
production
▸ html-webpack-plugin: This does more then generate an HTML
file, it supports on demand .css and .js files automatically
added to your HTML files on demand
▸ copy-webpack-plugin: Copies files/folders to your build folder.
▸ babel-loader: This is the loader that helps webpack compile .js
files

DEPENDENCIES
▸ @babel/core: Babel core compiler, this is a dependency that lets
you use babel-loader
▸ @babel/preset-react Babel preset for React code
▸ @babel/preset-env: Babel preset that allows you to use the
latest JavaScript
▸ @babel/pollyfill: Babel includes a polyfill that includes a
custom regenerator runtime and core-js. This will emulate a full
ES2015+ environment. This means support for async/await type
of cool syntax sugar.

DEPENDENCIES
▸ @babel/plugin-proposal-class-properties: Coverts your
class syntax into a function for browsers that don’t support
class syntax
▸ @babel/plugin-syntax-dynamic-import: This is what helps
with code splitting. Webpack ships with code splitting by
default (Since webpack 1). But when you want to code
split in webpack while you are using babel, then you need
to use this plugin.

STYLES

REACT STYLESHEETS
▸ Classic Approach: Using Regular CSS Stylesheets
▸ Styled Component
▸ CSS Modules Stylesheet
▸ CSS in JS
▸ * classnames package

TESTS

ADVANTAGES OF TEST
▸ Facilitates discovering bugs in the development phase,
before it reaches users
▸ Enforces writing better code that is more modular, covers
edge cases, and easily testable
▸ Lowers the risk when making large changes or refactors
▸ Provides documentation and helps the next engineer
understand what the code should do

FOLDER
STRUCTURE

WHAT ARE WE MISSING?
▸ Flux architecture
▸ Pre-commit
▸ Storybook
▸ Linters
▸ Deployment
▸ Error boundary

Thank you
Any questions?