DEV Community

Shannon Reca
Shannon Reca

Posted on

BKDR v2 - My Journey Into ReactJS

alt text

When I originally created my in-browser code editor, I wrote it all in CoffeeScript. Worse, I wrote it in one big file. What started as a simple cool idea, kept getting bigger with every feature or new idea. Eventually, I knew I could not continue working this way. Request for new features were becoming more difficult to organize, and scaling became an issue.

This was all due to not having a plan. It was a fun, cool idea that became something more, and when I realized it, it was too late in the process. So regardless of not wanting to, I knew I needed to start over.

What's Next?

Around the time when I was contemplating on how and what to use to rebuild my code editor, React and Angular where trending. Angular 2 was in beta, and was different enough from Angular 1, that it made me hesitant on any attempt to learn it. Additionally, React was a lighter framework from my brief understanding. So I decided on React.

One thing I didn't want to do was learn React WHILE remaking my web app. It just seemed like an unwise decision that would eventually come back to haunt me. I needed another project to really flex my sandbox adventures. Of course, knowing me, I created a social network (like that was the easier option).

Class In Session

In the end, I was able to take away so many valuable lessons. For example, jQuery sometimes becomes a reflex when you confront a situation. But in React, you need to change your mindset. We're so use to manipulating the DOM with JavaScript and jQuery. However, one of the greatest benefits of React is it's ability to update state changes within components.

Within a component, HTML or other components can be returned within the render method. Every time the state is updated or replaced, it triggers the component to re-render. This is handled through the virtual DOM before being updated in the actual DOM. Redux also adds another great element to React with it's store. Basically it's ability to have a centralized source of data that can be updated via dispatch. This was a huge feature in creating my web app. For simpler projects, this may be overkill. It really all depends on your needs.

The Result

After spending about eight months learning React, I started on version 2 of Backdoor (which I rebranded as BKDR), in March of 2017. Now, 10 months later, I'm about to release my beta within the next couple of days, fully built in React and handling the server side in PHP. I estimate I wrote over 30+ components, all nicely organized and optimal to scale properly.

If you'll like to stay posted on my Backdoor progress, you can visit BKDR.org.

Discussion (0)