---
title: "#356: Setting Up Webpack, Babel and React From Scratch"
publication: "JavaScript Weekly"
issue: 356
published_at: "2017-10-13"
canonical_url: "https://javascriptweekly.com/issues/356"
---

#356: Setting Up Webpack, Babel and React From Scratch

This week's JavaScript news — [Read this e-mail on the Web](http://javascriptweekly.com/issues/356)

JavaScript WeeklyIssue 356 — October 13, 2017[3rd Edition of 'Eloquent JavaScript' Announced](https://eloquentjavascript.net/3rd_edition/)Marijn Haverbeke is working on a new edition of the perennially popular JavaScript book, but needs your help to fund it. Marijn Haverbeke 
[Setting Up Webpack, Babel and React From Scratch, Revisited](https://stanko.github.io/webpack-babel-react-revisited/)An updated, detailed step-by-step guide for getting set up, following best practices and giving you a solid ground to start from. Stanko Tadić 
[![GrapeCity Wijmo\](https://copm.s3.amazonaws.com/c2f00c85.png)](https://www.grapecity.com/en/wijmo-flexgrid?utm_source=FrontEndFocus&utm_medium=Newsletter&utm_campaign=Wijmo_10-17)[Get FlexGrid, the best JavaScript data grid: Fast, flexible, no dependencies](https://www.grapecity.com/en/wijmo-flexgrid?utm_source=FrontEndFocus&utm_medium=Newsletter&utm_campaign=Wijmo_10-17)With no dependencies and a small footprint, Wijmo FlexGrid is built for speed and extensibility. You'll get built-in, first-class Angular support, an Excel-like interface, sorting, globalization, filtering, group panels, and row details. GrapeCity WijmoSponsor
[Taucharts One: A Mature Charting Library with a Simple API](https://blog.taucharts.com/taucharts-one/)Has a lot of features including timeline charts, value highlighting, and a sparkline mode for dense data. Taucraft 
[A JavaScript's Promise That Leaks Memory (and Why)](https://alexn.org/blog/2017/10/11/javascript-promise-leaks-memory.html)What you can do about memory leaks in recursive loops. Alexandru Nedelcu 
[Nrwl Nx: A Toolkit for Enterprise Angular Applications](https://blog.nrwl.io/nrwl-nx-an-open-source-toolkit-for-enterprise-angular-applications-38698e94d65)An opinionated, open-source toolkit for building Angular-based apps using patterns that suit enterprise-style development. Victor Savkin 
[ProseMirror 1.0: A Toolkit for Building Rich Text Editors](http://marijnhaverbeke.nl/blog/prosemirror-1.html)[ProseMirror](http://prosemirror.net/), which lets you bridge the gap between Markdown-style text editing and classical WYSIWYG editors, has reached a key milestone. Marijn Haverbeke 


Jobs

- [Senior React Native Engineer, Retail Team](http://grnh.se/61ye8h1?utm_source=javascriptweekly&utm_medium=email)We're looking for an experienced dev to bring the Casper experience beyond the web and into reality, focusing on building React Native apps. Casper
- [React Native Mobile Developer (Remote, UK-based)](https://www.yourtradebase.com/jobs/react-native-developer?utm_source=javascriptweekly&utm_medium=email)Excited about building great products across iOS, Android, and the Web? Join our small remote team - we're agile, funded and growing. YourTradeBase
- [Looking for a job at a company that prioritizes JavaScript?](https://www.vettery.com/?utm_medium=cooper-javascriptweekly&utm_campaign=ad-1217&utm_source=newsletter&utm_content=grouped&utm_term=tech)Try Vettery and we’ll connect you directly with thousands of companies looking for talented front-end devs. Vettery

In Brief

[Announcing TypeScript 2.6 RC](https://blogs.msdn.microsoft.com/typescript/2017/10/12/announcing-typescript-2-6-rc/) news
Microsoft

[Next.js 4 Released: A Framework for Universal React Apps](https://zeit.co/blog/next4) news 
With performance and styling upgrades.
ZEIT

[Webinar: Build Better React Apps Faster with Kendo UI for React](http://www.telerik.com/campaigns/kendo-ui/build-ui-react?utm_medium=newsletter&utm_source=javascriptweekly&utm_campaign=kendo-ui-webinar-r317react) news 
In this webinar we’ll show you the power of Kendo UI and how easy it is to use it in your React development.
Kendo UISponsor

[Redux Explained in 30 Seconds](https://dev.to/ross/reduxjs-in-30-seconds-5hj) tutorial 
About as tight an explanation as you could hope for.
Ross Creighton

[How to Use ES6 Arrow Functions to Make Your Code Easier to Read](https://medium.freecodecamp.org/arrow-functions-in-javascript-2f8bf7df5077) tutorial 
Both written and video form, however you prefer to learn.
Tyler McGinnis

[The 2 New Features in ES7 and How They Work](https://medium.freecodecamp.org/why-could-es7-be-called-es2-4c5f094ccef7) tutorial
Tiago Lopes Ferreira

[How The JS Event Loop and Async Programming Works](https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5) tutorial 
Perfect if single thread/event loop/blocking concepts are new to you.
Alexander Zlatkov

[Step Up Your JavaScript: A Comprehensive Guide to Intermediate JS](https://www.educative.io/collection/5679346740101120/5707702298738688?utm_source=js_weekly&utm_medium=email&utm_campaign=jsw356) tutorial 
Advance your understanding of JavaScript. Be able to answer interview questions that stump many developers.
EducativeSponsor

[How We Run NPM Packages in the Browser](https://scrimba.com/c/c6azJtG) story
Magnus Holm

[Regexly: A WYSIWYG Regex Playground for JavaScript Developers](https://regexly.chipto.io/) tools
Chipto

[date-fns: A Modern JavaScript Date Utility Library](https://github.com/date-fns/date-fns) code 
It’s essentially ‘lodash for dates’.
Lesha Koss et al.

[ST: JSON Selection and Transformation Methods](https://selecttransform.github.io/site/) code 
Adds methods to the JSON object for powerful JSON filtering or transformation.

[handorgel: Accessible Web 'Accordion' Widget Written in ES6](https://oncode.github.io/handorgel/) code
Manuel Sommerhalder

[Smooth Scrollbar: Customizable, High Performance Scrollbars](https://github.com/idiotWu/smooth-scrollbar) code 
If you want more control over your page’s scrolling..
Dolphin Wood

[MapTalks.js: A Light Library to Create Integrated 2D/3D Maps](https://github.com/maptalks/maptalks.js) code 
Play with [some examples here.](https://maptalks.org/examples/en/map/load/)

[luma.gl: A JS WebGL2 Framework for Data Visualization](https://github.com/uber/luma.gl) code
Uber

[Vue-Model: A Model Component for Vue.js](https://github.com/aarondfrancis/vue-model) code 
Transform plain data into models with HTTP actions, computed properties, and methods.
Aaron Francis

[A JavaScript Tetris Clone in Under 512 Bytes](https://veu.github.io/mini-tetris/dist/tetris.html) code 
[Readme/repo here](https://github.com/veu/mini-tetris) (explains some of the tricks used).
Rebecca and JS Codegolf Team

[JavaScript Telemetry: Black Box Recorder for App Crashes](https://rollbar.com/jsweekly) 
RollbarSponsor

Curated by [Peter Cooper](http://twitter.com/peterc) and published by [Cooperpress](https://cooperpress.com/).

Like this? You may also enjoy: [FrontEnd Focus](http://frontendfocus.co/) : [Node Weekly](http://nodeweekly.com/) : [React Status](http://react.statuscode.com/)

[Stop getting JavaScript Weekly](*|UNSUB|*) : [Change email address](*|UPDATE_PROFILE|*) : [Read this issue on the Web](http://javascriptweekly.com/issues/356)

© Cooperpress Ltd. Fairfield Enterprise Centre, Lincoln Way, Louth, LN11 0LS, UK