- Changes in parent’s component are also passed to children.
- getInitialState(object) sets initial state of component.
- getInitialState(): prepare initial state of the Component
- Our application consists of 2 components – list of tasks and application itself.
- It contains 2 instantiated objects: props (it stores unchangeable parameters passed during object’s creation) and state (it contains current state of the component and can be changed upon to some conditions).
@ReactGuru: First Look: Getting Started with Facebook’s #ReactJS Library
By Kirilll Buga
Front-end coding is typically based on MVC pattern, where View is instance that renders text-templates into DOM-fragments. View displays data and reacts on user input and events. Data is stored in the Model. Change of Model leads to the change of View and this process is controlled by Controller. General model of this pattern is shown below.
What makes React then so different?
(it contains current state of the component and can be changed upon to some conditions). Well-known fact is that the most consuming operation in Front-end applications is call the DOM-tree. And React’s main distinction is that during View’s rendering it doesn’t construct physical DOM directly from templates. First of all it creates some temporal (virtual) DOM, compares it to real alongside with creation of Diffs, and only then makes call to DOM. Thus React closes access for the developer to DOM-tree and decides on its own when and why call to DOM should be made. “WAT?”, you probably ask. But keep it calm and don’t panic because first of all access to the real DOM is possible although it is not recommended. Secondly React’s implementation of virtual DOM is really awesome, so this technic allows you to manipulate View quickly.
where the temporary DOM is created and this rendering can be hierarchic. This way the Components tree is created. Each block contains of its current state and is re-rendered after any change. Changes in parent’s component are also passed to children.
As an interim DOM is a part of Component, react.js provides useful XML-like extension as JSX. It allows building components’ tree as a set of XML nodes. Logic and markup are saved in the same file.
There is also JSX->JS converter (that can be found on the official web-site). You can call conversion from command-line (for example using build-systems such as Grunt and Gulp) or execute it on-site, by adding special script to your page. Second method isn’t recommended to use in production, because it may slow-down your application. Let’s take a look at some implementation – ToDo List. It’s popular example that was implemented with all possible frameworks.
Our application consists of 2 components – list of tasks and application itself.
Here is the list:
, that creates inside list of input parameters. In this case this.props data set that was passed during the creation. As you can see from example, you can manipulate Html-lines as JS-objects, since the output you’ll get will as shown below:
. As argument the list of items was passed. For parent component this list is state, but for child – it is props. Change of state in parent’s component will lead to re-rendering of child nodes. All attributes in React use camelCase notation, and all parameters are in braces. Compiled JS will be as follows.
are normal callbacks to users actions. One more distinction of react is usage of artificial events that do not bound to real DOM objects. React delegates events and attaches itself to root (you can read about this here).
methods – after. Here are some of examples:
All lifecycle of the component is as follows:
The main thing you must remember is that data is passed from parent to child and all events are passed from child to parent till they are handled.
If you want to have access to component after rendering you should set ref property for it
. Although it’s not recommended there can be cases when it is necessary.
React is powerful framework for Front-end application. And it’s no wonder that huge web-services use it for their goals. It implants another programming approach and restricts access to DOM but in return gives you an instrument for creating fast and easily extended web-applications.
You can find another articles on various topics from this author here.