DEV Community

Shannon Reca
Shannon Reca

Posted on

6 1

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.

Top comments (0)

typescript

11 Tips That Make You a Better Typescript Programmer

1 Think in {Set}

Type is an everyday concept to programmers, but it’s surprisingly difficult to define it succinctly. I find it helpful to use Set as a conceptual model instead.

#2 Understand declared type and narrowed type

One extremely powerful typescript feature is automatic type narrowing based on control flow. This means a variable has two types associated with it at any specific point of code location: a declaration type and a narrowed type.

#3 Use discriminated union instead of optional fields

...

Read the whole post now!

πŸ‘‹ Kindness is contagious

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

Okay