React Folder Structure in 5 Steps
One of the most commonly debated elements in application development is directory structure. It seems each person has their most comfortable way of organizing code and is willing to defend. While there is room for personal taste, the right directory structure can mean a world of difference in your application.
In Enterprise apps or in complex apps, what is need is a directory structure that will stay consistent as the application grows over time. Applications tend to get more and more features. If the application structure is constantly changing, your team mates or future team mates are going to have to deal with these low-lying changes. It would be much better for all if you got this right from the early stages.
Robin Wieruch put together a well-reasoned approach to structuring large React apps. In the article are a number of examples for applications of differing complexity. Use these as a guide for your own application structure preferences.
Junior to Senior – Refactoring a dynamic multi-input component
Few jobs require as much continual learning as application development. As one’s knowledge and experience grow, their skills and confidence also grow. Johannes Kettmann has a series on refactoring React components designed to help a developer grow their skills. Each article shows a methodical approach for taking “Junior” level code, and turning it into “Senior” quality code.
The most recent article shows how to refactor a dynamic multi-input component. In each article, care is taken to show and explain the incremental steps to go from one state to another. This article series is a good series to improve your own skills.
React Native 0.62 with Flipper
The Flipper tool is a tool for debugging mobile applications. You’ll find this tool is commonly used by both Android and iOS developers. React Native has had some support for Flipper, but the 0.62 release includes support for Flipper by default.
Flipper provides the following features out of the box:
- Metro Actions: Reload the app and trigger the Dev Menu right from the toolbar.
- Crash Reporter: View crash reports from Android and iOS devices.
- React DevTools: Use the newest version of React DevTools right alongside all your other tools.
- Network Inspector: View all of the network requests made by device applications.
- Metro and Device Logs: View, search, and filter all logs from both Metro and the Device.
- Native Layout Inspector: View and edit the native layout output by the React Native renderer.
- Database and Preference Inspectors: View and edit the device databases and preferences.
What’s new in ECMAScript 2020
The ECMAScript standard evolves. Coming this year are a series of updates to the language. Here are jump links to each feature on Pawel’s blog.
- String.prototype.matchAll by Jordan Harband
- import() by Domenic Denicola
- BigInt – arbitrary precision integers by Daniel Ehrenberg
- Promise.allSettled by Jason Williams, Robert Pamely and Mathias Bynens
- globalThis by Jordan Harband
- for-in mechanics by Kevin Gibbons
- Optional chaining by Gabriel Isenberg, Claude Pache, Dustin Savery
- Nullish coalescing Operator by Gabriel Isenberg
- import.meta by Domenic Denicola
- export * as ns from “mod”
Are Static Sites too limited?
Many developers assume that dynamic sites aren’t a good fit for static site generators. While this can be true, there are some techniques that narrow the gap quite a bit. Josh Comeau wrote up his thoughts in how you can support heavy dynamicism (is that a word?) with static sites.
When used with proper front-end engineering principles, static sites can greatly simplify the hosting and operation of website infrastructure. Emerging capabilities like incremental-builds would go a long way to making the static sites work well in cases where there are lots of items in the site that would slow down the compiling and propagation of site materials.
