DEV Community

Ender
Ender

Posted on

Jinno - IDE extension I made to preview React components

I built Jinno because I often found myself juggling between my code editor and browser to preview React components during development. It was frustrating and time-consuming, breaking my workflow and focus. With Jinno, I can now see live previews of React components directly in VS Code, allowing me to iterate faster and stay fully immersed in coding. It’s a tool that eliminates distractions and makes the development process smoother and more enjoyable.

Image description
You can try Jinno from here:Link

One of the key features of Jinno is its ability to isolate any React component from the rest of the project with just one click. By isolating the component, hot reload becomes significantly faster, as only the component itself is reloaded, not the entire app. I used to struggle with isolating components manually—it was a tedious and error-prone process that disrupted my workflow. This is why Jinno is such a game-changer: it handles the isolation for you, saving time and making development more efficient and enjoyable.

Top comments (2)

Collapse
 
kingcold_d4ecd11c785e3d8c profile image
KingCold

very nice but whats the usecase of this? and how will it handle store(redux) variables?

Collapse
 
wegin profile image
Ender • Edited

The main usecase is for you to be able to see a live preview of the component you currently working on without having to deploy a full blown environment. The problem is even more painful if you are a frontend developer that is part of a team developing a big application where in that use case deploying an environment can be very tidious, it often requires you to have an authentication service, database and much more. With Jinno you don't have to navigate to the page where the component is located, you seemlessly and immediately see your component exactly as it renders in your app, next to your code.

how will it handle store(redux) variables? - Great question! I It scans your project to identify key dependencies, such as the Redux store, and integrates them into the live preview environment. This means your components will have access to the same Redux store they use in the main application. Actions, selectors, and state updates will work as expected, ensuring your component behaves in the preview exactly as it does in the actual app.