DEV Community

Cover image for A React code editor
Danilo Woznica
Danilo Woznica

Posted on • Originally published at danilowoz.com

6 2

A React code editor

Have we already exhausted the possibilities of how we interact with our favorite code editor? Have we got so used to how we code to achieve a certain goal we can no longer see any way to involve it?

Since I started to work at CodeSandbox, I've seen myself facing those issues more often. Besides that, I began to wonder how beginners are struggling to rule the code editor and learn their favorite framework simultaneously.

Therefore, I challenged myself to come up with a code editor/IDE for beginner developers focused on ReactJS and what this concept might look like.

The anatomy of a component

The first concept came to me some time ago, when I was teaching a friend of mine more about React and how a component works. I remember I said the component itself has a proper "anatomy". Later, I realized it makes a lot of sense because we know where things are supposed to be in a component.

In other words:

Alt Text

So basically, we can predict what actions the user might take and teach them the best practices. So, this idea evolved to a new concept which are menus with context-sensitive intentions linked to those sectors.

The whole point of this concept is that we can understand the code to provide a way to make a new code editor with whatever framework or even language we want. I just used React to illustrate the idea.

Top comments (2)

Collapse
 
cleysonlb profile image
Cleyson Leal Braga

Great idea Danilo! I think we can also have some kind of linter for this tool, to validate pattern and structures, it would be an interesting feature

Collapse
 
promikecoder2020 profile image
ProMikeCoder2020

Amazing idea! I hope you are able to finish it. Good luck!

AWS Security LIVE!

Tune in for AWS Security LIVE!

Join AWS Security LIVE! for expert insights and actionable tips to protect your organization and keep security teams prepared.

Learn More

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay