In this series we will try to discover best parts of react.js
a react.js component
React.createClass, getInitialState, handleClick, render
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
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.