This document discusses React workflows, including: - The benefits of using Create React App to get started quickly without configuring Webpack or Babel. - Why you may want to configure your own build rather than using Create React App, including having more control over customizations and updates. - An overview of Webpack and using it to bundle assets, optimize builds, and add dependencies like Babel, Sass, and plugins for code splitting and asset optimization. - Other topics covered include React styling options, testing advantages, folder structures, and additional tools that could be included like Flux architecture and Storybook.

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

2. CREATE
REACT
APP

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

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

5. WHY
SHOULD
NOT
USE CRA

6. 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

7. WEBPACK

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

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

11. 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.

12. 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.

14. 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

15. 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

16. 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.

17. 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.

20. STYLES

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

22. TESTS

24. 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

25. FOLDER
STRUCTURE

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

27. Thank you
Any questions?