March 2013
In React’s virtual DOM, HTML Input element presents an interesting problem. With the others DOM environment, we can render the input or textarea and thus allows the browser maintain its state that is (its value). we can then get and set the value implicitly with the DOM API.
In HTML, form elements such as <input>, <textarea>, and <select> itself maintain their own state and update its state based on the input provided by user .In React, components’ mutable state is handled by the state property and is only updated by setState().
Props:
Passes in from parent component.<PropsApp headerProperty = “Header from props…” contentProperty = “Content from props…”/>This properties are being read by PropsApp component and sent to ReactDOM View.
State:
Created inside component by getInitialState.this.state reads the property of component and update its value it by this.setState() method and then returns to ReactDOM view.State is private within the component.
JSX is completely optional and its not mandatory, we don’t need to use it in order to use React, but it has several advantages and a lot of nice features in JSX.
No, It uses JSX which is simiar to HTM.
Limitations of ReactJS:
Stateless and Stateful components
Stateless: When a component is “stateless”, it calculates state is calculated internally but it directly never mutates it. With the same inputs, it will always produce the same output. It means it has no knowledge of the past, current or future state changes.
var React = require('react');
var Header = React.createClass({
render: function() {
return( <img src={this.props.imageSource} /> ); }
});
ReactDOM.render(<Header imageSource="myImage.png"/>, document.body);
Stateful : When a component is “stateful”, it is a central point that stores every information in memory about the app/component’s state, do has the ability to change it. It has knowledge of past, current and potential future state changes. Stateful component change the state, using this.setState method.
var React = require('react');
var Header = React.createClass({
getInitialState: function() {
return { imageSource: "header.png" };
},
changeImage: function() {
this.setState({imageSource: "changeheader.png"});
},
render: function() {
return(
<img src={this.state.imageSource} onClick={this.changeImage.bind(this)} />
);
}
});
module.exports = Header;
React is used to handle the view part of Mobile application and Web application.
Flux is the architecture of an application that Facebook uses for developing client-side web applications. Facebook uses internally when working with React. It is not a framework or a library. This is simply a new technique that complements React and the concept of Unidirectional Data Flow.
Facebook dispatcher library is a sort of global pub/sub handler technique which broadcasts payloads to registered callbacks.
import React from 'react';
class App extends React.Component {
render() {
return (
<div>
<Header/>
<Content/>
</div>
);
}
}
class Header extends React.Component {
render() {
return (
<div>
<h1>Header</h1>
</div>
);
Advantages of ReactJS:
React is an open source JavaScript front end UI library developed by Facebook for creating interactive, stateful & reusable UI components for web and mobile app. It is used by Facebook, Instagram and many more web apps.
ReactJS is used for handling view layer for web and mobile applications. One of React’s unique major points is that it perform not only on the client side, but also can be rendered on server side, and they can work together inter-operably.
JSX (JavaScript XML), lets us to build DOM nodes with HTML-like syntax. JSX is a preprocessor step which adds XML syntax to JavaScript.
Like XML, JSX tags have a tag name, attributes, and children JSX also has the same. If an attribute/property value is enclosed in quotes(“”), the value is said to be string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression. We can represent JSX as <HelloWorld/>.
Your browsers does not understand JSX code natively, we need to convert it to JavaScript first which can be understand by our browsers. We have aplugin which handles including Babel 5’s in-browser ES6 and JSX transformer called browser.js.
Babel will understand and recognize JSX code in <script type=”text/babel”></script> tags and transform/convert it to normal JavaScript code.
In case of production we will need to pre-compile our JSX code into JS before deploying to production environment so that our app renders faster.
<!DOCTYPE html>
<html lang="en">
<head><title>My First React JSX Example</title></head>
<body>
<div id="hello-world"></div>
<script src="https://fb.me/react-15.0.0.js"></script>
<script src="https://fb.me/react-dom-15.0.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script type="text/babel">
var HelloWorld = React.createClass({
render: function() {
return ( <p>Hello, World</p> )
}
});
ReactDOM.render( <HelloWorld/>, document.getElementById('hello-world'));
</script>
</body>
</html>
State is the place where the data comes from. We must follow approach to make our state as simple as possible and minimize number of stateful components.
For example, ten components that need data from the state, we should create one container component that will keep the state for all of them.
The state starts with a default value and when a Component mounts and then suffers from mutations in time (basically generated from user events).
A Component manages its own state internally, but—besides setting an initial state—has no business fiddling with the stateof its children. You could say the state is private.
import React from 'react';
import ReactDOM from 'react-dom';
var StepCounter = React.createClass({
getInitialState: function() {
return {counter: this.props.initialCount};
},
handleClick: function() {
this.setState({counter: this.state. counter + 1});
},
render: function() {
return <div onClick={this.handleClick}>{this.state.counter }</div>;
}
});
ReactDOM.render(< StepCounter initialCount={7}/>, document.getElementById('content'));
Props: They are immutable, this is why container component should define state that can be updated and changed. It is used to pass data down from our view-controller(our top level component).
When we need immutable data in our component we can just add props to reactDOM.render() function.
import React from 'react';
import ReactDOM from 'react-dom';
class PropsApp extends React.Component {
render() {
return (
<div>
<h1>{this.props.headerProperty}</h1>
<h2>{this.props.contentProperty}</h2>
</div>
);
}
}
ReactDOM.render(<PropsApp headerProperty = "Header from props..." contentProperty = "Content
from props..."/>, document.getElementById('app'));
}
import React from 'react';
import ReactDOM from 'react-dom';
var StepCounter = React.createClass({
getInitialState: function() { return {counter: this.props.initialCounter }; },
handleClick: function() {
this.setState({counter: this.state.counter + 1}); },
render: function() {
return <div onClick={this.handleClick}> OnClick Event, Click Here: {this.state.counter }</div>;
}
});
ReactDOM.render(< StepCounter initialCounter={7}/>, document.getElementById('content'));
When the application is running in development mode, React will automatically check for all props that we set on components to make sure they must right correct and right data type.
For instance, if we say a component has a Message prop which is a string and is required, React will automatically check and warn if it gets invalid string or number or boolean objects. For performance reasons this check is only done on dev environments and on production it is disabled so that rendering of objects is done in fast manner .
Warning messages are generated easily using a set of predefined options such as:
React encourages the idea of reusable components. They are widgets or other parts of a layout (a form, a button, or anything that can be marked up using HTML) that you can reuse multiple times in your web application.
ReactJS enables us to create components by invoking the React.createClass() method features a render() method which is responsible for displaying the HTML code.
When designing interfaces, we have to break down the individual design elements (buttons, form fields, layout components, etc.) into reusable components with well-defined interfaces. That way, the next time we need to build some UI, we can write much less code. This means faster development time, fewer bugs, and fewer bytes down the wire.
React identifies every events so that it must have common and consistent behavior across all the browsers. Normally, in normal JavaScript or other frameworks, the onchange event is triggered after we have typed something into a Textfield and then “exited out of it”. In ReactJS we cannot do it in this way.
The explanation is typical and non-trivial:
*”<input type=”text” value=”dataValue”> renders an input textbox initialized with the value, “dataValue”.
When the user changes the input in text field, the node’s value property will update and change. However, node.getAttribute(‘value’) will still return the value used at initialization time that is dataValue.
Form Events:
Mouse Events:
Touch Events: