React & Angular — the battle of the frameworksWhat I learned from learning React in 2 nights after years of working with AngularAnd I think I’m ready to make somethingAphinya DechalertBlockedUnblockFollowFollowingFeb 12It’s kind of awkward when you make a public announcement to commit yourself to becoming an Angular god and the only jobs available in your area requires React — with little or no mention of Angular at all.
So after much thought and contemplation (and mostly for physical survival reasons), I decided to jump off the Angular gangplank and deep dive into the big blue ocean waters of React.
It turns out, if you’ve been around for a while, all code is the same — just written differently.
I think having a good understanding of Angular also helped.
Here are the things I learned from learning React in 2 days.
Angular 1 used to be like that.
Angular 2+ requires more leg work and it’s easier to have a fully Angular 2+ project than a hybrid one.
React is very portable — which explains why its popularity grew so quickly.
I could, in theory, put React code anywhere without causing many issues or require a massive setup.
Angular 2+, however, is more geared towards convincing back end developers to move into front end.
No implicit state changesFrom what I understand so far, what you give to React is what React renders.
Unlike Angular, if you give it a checkbox, that checkbox will work as expected (i.
you click on it and it checks/unchecks).
With React, you have to explicitly track the state change in order for it to have a reaction of sorts to your events.
This is because React ‘paints’ an immutable state on the DOM, which means no one can change it unless you tell it to.
PropsSimilar concept as Angular but less code required to access it — it’s already there and imported for you by React.
All you need to do is use props.
whateverYourPropertyNameIs to access it in functional components, or this.
whateverYourPropertyNameIs for class based components.
You’re going to need a design docYou’re going to need a design doc anyway for any project.
But for React, you’re definitely going to need it more than ever.
A design doc is basically a document that gives you an overview of the functions you need, how the logic connects to together and all the notes you’ll need to structure your code.
It’ll prevent your code from turning into a bowl of spaghetti.
The framework looks easy to implement — which can give rise to lazy coding.
Lazy coding creates technical debt.
Plan your logic.
It’ll help you code faster and better.
You can technically do this in Angular 2+ if you tried hard enough but it’s not advocated or taught anywhere.
React encourages it.
This can be a bit weird if you’re used to building apps in an MVC kind of structure where everything needs to be separated or special functions and parsings are required to make it work.
With React, you code with the end HTML output in mind — and react puts it all together for you.
With Angular, you create your view and sort out your logic in your components.
Slower speed of changeVersioning numbers and updates aren’t as scary as Angular.
Or perhaps, a lot of developers are still scared from the massive learning curve jumps between Angular 1 and Angular 2.
React seems to only update their major release number every other year with changes pushed out slower than Angular.
This makes learning new things possible and not as scary as Angular 2+.
Angular 2+ has a major release every 6 months — which can be quite overwhelming for new and even seasoned developers who just want to build things rather than worry about backward compatibility.
When React changes, it’s only a few little things at a time.
It seems too easyOver the past 2 nights, I found React stupidly simple.
In fact, it’s too stupidly simple.
So it makes me question, what’s the catch?It turns out that there is a thing called Redux which comes into play at some point.
React and Redux works as a pair for some reason and I’m going to find out why.
With Angular 2+, you know it’s going to be a learning curve and that the tutorials only cover the tip of the surface.
But with React, it seems like what you see in the beginner’s tutorials all basically all you need, plus a few other things like protected routing and authentication implementation.
No one really hints at anything beyond that.
The Angular community hover lets you know that there’s a lot more to come right away.
But React’s official docs is also significantly smaller than Angular’s.
I’m now waiting for that aha!.moment where I uncover React’s dirty little secrets — if there are any.
Maybe the React and Redux pairing will enlighten me.
Final WordsSo I’ve learned the basics.
Or rather, I sat through 2 nights of YouTube and Google starter React articles.
During that time, I often compared it to Angular — simply because it’s easier for me to learn the framework by comparing it to what I already know.
Despite my vows to become an Angular god, I still stand by my words that all tech is the same — there are still loops, functions and other building blocks of logic — and only syntax and structure is different.
It’s just how the framework requires you to write your code and how to interact with what you need that makes it different.
They’re really taking it back to the OG days of vanilla front end coding but with a bit more personality and ease of use.
So far, I’m liking it but its simplicity makes me suspicious.
Which brings me to my final conclusion that I just need to build something.
The features will need to include CRUD, authentication and route protection — which is basically 95% of the Internet.
If I can figure this out, then I’m sorted to build future apps without much of a hitch.
Give me a few days to see what I can make — then maybe a fully nerded out series of lessons learned/technical posts will follow.
I am taking a personal depth year — the quest to master the things I care about.
Thank you for reading.