React walk-through Part 1

In this series we will try to discover best parts of react.js

react.js a JavaScript library for building user interfaces. ONLY USER INTERFACES (VIEWS)

a react.js component


React.createClass, getInitialState, handleClick, render

multiple components

reach parent component properties, this.props.localHandleClick

passing parameters between local and parent components

Intrinsic elements, react.js typescript usage

card component sample

Components are the main building block of a React application. A component represents a self-contained piece of UI. A component will usually display some data and be able handle some kind of user interaction.

When we declare a new React component using TypeScript we must declare the interface of its properties and state as follows:

When the components state or properties change React calculates the most efficient way to update the in-memory representation of the DOM and then proceeds to apply those changes to the real DOM. This process makes React highly efficient when it comes to DOM manipulation.

The TodoItem component represents one of the tasks in the list of tasks.

usage with typescript footer.tsx

This file uses the .tsx extension instead of the .ts extension because it contains some TSX code.

hello world type of dummy sample

onChange, checked, getInitialState example

Property Validation
Properties that are passed in the element attributes can take multiple forms. React provides a way to validate the property types that are passed to the components by declaring them in propTypes

very basic example with ajax, array, map with typescript

So far, based on its props, each component has rendered itself once. props are immutable: they are passed from the parent and are “owned” by the parent. To implement interactions, we introduce mutable state to the component. this.state is private to the component and can be changed by calling this.setState(). When the state updates, the component re-renders itself

Here, componentDidMount is a method called automatically by React after a component is rendered for the first time. The key to dynamic updates is the call to this.setState(). We replace the old array of comments with the new one from the server and the UI automatically updates itself.

onChange and Form element actions handling

form onSubmit handling Submit

why binding this in ajax call

There are two types of “model” data in React: props and state. It’s important to understand the distinction between the two; skim the official React docs if you aren’t sure what the difference is.

The concept “Flux” is simply that your view triggers an event (say, after user types a name in a text field), that event updates a model, then the model triggers an event, and the view responds to that model’s event by re-rendering with the latest data. That’s it.

This one way data flow / decoupled observer pattern is designed to guarantee that your source of truth always stays in your stores / models.

JSX wants you to couple your view with the model and controller. It’s a bad idea. Don’t do that.