Setup React with webpack 3, babel and NPM – Jakob Lind

How to setup React with webpack 3, babel and NPM  #reactjs #javascript

  • To get started with React you have to learn and configure NPM, webpack, babel AND React.
  • You have probably heard of create-react-app (CRA) which is an official tool to start a new React project.
  • Next, we are going to create our minimal React app and HTML file.
  • Our webpack config file looks like this: – – It contains the following: – – Babel is a highly configurable tool to transpile JavaScript.
  • Our webpack config uses babel-loader to run babel which uses the regular babel config file.

A few years ago jQuery was the best practice for Javascript/frontend development. Getting started with jQuery was as simple as creating an index.html document, include jQuery and start writing code.
Continue reading “Setup React with webpack 3, babel and NPM – Jakob Lind”

Porting enterprise React app to create-react-app – Mihir Karandikar – Medium

  • The short term goal was to see how difficult it is to move the legacy code to CRA; the long term goal being bringing all of our applications under CRA’s fold.The reason for choosing CRA over any other boilerplate is that CRA is truly unopinionated which makes it ideal for porting legacy React applications.
  • Removing all relative imports likeimport * as actions from module-like imports import * as actions from ‘actions/MyActions’And finally write a new build process on our build server since CRA recommends using Yarn.That meant, a decision was to be made!We were debating over ejecting the create-react-app setup Vs. using custom react-scripts.
  • But then I realized that ejecting would make it nearly impossible to keep up with the daily updates of CRA, which meant that custom react scripts was the best way to go.
  • Things were looking good.I’m not going to go in the implementation details of migration, but the purpose of my post is to let others know that it is absolutely possible to port your app to CRA no matter how weird your legacy app setup is.With the power of CRA + custom react scripts, we now TRULY have a zero configuration tool in our tool-belt.
  • From now on, to migrate/create the next app, all we need to do is create-react-app my-app –scripts-version xoxo-react-scriptsand we’re off and running!Things to keep in mindTo my disappointment, CRA does not come with react-hot-loader.

So I’ve been writing React apps for a year now. I’ve had the honor of being one of the maintainers of react-boilerplate. If you’re a React developer, you know how it is- You get the mock-ups, you get…
Continue reading “Porting enterprise React app to create-react-app – Mihir Karandikar – Medium”

A case for Create React App – codeburst

A case for Create #ReactJS App:  #JavaScript

  • A case for Create React AppRecently, I heard my colleague explain why he doesn’t use Create React App (CRA) or any boiler plate for that matter on any of his projects.
  • So in using create react app for instance he had ejected and found out that it produced a very complicated Webpack config file.
  • He argued that create react app added a lot of unnecessary bloat to react projects.I believe this is a valid concern when starting up projects you expect to be used for a long time.
  • If you do eject, you get a simple Webpack config file that explains every line so you make every change with confidence.
  • You may never get to this point, though; CRA allows you to create your app without standing in your way.

Recently, I heard my colleague explain why he doesn’t use Create React App (CRA) or any boiler plate for that matter on any of his projects. I agreed with a couple of his points but didn’t agree on…
Continue reading “A case for Create React App – codeburst”

A case for Create React App – Erika Dike – Medium

A case for Create React App  #react #webpack #createreactapp #reactjs

  • A case for Create React AppRecently, I heard my colleague explain why he doesn’t use Create React App (CRA) or any boiler plate for that matter on any of his projects.
  • So in using create react app for instance he had ejected and found out that it produced a very complicated Webpack config file.
  • He argued that create react app added a lot of unnecessary bloat to react projects.I believe this is a valid concern when starting up projects you expect to be used for a long time.
  • If you do eject, you get a simple Webpack config file that explains every line so you make every change with confidence.
  • You may never get to this point, though; CRA allows you to create your app without standing in your way.

Recently, I heard my colleague explain why he doesn’t use Create React App (CRA) or any boiler plate for that matter on any of his projects. I agreed with a couple of his points but didn’t agree on…
Continue reading “A case for Create React App – Erika Dike – Medium”

Creating a Custom, Maintainable React-Scripts Package – Helpful Human

Creating a Custom, Maintainable React-Scripts Package:  by @Canfie1d #ReactJS #JavaScript

  • When Facebook released Create React App(CRA), I was excited to be able to harness their knowledge of the build process in my applications.There was an issue, however.While create-react-app was an amazing boilerplate to kick off a project with, it didn’t include everything we needed to include in new React projects.
  • While using this method was considerably faster than setting up a new application from scratch or basic from a boilerplate, it was important to me that the application could still rely on updates from the React team.Powered with information gleaned from that experimentation, we set out to create a way to harness the power of CRA with the added benefit of including other dependencies we required out of the box.
  • This discovery was the key to unlocking our ability to harness CRA.We began reading through how Kitze, the author of custom-react-scripts, enabled the ability to use a custom scripts package and came across an undocumented code snippet in his documentation:create-react-app my-app –scripts-version CRA had an undocumented hook built into the API to override the default react-scripts with your own.
  • While custom-react-scripts is an amazing package for setting up projects with differing requirements, we only needed one specific set up for our team.Poised with new information, we forked CRA and began editing the react-scripts to include the missing pieces.
  • This was a major step in the right direction and is sure to drastically cut down on the time it takes to spin up a new application.Next StepsWhile the few modifications we added to react-scripts are nice, we have plans to expand helpful-react-scripts further to include other dependencies such as a custom linting configuration, react-axe, redux-responsive, a font loader, Webpack code chunking, and other progressive web application considerations such as offline-plugin and a service worker.We are also developing our own version of create-react-app called helpful-cli in order to extend the functionality of CRA into including optional front-end packages such as moment.js and lodash.js as well as backend boilerplate and configurations.Since publishing helpful-react-scripts to NPM, we’ve seen 1,600 downloads in the last month and could see that number rise as we add functionality and it becomes more stable.If you found helpful-react-scripts helpful to you, let us know!

At Helpful Human, we were looking for a new solution to quickly spin up new projects. We wanted to lean on Facebook’s knowledge of React, Webpack, and best practices surrounding the configuration and…
Continue reading “Creating a Custom, Maintainable React-Scripts Package – Helpful Human”