ReactJS Workflows
- 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
- 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