React Newsletter #134

News

Create React App 2.0

Create React App 2.0 has been released today, and it brings a year’s worth of improvements in a single dependency update. Here’s a short summary of what’s new in this release:

• More styling options: you can use Sass and CSS Modules out of the box.
• Updated to Babel 7, including support for the React fragment syntax and many bugfixes.
• Updated to webpack 4, which automatically splits JS bundles more intelligently.
• Updated to Jest 23, which includes an interactive mode for reviewing snapshots.
• Added PostCSS so you can use new CSS features in old browsers.
• You can use Apollo, Relay Modern, MDX, and other third-party Babel Macros transforms.
• You can now import an SVG as a React component, and use it in JSX.
• You can try the experimental Yarn Plug’n’Play mode that removes node_modules.
• You can now plug your own proxy implementation in development to match your backend API.

---

Articles

Principles of Component API (Prop) Design

There are an infinite number of different ways you could design the APIs for your components, and it can be difficult knowing what will provide the best developer experience. Here are some principles that can be followed to make it easier for others to consume and contribute to your components.

Techniques for animating on the canvas in React

Phil recently experimented with audio visualisation in React on the Twilio blog. While he meant to teach himself more about the web audio API, he found that he picked up a few techniques for animating in canvas within a React project. If you’re creating a canvas animation in React then perhaps this will help you too.

I Went to React Boston and Saw the Future

This is mostly a recap of the recent React Boston conference that just happened. Shawn does a great job of breaking down the conference and talking about what technologies you should be excited about.

Andrew's React Roadmap presented @Framework Summit

Andrew Clark, React core team member and lover of all things Westworld season 2 recently presented at Framework summit about React's roadmap. If you missed it, this is a good recap.

---

Tutorials

Audio visualisation with the Web Audio API and React

The Web Audio API is a powerful browser API for creating, manipulating and analysing audio. In this post you'll look at analysing audio. To make things extra interesting, you'll see how to visualise the audio in a React component with . When you're done we'll have a React application that can listen to the microphone on your computer and show a waveform to visualise the data.

---

Projects

libreact

A collection of useful Universal React components

functional-data-grid

This is a library made with React and React-Virtualized for creating rich data grids with filtering, sorting, grouping and aggregates computation. It supports virtualization, and so it can handle very large amounts of data. It features also locked columns, custom renderers, multi-column headers, columns resize, hide / show columns and variable rows height. Filtering, sorting, grouping and aggregates computation are done client-side.

Webpack config tool

When using this tool, you get a webpack.config.js that is created just for you. It's a great starting point for further development. The webpack.config.js will create an optimized bundle based on best practices.

---