DEV Community

loading...
Cover image for Why would you want to learn ReactJS now?

Why would you want to learn ReactJS now?

angelomiranda profile image angelo.miranda ใƒปUpdated on ใƒป2 min read

Yesterday, I posted an article called Why would you want to learn VueJS now? and I appreciate all who share their thoughts and experiences with the framework.

Now, it is time to chat about ReactJS. According to many Surveys, ReactJS is the most popular and loved front end library by engineers and I think these are the reasons why.

  • Almost everything is implemented by JS. It is very easy to create small, reusable, and dynamic components that can be dropped anywhere in the applications. JSX is definitely super recommended to learn and use. I haven't seen engineers that are not using JSX. ๐Ÿ˜Š
// Class component
class HelloMessage extends React.Component {
  render() {
    return (
      <div>
        Hello {this.props.name}
      </div>
    );
  }
}

// Function component
function HelloMessage (props) {
  return (
      <div>
        Hello {props.name}
      </div>
  )
}
Enter fullscreen mode Exit fullscreen mode
  • Strong community. First built by Facebook and then have the support of the open-source community. Lots of smart people here that have big brains ๐Ÿง .

  • Jobs ๐Ÿ’ฐ๐Ÿ’ผ. Demand is real. It is the top skill that most companies are looking for. It is easier to find contractors that know who to use react than other JS lib/frameworks.

  • Library is fast โšก๐Ÿ’จ. One of the first innovators of the Virtual Dom or VDOM which is a copy of the real DOM. When data changes on the VDOM, ReactJS efficiently updates only the necessary parts of the DOM which is faster than updating everything in the DOM.

  • I might offend someone by this entry, please don't be just my thought. Some engineers got frustrated with Angular rewrite and found a better alternative. Talking about perfect timing. I was a big fan of Angular especially the time I first saw the 2-way data binding, directives, and dep injection. I was shocked ๐Ÿ˜ฑ. Couple of lines of code can achieve something like those.

  • Learn once then you open your door into building lots of things. You can use React to create a complex web app. Also, you can use NextJS to pre-render pages, not going to in-depth details, which is very advantageous and have its use cases. Lastly, is you can build a mobile app using React Native.

Is there anything else that you like that I missed?

Got 3 minutes? Below is a youtube video. Happy coding!

Discussion (27)

pic
Editor guide
Collapse
jmdejager profile image
๐Ÿค๐Ÿฅ‡ Jasper de Jager

Good article,

What do you think is the biggest selling point of ReactJs VS standard web components?

Collapse
pmudra profile image
Philipp Mudra

React and Web Components are built to solve different problems.
reactjs.org/docs/web-components.html

React and Web Components are not directly comparable IMO. What could be compared are 1. reusable components done with React or Web Components. Or 2. apps create with Stencil (based on Web Components) or React.

Collapse
angelomiranda profile image
angelo.miranda Author • Edited

I have seen Stencil used in my current company. We are currently trying to adapt to it as it is lighter. We don't want to ship our components to include VueJS and its libs to our customers.

Stencil combines the best concepts of the most popular frameworks like Virtual DOM, async rendering, reactive data-binding, typeScript, JSX, and more. Do you have experience working with Stencil?

Thread Thread
pmudra profile image
Philipp Mudra

Yes, I am also working on a project where we are using stencil. I am very happy with that decision so far.

Stencil / web components do not work with a virtual DOM as React does, though. Maybe shadow DOM is what you meant ๐Ÿ˜‰

Thread Thread
angelomiranda profile image
angelo.miranda Author

I read on the site that it does, below are some things I read - stenciljs.com/docs/introduction

Stencil combines the best concepts of the most popular frameworks into a simple build-time tool.

Stencil takes features such as

Virtual DOM
Async rendering (inspired by React Fiber)
Reactive data-binding
TypeScript
JSX
Static Site Generation (SSG)

Thread Thread
pmudra profile image
Philipp Mudra

I see, thanks for pointing that out.

Thread Thread
angelomiranda profile image
angelo.miranda Author

welcome ๐Ÿ‘

Collapse
jmdejager profile image
๐Ÿค๐Ÿฅ‡ Jasper de Jager

Learned something new, thnx! ๐Ÿ˜Š

Thread Thread
angelomiranda profile image
angelo.miranda Author

that is the beauty of this platform. I learn every time I come here and blog with you smart people. ๐Ÿ˜ƒ

Collapse
angelomiranda profile image
angelo.miranda Author

I haven't seen too much topic of Web Components here as the favored JS Libs/Frameworks. I like the idea of web components as a light implementation of components where functionality is encapsulated away from the rest of the code. With that being said, any front end apps can utilize web component on their current apps whether it is written in jquery, react, vue, angular, etc.

Do you have any experience writing web components?

Collapse
ivanjeremic profile image
Ivan Jeremic

No need to use classes.

Collapse
angelomiranda profile image
angelo.miranda Author

I imagine devs will heavy favor functional components with hooks now.

Classes are just a good option to have for those who are a fan AND could update to the functional coolness right away. I like how ReactJS doesn't force devs to re-write everything just what happened to Angular.

Collapse
dannyengelman profile image
Danny Engelman

The fact no React developer mentions is that the W3C and WHATWG in 2019 agreed there would be 1 HTML standard, and the WHATWG will be in the lead, the W3C will only give final approval.
That means the WHATWG is in control in what (future) browsers run.
The WHATWG is by invitation only... and guess what .. Facebook is not a core member.
The WHATWG (defacto Mozilla, Apple, Google and Microsoft) are the companies that together create the Web Components standard (it used to be a Google party.. since 2018 they are working together.. and getting better at it every meeting)
Technology wise React only for 71% complies with the Web Components standard; all other Frameworks.. Angular, Vue, Svelte not only support but can create Web Components.

I would say those 4 WHATWG Core members hold all 4 aces for HTML future.
Haven't seen Facebook make any move yet... the October 2020 update doesn't mention any of the Native Web Component terms.

Flash died last december ... is React the new Flash?

Collapse
angelomiranda profile image
angelo.miranda Author

The normal cycle of technology proves that it only has one outcome, it only gets better and it evolves. Do you remember jquery, backbone, etc? How about the old way of creating layout on css - inline style, table, and float? Notepad, Notepad++, Textmate and others.

I don't see ReactJS dying anytime soon but eventually, it might when something greater and better comes in. Not sure when this will happen but for now, it is very fast, useful, and practical to use so we should embrace it until we have no reason to use it or something comes in that is better and more efficient than ReactJS.

Collapse
ivanjeremic profile image
Ivan Jeremic

Apple hates the web and the browsers nothing good to expect from them, it is the biggest competitor to the AppStore and they would love if the web dies.

Collapse
tomavelev profile image
Toma

The only question I personally have is, how real (from the practice, not just from articles) is logic reuse and just, changing the UI components, not even the css - between react and react native. Otherwise, I'll stick with Flutter.

Collapse
angelomiranda profile image
angelo.miranda Author

Hi Toma, im not clear about the question. Are you asking/verifying if logic reuse on components are real?

Collapse
tomavelev profile image
Toma

Yes, Is it possible everything but the views reused?

Thread Thread
angelomiranda profile image
angelo.miranda Author

Components have their own logic that can be reused as needed.
Passing in props makes components dynamic meaning it can use different logic based on the data being passed into these components.

Collapse
said_mounaim profile image
Said Mounaim

Use Hooks no need to use Class Component

Collapse
angelomiranda profile image
angelo.miranda Author

agreed, I am all in with this. Is there even a downside on hooks, haven't seen any.

Collapse
ivanjeremic profile image
Ivan Jeremic

No no downsides

Collapse
ajest profile image
Pablo Fumarola

I would say that React encourages to avoid some "weirds" parts of Javascript such as the "this" keyword by using Functional Components

Collapse
angelomiranda profile image
angelo.miranda Author

Functional Components really did make class-based components obsolute. Is your company using ReactJS and migrate everything to Functional Components?

Collapse
ajest profile image
Pablo Fumarola

No, my company is using Angular, i am studying React by my own, and i think React is another paradigm and way of thinking, quite interesting

Thread Thread
angelomiranda profile image
angelo.miranda Author

definitely a good and important skill to know. So many advantages of knowing especially the job demand and better developer experience

Collapse
angelomiranda profile image
angelo.miranda Author

re-uploaded the same video but with better audio and some enhancement on the video