I always wondered why there are more job posts available requiring knowledge about React. I wondered why many companies don\u2019t consider using Angular. I wondered why bootcamps include React as the front-end of choice to learn for their students. I wondered what React has to offer that Angular doesn\u2019t. That\u2019s why, after more than 3 years working with Angular, I decided to give React a try.<\/p>\n\n\n\n
\u200dActually\u2026<\/p>\n\n\n\n
\u200d\u2026I had tried to learn React in the past. However, for some reason it didn\u2019t click for me at the time. My brain understood better the Angular way. That\u2019s why I decided to try to understand React for the second time.<\/p>\n\n\n\n
\u200dIf this happened to you, that is normal. Some become React, Angular, or Vue front-end developers because that is what made more sense for them. In my case, I had learned Angular first as it seemed more interesting to me at the time.<\/p>\n\n\n\n
\u200dMy journey with React starts with going over the tutorial on their website<\/a>. Overall, it was easy to understand. In fact, I was thinking: How on earth could I not get the concepts the first time I tried to learn React?<\/p>\n\n\n\n \u200dSimple\u2026<\/p>\n\n\n\n \u200dBecause some of the general concepts used in Angular are used in React.<\/p>\n\n\n\n \u200dBack to the point.<\/p>\n\n\n\n \u200dI went through React\u2019s tutorial in pretty much two or three days, including React\u2019s documentation. I personally liked React\u2019s tutorial recommendation with regards to not copying and pasting the code from their tutorial but instead typing the code while following the tutorial. It encourages better knowledge retention without you even realizing it.<\/p>\n\n\n\n \u200dBy following React\u2019s tutorial, you will learn topics such as:<\/p>\n\n\n\n If you want to dig deeper, React can do a better job of talking about all these topics and more. Check their site<\/a>.<\/p>\n\n\n\n \u200dAlthough I tried to avoid comparing between the two frameworks\u2026<\/p>\n\n\n\n \u200dWait\u2026 Stop there. I meant between a framework and a library. If you didn\u2019t know, React is a library, not a framework. Angular is a framework. This is one good reason why Angular apps are heavier than React apps.<\/p>\n\n\n\n \u200dBack to the story\u2026<\/p>\n\n\n\n \u200d\u2026it becomes challenging in the era of preferring one over the other, which apparently React has more popularity. Like everyone learning another framework (or library), I liked some things. I disliked other things.<\/p>\n\n\n\n \u200dI noticed data communication between components can turn nasty really quick<\/strong>, especially when a top-level component is supposed to control the state while child components should limit themselves to present the data. The first thing that came to my brain was this won\u2019t be pretty if I have to share data across nested components. I understood why oftentimes I hear developers almost demanding the usage of an application state management library, such as Redux<\/a>.<\/p>\n\n\n\n I\u2019m still not sure how to feel about passing a function to a child component as a prop<\/strong>. Sure thing, there has to be cases when it becomes handy. However, I consider functions should stay in one component to prevent creating logic not easy to follow, such as defining the functionality at a top-level component but executing it in a low-level or child component.<\/p>\n\n\n\n I\u2019m not a big fan of the usage of JSX syntax<\/strong> as I consider better to have a separation between the template and the business logic. However, it is not a deal breaker. In fact, it promotes staying in the same file during the development process instead of switching back and forth between the view and the component. As you practice more, you worry less about writing HTML in a JavaScript file.\u200d<\/p>\n\n\n\n I liked how React apps are lightweight in comparison to Angular. In Angular, there are situations where you end up creating unnecessary files, such as CSS or SASS files that never get used, because most of the time we end up using Angular\u2019s CLI to generate components. Not sure if there is anything similar in React yet. Nevertheless, in the absence of the CLI, you become more aware of manually generating files you care about.\u200d<\/p>\n\n\n\n In React you become more aware of the usage of the keyword this<\/em><\/strong>, especially when you find the need of binding event listeners to a component. I can see how most new programmers can have many challenges learning that concept. In Angular, although you know you are using the keyword because this <\/em><\/strong>is necessary to use for manipulating data or triggering methods in a component, in my opinion you end up using this <\/em><\/strong>keyword without really understanding in depth how to use it because the framework makes it easy to use it. At least in the process of learning the Angular.\u200d<\/p>\n\n\n\n Another aspect React places emphasis on is the concept of immutability<\/em><\/strong>. They teach it right away, and they constantly remind you that objects\u2019 state can\u2019t be modified once they are created. I don\u2019t remember seeing too much emphasis on immutability concepts while learning Angular. In fact, I feel this is often not respected by many Angular developers until they come across very specific situations where an object\u2019s state needs to be preserved to prevent undesired behaviors in code.\u200d<\/p>\n\n\n\n React recommends you use composition instead of inheritance to reuse code between components. Angular has a similar concept but with a different verbiage, which is using presentational components. As you can infer, these components are used to display data, which generally come from parent components, and avoid as much as possible any business logic, promoting reusability of components.\u200d<\/p>\n\n\n\n In React, you are constantly in control of the rendering process. In order to display and update the view, you have to update the state using setState <\/em><\/strong>function. Otherwise, you can keep updating data and store it in variables and you\u2019ll know the view won\u2019t re-render.\u200d<\/p>\n\n\n\n In Angular, the rendering process is done for you. Therefore, there is a likelihood of you re-rendering components that don\u2019t require this, decreasing the performance of the app. Angular provides different detection strategies to better manipulate the rendering process. However, Angular developers, including myself, become more aware of the rendering process whenever we encounter errors related to attempting to update the value of a property whenever the re-rendering kicked off by the framework process hasn\u2019t finalized, forcing you to manually detect changes as a temporary solution.\u200d<\/p>\n\n\n\n In my opinion, React is a good candidate of choice to start smaller projects involving fewer teams as it allows for quick changes on the go without worrying too much about preserving code standards and infrastructure of the project. On the other side, if you are dealing with large projects, which oftentimes are split in multiple microservices, Angular might be your better bet as it is easier to preserve code standards across multiple teams developing microservices in parallel.<\/p>\n\n\n\n It seems I\u2019m pointing out more dislikes about React than I should. In reality, I got more interested in the library and decided to create a simple website using React, Gatsby, and Bulma in a couple of days. By the way, if you know the fundamentals of React, learning Gatsby is a piece of cake. Feel free to check it out clearntext.com<\/a>.<\/p>\n\n\n\n All in all, if you have a couple of years on your back as an Angular developer and you are interested in learning React, I strongly suggest you follow React\u2019s documentation. Seriously. The concepts are relatively easy to understand once you avoid thinking in the Angular way as there are transferable concepts. Take advantage of the concepts offered by one library or by the other framework if you know both of them and make a better decision the next time you decide to start a project. It will make a big difference in the long run!\u200d<\/p>\n","protected":false},"excerpt":{"rendered":" I always wondered why there are more job posts available requiring knowledge about React. I wondered why many companies don\u2019t consider using Angular. I wondered why bootcamps include React as the front-end of choice to learn for their students. I wondered what React has to offer that Angular doesn\u2019t. That\u2019s why, after more than 3 … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":445,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"nf_dc_page":"","_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[12],"tags":[],"class_list":["post-460","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-programmers-knowledge","generate-columns","tablet-grid-50","mobile-grid-100","grid-parent","grid-50"],"_links":{"self":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/460","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/comments?post=460"}],"version-history":[{"count":3,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/460\/revisions"}],"predecessor-version":[{"id":2534,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/posts\/460\/revisions\/2534"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/media\/445"}],"wp:attachment":[{"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/media?parent=460"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/categories?post=460"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.becomebetterprogrammer.com\/staging\/4563\/wp-json\/wp\/v2\/tags?post=460"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}