Download to read offline
ReactJS Workflows
- 1.
- 2.
- 3. BENEFITS ▸ No Webpackconfigurations ▸ No Babel configurations ▸ Sass & CSS modules (came with v2.0) ▸ Start coding right away
- 4. CONFIGURATION SHOULD NOT STANDIN THE WAY OF GETTING STARTED. Dan Abramov TEXT
- 5.
- 6. THE MAGIC ISHIDDEN FROM YOUR VIEW ▸ What is going on? ▸ There will be always customizing issues** ▸ You can’t use latest updates ▸ Extra dependencies ▸ Eject
- 7.
- 9. Module Bundler Webpack isa build tool that puts all of your assets, including JavaScript, images, fonts, and CSS, in a dependency graph.
- 10. BENEFITS ▸ Stable productiondeploys ▸ Dead asset elimination ▸ Fast ▸ Full of control ▸ Good documentation
- 11. DEPENDENCIES ▸ webpack: Weneed 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: Todivide 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: Adependency 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 minifyCSS 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: Babelcore 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: Covertsyour 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.
- 21. REACT STYLESHEETS ▸ ClassicApproach: Using Regular CSS Stylesheets ▸ Styled Component ▸ CSS Modules Stylesheet ▸ CSS in JS ▸ * classnames package
- 22.
- 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.
- 26. WHAT ARE WEMISSING? ▸ Flux architecture ▸ Pre-commit ▸ Storybook ▸ Linters ▸ Deployment ▸ Error boundary
- 27.