React, as we know it, is a JavaScript library to build amazing user interfaces. But not everybody is using the same tools or know all of the great ones out there that help make the react development experience funner and more proactive. If you haven't used react yet or have friends that might be interested in using it, what do you say when they ask you why they should use the library? Besides telling them how great the library is (which should be the first thing), I also like to mention that the tools created by the open source community helps bring the experience to a whole new level of excitement. Here are 22 tools you can use to build your react apps in 2019 (This list is _not_ in order of their importance) ## 1. webpack-bundle-analyzer Ever wondered which packages or parts of your app is taking up all the space? Well, you can find out if you use the [webpack-bundle-analyzer](https://github.com/webpack-contrib/webpack-bundle-analyzer). This package will help you identify output files that take up the most space. It will create a live server and present to you an interactive treemap visualization of the contents of your bundles. With this in your toolkit, you're able to see where the presented files are located, their gzip size, parsed size, and their belonging parents/children. The benefits? Well, you can optimize your react app based on what you see! Here is a screenshot of what this looks like: ![webpack_bundle_analyzer1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/webpack_bundle_analyzer1.jpg) You can clearly see that the pdf packages take up the most space in the app. But it also takes the most space _on the screen_. That's _very_ useful. However, the screenshot is very minimal. You can also pass in useful options to see more in detail like `generateStatsFile: true` and also choose to generate a static HTML file that you can save somewhere outside of your development environment for later use. ## 2. react-proto [react-proto](https://github.com/React-Proto/react-proto) is a prototyping tool for developers and designers. It's a desktop software, so you'd have to download and install the software before using. Here's an example of this software in use: ![react_proto_1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/react_proto_1.jpg) The app lets you declare props and their types, view your components in a tree, import a background image, define them as stateful or stateless, who their parent components will be, zoom in/out, and export your prototype into a new or existing project. The app seems more tailored for _mac_ users however, but it still works fine for windows users. After you're done mapping out your user interfaces you can choose to _export_ to either an existing project or a new project. If you choose to export to an existing project and choose your root directory, it will export them to ./src/components like this: ![react_proto_2](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/react_proto_2.jpg) And here is an example of one of the components we had in the example: ![react_proto_3](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/react_proto_3.jpg) react-proto acquired over 2,000 stars on GitHub. Personally though I think this app needs an update and more work especially with the release of react hooks. It also doesn't zoom out unless you have a background image visible. In other words, if you import a background image, zoom out, then proceed to delete the background image, you won't be able to zoom back in because the buttons are greyed out. The only way to zoom back in is to import the background image back in, then removing it after you zoom back in. That flaw changed my views about this app, but it makes it to this list because we don't see this open sourced anywhere else. And being open sourced is the good thing about this app which potentially makes it possible to make the trending open sourced repositories list in the future (Their features are important, but they seem to be lacking manpower). ## 3. why-did-you-update [why-did-you-update](https://github.com/welldone-software/why-did-you-render) monkey patches React to notify you about avoidable re-renders. This is incredibly useful not only in guiding you to performance fixes for your projects, but also to help you understand the way react works. And when you have a more understanding of how react works, this makes you a better react developer. You can attach a listener to any custom component by declaring an extra static property `whyDidYouRender` with its value to `true`: ```jsx import React from 'react' import Button from '@material-ui/core/Button' const Child = (props) =>

const Child2 = ({ children, ...props }) => (

{children}

) Child2.whyDidYouRender = true const App = () => { const [state, setState] = React.useState({}) return (

{JSON.stringify(state, null, 2)}

Child #2

) } export default App ``` Only after doing so will your console be put on blast with incredibly annoying warnings: ![why_did_you_render1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/why_did_you_render1.jpg) But don't take it the wrong way. Take it as a good thing. Leverage those annoying messages so you can fix those wasteful rerenders, and those annoying messages will finally leave you alone! ## 4. create-react-app Everybody knows that [create-react-app](https://github.com/facebook/create-react-app) is the quickest way to start developing a react project (with modern features included out of the box). What could possibly be easier than `npx create-react-app `? All of my tutorials on medium (along with dev.to) are building react interfaces with _create-react-app_, simply because its just quick and easy. What some of us might not know is how to create a typescript project using CRA. All you have to do is is add `--typescript` at the end: ```bash npx create-react-app --typescript ``` That will save you the trouble of manually adding typescript to your CRA projects. ## 5. react-lifecycle-visualizer [react-lifecycle-visualizer](https://github.com/Oblosys/react-lifecycle-visualizer) is an npm package for tracing & visualizing lifecycle methods of arbitrary React components. Similar to _why-did-you-render_, you can enable any component(s) of your choice to bring out the lifecycle visualizer: ```jsx import React from 'react' import { Log, VisualizerProvider, traceLifecycle, } from 'react-lifecycle-visualizer' class TracedComponent extends React.Component { state = { loaded: false, } componentDidMount() { this.props.onMount() } render() { return

Traced Component

} } const EnhancedTracedComponent = traceLifecycle(TracedComponent) const App = () => ( ) ``` This will present the visualizer as shown below: ![react_lifecycle_visualizer](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/react_lifecycle_visualizer1.jpg) However, one downside to this is that it currently only works for class components, so hooks aren't yet supported. (The question is _can_ they be, since this is about life cycles?) ## 6. Guppy [Guppy](https://github.com/joshwcomeau/guppy) is a friendly, free, application manager and task runner for React that runs on the desktop. They seem to prioritize those who are newer to developing in react. However it might also be useful for advanced developers. It provides a friendly graphical user interface for many typical tasks that react developers face on a regular basis such as creating new projects, executing tasks and managing dependencies. Windows support was added in August of 2018, so you can be assured that it's cross-platform. Here's how _guppy_ looks like: ![guppy1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/guppy1.jpg) ## 7. react-testing-library I've always loved [react-testing-library](https://github.com/testing-library/react-testing-library) because it _just feels right_ when writing your unit tests. This package provides react DOM testing utilities that encourage good testing practices. This solution aims to solve the problem of testing your implementation details and instead test the input/output of your react components just as the user would see. Testing implementation details is _not_ an effective way of ensuring that your app works as expected. Sure, you'll be able to have more confidence on _how_ you're getting the data your components need, which sort method to use, etc. but if you have to change the way you implemented that to point to a different database then your unit tests would fail because those are implementation details which are coupled logic. That's an issue on what _react-testing-library_ solves, because ideally you just want your user interface to work and be presented correctly in the end. _How_ to get data to those components doesn't really matter as long as they still give the expected output. [Here's an example code](https://react-testing-examples.com/jest-rtl/) of how you would place tests using this library: ```js // Hoist helper functions (but not vars) to reuse between test cases const renderComponent = ({ count }) => render( , ) it('renders initial count', async () => { // Render new instance in every test to prevent leaking state const { getByText } = renderComponent({ count: 5 }) await waitForElement(() => getByText(/clicked 5 times/i)) }) it('increments count', async () => { // Render new instance in every test to prevent leaking state const { getByText } = renderComponent({ count: 5 }) fireEvent.click(getByText('+1')) await waitForElement(() => getByText(/clicked 6 times/i)) }) ``` ## 8. React Developer Tools [React developer tools](https://github.com/facebook/react-devtools) is an extension that allows inspection of React component hierarchy in the Chrome and Firefox Developer Tools. This is the most commonly known in this list and continues to be one of the most helpful tools react developers can use to debug their apps. ## 9. Bit A good alternative to using component libraries like material-ui or semantic-ui-react is [Bit](https://bit.dev/). This lets you explore thousands of _open sourced_ components and lets you use them to build your projects. ![bit](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/bit1.gif) There are so many different available react components that are up for anybody to use including tabs, buttons, charts, tables, navbars, dropdowns, loading spinners, date pickers, breadcrumbs, icons, layouts, etc. These get uploaded by other react developers just like you and I. But there's also useful utilities available as well like formatting distances between dates. ## 10. Storybook If you don't know about [storybook](https://storybook.js.org) yet, I highly recommend you to start using them if you want an easier experience building UI components. This tool starts up a live development server with hot reloading supported out of the box where you can develop your react components real-time in isolation. Another great thing about this is that you can use current existing addons that are open sourced to bring your development experience to a whole new level. For example, with the [storybook-readme](https://github.com/tuchk4/storybook-readme) package you can create _readme_ documentations _while developing the react components_ for production use right on the same page. This is sufficient to serve as normal documentation pages would: ![storybook1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/storybook1.jpg) ## 11. React Sight Have you ever wondered what your app may look like in a flow chart? Well, [react-sight](https://www.reactsight.com/) lets you visualize your react apps by presenting to you a live component hiearachy tree of your entire app. It also supports react router, redux, as well as react fiber. With this tool you hover over _nodes_ which are the links to components that directly relate to them in the tree. If you're having trouble seeing results, you may want to type in `chrome:extensions` on your address bar, look for the react-sight box and click the `Allow access to file URLs` switch, as shown below: ![react-sight1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/react_sight1.jpg) ## 12. react-cosmos [react-cosmos](https://github.com/react-cosmos/react-cosmos) is a development tool for creating reusable react components. It scans your project for components and enables you to: 1. Render components under any combination of props, context and state 2. Mock every external dependency (eg. API responses, localStorage, etc) 3. See app state evolve in real-time while interacting with running instances ## 13. CodeSandbox This is hands down one of the best tools available out there to get your hands dirty with react faster than the speed of an eye blink (Ok, maybe not that fast). This tool called [CodeSandbox](https://codesandbox.io) is an online editor that lets you create web applications from prototype to deployment--all from the website! Codesandbox originally only supported React at the earlier stages but they've now expanded to additional starter templates for libraries like Vue and Angular. They also support kickstarting your next react web project by creating projects with common static site generators like gatsby or nextjs. There is so many great things to talk about when it comes to codesandbox. For one, it's _incredibly active_. If you need to explore some projects that people are building at your convenience, it's easy to click _explore_ and get access to a bunch of code examples to help renovate your next project: ![codesandbox1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/codesandbox1.jpg) Once you start editing inside a project you'll begin to realize that what you're about to be using is actually the VSCode editor which is _powerful_. I'd love to write a whole article about all of the features you can do at codesandbox today, but it seems like the work has [already been done](https://codesandbox.io/docs). ## 14. React Bits [React bits](https://vasanthk.gitbooks.io/react-bits/) is a collections of react patterns, techniques, tips and tricks all written in an online document-like format where you can quickly access different design patterns and techniques, anti-patterns, styling, UX variations and other helpful react related material all on the same tab. They have a [GitHub repo](https://github.com/vasanthk/react-bits) currently at 9,923 stars. Some examples include concepts like props proxying, composition to handle various UX in different scenarios, and even exposes some gotchas that every react developer should be aware of. Here is what it looks like to be on their page, as you can see on the side menu to the left there's plenty of information :) ![react-bits1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/react-bits1.jpg) ## 15. Folderize [Folderize](https://marketplace.visualstudio.com/items?itemName=ee92.folderize) is a VSCode extension that was released less than 7 days ago. It lets you turn a component _file_ into a component _folder_ structure. Your react component will still be a component, it's just converted into a directory now. For example, lets say you were creating a react component that takes some `file` as props to display some useful information like their meta data. The logic for the meta data component is taking up plenty of lines so you decide to split this up into a separate file. But when you decide to do that, now you have two files that relate to eachother. So if you have a directory that looks like this: ![folderize1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/folderize1.jpg) You might want to abstract out the `FileView.js` and `FileMetadata.js` into a directory structure just like how `Apples` is--especially if you're thinking to add more components related to files like `FileScanner.js`. That's what _folderize_ does for you so that they can come out to a structure similar to this: ![folderize2](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/folderize2.jpg) ```jsx import React from 'react' import FileView from './src/components/FileView' const App = (props) => export default App ``` ## 16. React Starter Projects Here is a great list of [react starter projects](https://www.javascriptstuff.com/react-starter-projects/) that you can see all in one page. So if you're the type of person that finds it quick and useful to be presented with a huge list of options to choose from at the same time, then this one's for you. Once you see a starter project you like, you can simply just clone the repository and make your own modifications tailored to your upcoming app. However not all of them is intended to be used by cloning the repository because some of them are to be installed instead, which becomes a depdency of your project. This makes it easier to get updates and keep your project cleaner. Here is what the page looks like: ![react starter projects1](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/react_starter_projects1.jpg) ## 17. Highlight Updates This is arguably the most important tool anybody could ever have in their development toolkit. This is a feature of the react devtools extension and makes it possible to see which components in your pages are re-rendering unnecessarily: ![react render lines](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/react+render+lines.gif) It helps you spot bottlenecks while developing your pages and makes it even easier when they colorize severe re-rendering issues with orange / red. Unless you're aiming to build a mediocre app, why would you not want this beautiful thing next to you? ## 18. React Diff Viewer [react-diff-viewer](https://praneshravi.in/react-diff-viewer/) is a simple and beautiful text diff viewer made with Diff and React. This supports features like split view, inline view, word diff, line highlight, etc. This can be useful if you were trying to embed this feature into your notes (_Ahem_ Boostnote) and customize it to be more tailored for your app (theme colors, documentation combination with storybook presentations, etc) ![react-diff-viewer](https://jsmanifest.s3-us-west-1.amazonaws.com/posts/22-miraculous-tools-for-react-developers-in-2019/react-diff-viewer.jpg) ## 19. js.coach The site I use the most to look for react related material is [js.coach](https://js.coach/?collection=React). Now i'm not sure why I don't see very many mentions of this gem, but i've found just about anything I needed from this page alone. It's quick, easy, constantly updated and never fails to give me the results I need for all of my projects. They recently added the _React VR_ tab which is wonderful! ## 20. awesome-react The GitHub [awesome-react](https://github.com/enaqx/awesome-react) open sourced repository is a list of awesome things related to react. I can probably not know that other websites exist and just learn react only from this link alone. You'll find batches of useful resources that will surely help you build great react apps! ## 21. proton-native [proton-native](https://github.com/kusti8/proton-native) gives you a react environment to build cross platform native desktop apps. It's an alternative to Electron and has some neat features including: - Same syntax as React Native - Works with existing React libraries such as Redux - Cross platform - Native components. No more Electron - Compatible with all normal Node.js packages Interested in learning more? Read their [documentation](https://proton-native.js.org/#/). ## 22. Devhints React.js Cheatsheet [A pretty good cheatsheet for react](https://devhints.io/react), although it is missing react hooks. No worries, I will be creating a cheat sheet for reactv16.8+ so stay tuned for that. ## Conclusion And that concludes the end of this post! I hope you have found valuable information here and look out for more from me in the future!

Posts tagged “ux”

22 Miraculous Tools for React Developers in 2019