Ext JS to React: Class Instantiation and Code Style

  • Ext JS components are really just JavaScript functions which allow you to use the keyword: – – This means each class is native JavaScript.
  • Meaning, JSX enables you to outline not only the HTML and React component structure, but also call other JavaScript functions or even execute code statements right from within the JSX body.
  • Here is an example functional React component: – – This code sample highlights one of the major differences between Ext JS and React.
  • JSX is a very common strategy when creating React components.
  • Instead, each component is instantiated by React itself when you include the component class in returned JSX (i.e. in the example above).

React enjoys the benefits of the latest ECMAScript conventions (with some transpiling magic from Babel) along with JSX syntax. In the following sections, we will look at how Ext JS components are instantiated along with how a functional component is used in a React app. We’ll also review common coding styles that differ between the two ecosystems. Just a note before we proceed, this blog post aims to discuss how React components are created and used, but doesn’t wade into the various ways components may be defined initially. We’ll dedicate our next blog post in the series to the topic of defining React components.
Continue reading “Ext JS to React: Class Instantiation and Code Style”

Why Angular 2 Is So Awesome – Jacob Gardner – Medium

Why Angular 2 Is So Awesome  #react #angular2 #angular #javascript #reactjs

  • First you start with a simple route that looks something like this:{ component: SweetComponent, path: ‘fabulousness/:someId’}Pretty straightforward, yeah?
  • Okay, time to dig down into that SweetComponent from earlier and see how it accesses those fields.Your route is polite enough to provide Observables so that the component can make any necessary updates when the route changes, like this:route.params.subscribe(({ someId }) = otherStuff }) = …Convenient, huh?
  • Simply put, it’s a hash of the names for component properties that have changed to corresponding SimpleChange objects.
  • On that note, I’ll just defer to a passage from my entirely hypothetical and nonexistent previous article, Why TypeScript Is So Awesome:Unfortunately, TypeScript’s philosophy tends to encourage a developer to encapsulate values in ES6 classes, much as one would use structs in other languages.
  • When we obfuscate the true nature of JavaScript’s dynamic typing and prototypal inheritance behind a facade of static types and classes, we directly harm inexperienced developers by giving them a false impression of how JavaScript actually works.

Did you want to know what’s so great about Angular 2? Man, that sure was rhetorical. I’m definitely going to tell you regardless. Let’s talk routing; every app worth its salt needs routing. First you…
Continue reading “Why Angular 2 Is So Awesome – Jacob Gardner – Medium”