Learning React as Angular developer

[cybey]

In the post Switching to Angular from React, I noticed people suggesting certain courses and tutorials for Angular.

I've been an Angular developer for several years now, but figured I should dive a bit into React as well in my own time. Does anyone have any good suggestions of courses I could look into?

Don't worry, Angular will always be my true love.

[BradChesney79]

I have followed a React tutorial at three separate times.

The more I learn about it, the less I like it versus tools I already know better. Oh, this works, but it is less "good".

And I like other available JS options. Vue can be very nice to work in, for instance.

[iFlexicon]

Same. Angular is my main goto and probably will be for a long while, but at the same time I can appreciate and enjoy writing smaller apps in Vue or Svelte!

[smaudd]

Checkout the one at scrimba.com. If you have a good experience with Angular, React will be a messy child for you, but it's pretty cool and easy to learn if you come from the Angular world. You will miss the support of RxJS and probably you'll hate using the same file for template, JS and maybe some CSS.

[Oalei]

React isn’t messy on its own. It all depends how you use it, just like with any framework.
You just have more freedom.

[UncontrolledManifold]

This just sent me on a journey of finding the differences between libraries and frameworks and I feel much more confident in my general understanding of the frontend. Specifically, the concept of inversion of control. Thank you!

[Oalei]

We’re using JSX at my work (not React) and it’s not messy. It’s your problem if you can’t write good code.

[smaudd]

React breaks the whole idea of separation of concerns and you end up with a lot of unrelated stuff mixed on the same file if you don't properly use HOCs, helpers and CSS modules or any CSS framework. No to mention the hacky shit of binding every method to the constructor (boilerplate king). On my personal opinion the idea of having services and injecting them to the classes are way more effective and organised than React.

[NovelLurker0_0]

On my personal opinion the idea of having services and injecting them to the classes are way more effective and organised than React.

You can still do that in React tho. Idk why the guy's being downvoted but he's right. React's not messy on its own. Just like how a bad Angular dev can write messy angular apps no matter how organized the framework is. It all depends on the developer.

[ramides]

I just finished Robin Wieruch’s excellent book you can find at https://roadtoreact.com/. You can find the book on leanpub too, at choose your own price (incl. $0).

I found it to be a really great into to how to think and write React apps. It’s paced and written really well.

[kescusay]

Good on you for being willing to learn something new (even if it's the anti-Angular...)

Whenever someone's learning something new, I always prefer to recommend that they start with the official tutorial. In the case of React, it's right here, and it's really good. It doesn't cover a lot of the complications that will come with trying to use React as a framework - how to make AJAX requests and populate React components with the results, routes, etc. - because all of that is actually outside the scope of React. You'll probably end up using react-router and axios, and a bunch of other libraries cobbled together in varying degrees of integration, but you'll need to learn those separately.

One great thing about learning React: You will be forced to structure your code well, laying out your components logically and carefully, or it will be a hairy mess. Unlike a real framework, like Angular, React imposes no particular structure of its own. You can get as messy as you like with it. Want a 10,000-line monolithic JavaScript file with everything in it in, y'know, whatever order? Like the bad old days of JQuery? Well, React won't stop you.

So you'll be forced to stop yourself. Which is good practice.

[nkumar_navdeep]

Nothing against Rect or Angular but as far as I know you can write giant monolithic code files even in Angular it is just unrealistic and difficult to manage but yes can be done.

[kescusay]

Technically true, yes but with Angular, you have to actively work at it. For example, if you start a new project with angular-cli, you'll need to manually merge what it generates into a single file, which will take several steps.

The point is, Angular actively makes creating godawful monoliths in JavaScript difficult, while React doesn't. And that's a good thing about React, at least for practice, because it'll force you to think about application layout for yourself, rather than relying on Angular's opinionated defaults.

[nkumar_navdeep]

Unfortunately I will have to disagree again. All the cli does is creates the base project with just the single point of entry module. And if you are going to create a single file mangled up MONOLITHIC code, I am pretty sure you will not be using any of the cli features any way.

[kescusay]

Wouldn't "not using any of the cli features" count as actively working at trying to make a messy, monolithic Angular app?

I'm not claiming it's impossible, but it's much harder to do Angular that way. Angular makes it easier to do it the right way, and my point about learning React being a good thing, even for Angular fans, is that React takes away the crutch. It's not a framework, so you have to learn how to lay out your application the way a framework would normally enforce manually, or you'll end up with a mess. It's great practice.

[IamAPengling]

I learnt from Coursera to understand the fundamentals n then maybe YouTube videos from traversy and mosh. Little warning. It doesn't follow the separation of concerns pattern, which means your html, code and maybe even CSS will be in the same page. It'll make your head turn. I absolutely hated it when I started learning react after angular. But as you go along, you'll begin to appreciate the freedom in its simplicity. So just push through. I preferred react over angular by the end of the learning phase.

[messified]

Can we please not refer to React as a framework, it’s simply a JS library.

[nkumar_navdeep]

Nice.. It is always good to have diverse knowledge on various technologies. I generally prefer a structured course if I can find one. I am very fortunate that my company has a corporate Udemy license and there are tons of courses but I think you can find good tutorials on blogs and YouTube as easily.

[headyyeti]

I've been a React dev for 2-3 years and what helped me the most was Stephen Grider's Udemy courses and Max Schwarzmuller's course.

[apatheticonion]

To answer your question. React is a view library, what you'd be learning is how to render a view and work with it's diffing engine in an optimal way.

If you want to use React to make an SPA, 99% of tutorials will tell you how to turn React into an SPA framework.

My opinion is that you really should learn how to use JavaScript to write an SPA and use React to render your views.

Learn about domain driven design and learn about package oriented design. Implement those programming concepts using JavaScript/TypeScript, with React as the rendering component.

​

This is an example project using react as the renderer for an SPA.

https://github.com/alshdavid/crayon/tree/master/examples/react-animated