A component render can return only one element, so if you want more complicated HTML output from your component’s render, it needs to be returned in a single div. In other words, every component can return only a single div. This applies to ReactDOM.render also. So if I want to render a Movie component three … Continue reading React: A component render can return only one element!

In a continuation of the theme of how to pass information around in react, this article details how to call a parent function from a child function. This previous article details how to pass state from parent to child: React: How to pass state information from parent to child Allowing a child function to call … Continue reading React: How to call a parent function from a child function and/or pass data to the parent function

In a react script, to pass state information from a parent component to a child component, the state information needs to be passed as a prop. For example: numturns={this.state.number_of_turns} Now, “numturns” can be used as a prop in the child. For example, inside the child handleclick function: console.log(“Child communication, number of turns from parent: “, … Continue reading React: How to pass state information from parent to child

In a react script, for every function in both the parent and child components we must have this magic line using .bind(this)in the constructors: this.nameOfFunction = this.nameOfFunction.bind(this); For example: // Parent with a incrementNumberTurns() function: this.incrementNumberTurns = this.incrementNumberTurns.bind(this); // Child with a handleClick() function: this.handleClick = this.handleClick.bind(this) Here is an example from the parent component … Continue reading React: Using .bind(this) on parent and child components

This article is a continuation of the previous article where I created the simplest possible React app in Codepen: React.js: How to create the simplest app using Codepen A second way to create React apps is to use a text editor such as Atom, and reference the necessary resources via CDNs (content delivery networks).  In … Continue reading React: How to create the simplest app using Atom

One easy way to create React apps is to use Codepen. Using Codepen to practice creating React apps requires you to first  set some JS settings. The JavaScript Preprocessor should  be set to Babel because we will be using JSX instead of pure JavaScript. The Quick-add select menu can be used to select both the … Continue reading React: How to create the simplest app using Codepen

React is a JavaScript library for building user interfaces, specifically, single page applications (SPAs). It is more of a library than a framework. In the MVC (Model View Controller) paradigm, React takes care of the View. It is in charge of rendering a new view (either by rendering new HTML or changing CSS) in response … Continue reading React: Introduction to the main concepts