This is the second edition of My Presentation for ReactNYC September 28, 2017 entitled React Workflows Without Create React App. Made with the reveal.js presentation deck which is created with vanilla JavaSscript. It incorporates changes made to React 16.6+, ESLint 5.9.0, Babel 7, and webpack 4 +.
Clone or download

React Workflow Without Create React App (CRA)

Updated November 28, 2018

Note on src/favicon.ico issue that comes up in the workflow:

I made a quick change to get rid of the src folder. Instead of injecting favicon.ico into index.html (which causes src/ to be copied into dist/), I placed favicon.ico into the root of static/. It then was copied into the root of dist where index.html resides. Result? No more src folder. Now you just have to manually add your favicon.ico link tag into index.html in src. That way it will copy over with the rest of index.html into dist.

Note December 2, 2018 re importing images in React:

As some of you may know, I wrote an article on October 7, 2017, regarding importing images in React based on the first edition of my custom React workflow. But now I am on to the second edition, and the changes that took place with various dependencies also impacted the configuration/support of image imports. Last night I tried to import images in to a new React project utilizing configurations from the old workflow, but it caused my Jest tests to fail. NOT GOOD! I did end up updating my Jest configurations to provide support for image imports, and then wrote about those changes. Please visit either my developer blog or to read the articles:

On My Developer Blog:

My updated custom React workflow (2nd edition) is here

The Importance Of ESlint (And React)

Importing Images in React 2.0: Jest (and Babel 7)

The Jest Side Effect

The New Babel 7 Config

On Medium:

My updated custom React workflow (2nd Edition) is here

The Importance Of EsLint (And React)

Importing Images in React 2.0: Jest (and Babel 7)

The Jest Side Effect

The New Babel 7 Config

How to fix the src/favicon.ico issue in dist/:

  • remove favicon.ico from the src folder
  • move favicon.ico into the root of static/ in src
  • remove import './favicon.ico'; from index.js
  • remove favicon: 'src/favicon.ico', from new htmlWebpackPlugin({}) configuration within plugins in config/webpack.base.config.js
  • don't forget to manually place the favicon.ico link in the head section of index.html in the src folder under the title tag: <link rel="shortcut icon" href="favicon.ico">

Reflects changes to React 16.6.3, Babel 7, ESLint 5.9.0, and Webpack 4.3.0

This is the second edition of a custom workflow I created for my React applications, incorporating changes that took place in React 16.6.3, ESLint 5.9.0, Babel 7, and Webpack 4. This is not meant as an all inclusive example of what has changed in those dependencies/devDependencies. Hopefully it will encourage others to take a deeper dive into them and expand their horizons as developers. I know that creating this deck expanded my horizons, and I had loads of fun learning new things along the way. To go through the first edition, please visit the React Workflow Presentation repository.

If you feel that there are improvements that can be made to any of the documentation, please make a pull request and it will be reviewed for approval. Thanks!

Site Map: