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”

Excited to partner up with to deliver @ReactJS Advanced Workshop including HOCs, #Redux and…

  • Learned a lot!
  • Good introduction to the basics of React.
  • I see it as a very good starting point for further React development.
  • Very thorough introduction to React.
  • The presentations were very straightforward, especially with the format of the slides.

Interactive React and JavaScript workshop for public training, private company training, or conference workshops. The first workshop accompanied by an interactive web app for practical exercises.
Continue reading “Excited to partner up with to deliver @ReactJS Advanced Workshop including HOCs, #Redux and…”

Understanding The React Source Code — Initial Rendering (Simple Component) I

  • var childrenLength = arguments.length — 2; if (childrenLength === 1) { props.children = children; // scr: one child is stored as object } else if (childrenLength 1) { var childArray = Array(childrenLength); for (var i = 0; i childrenLength; i++) { childArray[i] = arguments[i + 2]; // scr: multiple children…
  • …var ReactElement = function(type, key, ref, self, source, owner, props) { // This tag allow us to uniquely identify this as a React Element $$typeof: REACT_ELEMENT_TYPE,// Built-in properties that belong on the element type: // scr: ————– ‘h1’ key: // scr: ————– not of interest for now ref: // scr:…
  • The name TopLevelWrapper explains what it does — wrap the top level element (of the component tree passed through render()):An important definition here is that of TopLevelWrapper, I type three stars here *** for you to CTL-f, as you might need to come back to this definition later:…var TopLevelWrapper = function() {…
  • The only line that is effective before the logic processes to next step is… var nextWrappedElement = { child: nextElement, that it should be easy to see how the target object of this step is constructed with React.createElement, the function we just examined in the last a `ReactCompositeComponent` using `ReactElement[2]`The…
  • In our context, it checks the ReactElement[2]’s type (i.e., TopLevelWrapper) and creates a ReactCompositeComponent accordingly.function shouldHaveDebugID) { var instance;… } else if (typeof node === ‘object’) { var element = node; var type = element.type;… // Special case string values if (typeof element.type === ‘string’) {… } else if {……

UI updating, in its essential, is data change. React offers a straightforward and intuitive way to program front-end Apps as all the moving parts are converged in the form of states. Code review of…
Continue reading “Understanding The React Source Code — Initial Rendering (Simple Component) I”

ReactJS Welcome Page with Routing Tutorial

#ReactJS #Javascript RT @ProWebApp1: ReactJS Welcome Page with Routing Tutorial

  • Days back, I have posted an article on how to create a welcome page with proper login and logout using Ionic 3 and Angular 4 .
  • Today’s article is to create the same welcome page with ReactJS and ES 6.
  • The article is about how to login/signup to get inside the application home page, you can navigate to different pages and finally you end up with a logout action.
  • Lets see how to set a starting page with navigations using ReactJS and ES 6.

How to create ReactJS Welcome Page with Routing
Continue reading “ReactJS Welcome Page with Routing Tutorial”

Understanding higher-order components

  • Why use HOC: Promote reuse of logic across React components.
  • How to use HOC: The core structure of a HOC is a function that takes a component and returns a new component.
  • HOC are pure functions with no side-effects because the component passed in, is wrapped in a new component.
  • The HOC looks like this: – – State now has a property to inject data from the API fetch into the wrapped component via the prop.
  • React Redux connect has a different function signature of a function returning a function which accepts one argument (ie, ‘component’) to create a HOC.

Understand why and how to use higher-order components with React JS

Continue reading “Understanding higher-order components”

Simple, Touch-Friendly carousel component for @reactjs #reactjs #react-component

Simple, Touch-Friendly carousel component for @reactjs #reactjs #react-component

  • The basic carousel sample.The Carousel component returns a callback function with the following arguments.
  • and must be passed down to the elements – – But the Carousel component also returns other arguments, like , , , , , – – For the component to work, for example, on mobile devices, set the value to true for touching.
  • Set the value for and place the argument in your jsx template – – When you stop moving your mouse triggers a function which calculates the position of the elements.
  • For example, you want to fetch data or trigger some function when you reach the end of the carousel.
  • The default value for is 0 – – must be passed to the component – – Use the arguments and from the callback.

react-awesome-carousel – Simple, Touch-Friendly carousel component for React.js
Continue reading “Simple, Touch-Friendly carousel component for @reactjs #reactjs #react-component”