Basic React JS Hello World @ https://jsfiddle.net/reactjs/69z2wepo/
Composing React Component Demo @ http://jsfiddle.net/kb3gN/364/
Blog Post Example for Composing Components @ http://jsfiddle.net/kb3gN/427/
Blog Post Example with Map Function on Comments @ http://jsfiddle.net/kb3gN/428/
* getInitialState - allows a component to populate its initial state
* setState is a function used to update the state of the component
* setState mergers the New state with the old state
getInitialState Example @ http://jsfiddle.net/kb3gN/366/
getInitialState Example with setState @ http://jsfiddle.net/kb3gN/367/
getInitialState Demo with Stateless Component @ http://jsfiddle.net/kb3gN/368/
* getDefaultProps - It provides property values to use if they are not explicitly supplied
* The values declared within this will be used by the component if the parent component has not declared the props.
getDefaultProps Demo @ http://jsfiddle.net/kb3gN/371/
* Validate Props with PropTypes
* Supports validation of existence, data types or a custom condition
* PropTypes only works in development mode, as minified version of React is used in Production
* NOTE: Every propType that isn't required should have a corresponding field in getDefaultProps
Demo @ http://jsfiddle.net/kb3gN/442/
* A mixin is a partial definition of a React component that can be added to multiple other components.
* Mixins allows common code to be merged into many components
Demo of Common Functions [without Mixins] @ http://jsfiddle.net/kb3gN/376/
Common Functions with Mixins @ http://jsfiddle.net/kb3gN/375/
* JSX is the default syntax and pre-processor of React
* JSX is Optional
* Supports xml-like syntax inline in Javascript
* Each element is transformed into a JS function call
* Arrtibutes : The Values of JSX attributes can be Strings or Javascript Expression
* Transformations can be
--> Just-In-Time
--> Precompiled by react tools
* Disadvantage: Script includes the JSX is not a JavaSript, It cannot be minified, debugged in browser, processed through linter or formatted using JS Syntax Highlighter.
* Significant Performance Penalty
* Use Some build tools and Pre compile the JSX for Improved Performance.
Demo @ http://jsfiddle.net/kb3gN/448/
Another Demo with this.props.children concept @ http://jsfiddle.net/kb3gN/452/
* HTL attributes cannot use Javascript Reserved Key word.
label--> htmlFor="name" className="big"
style={{...}} (or) style={s} and define var s={...}
Escaped Content means a string representation of HTML that is not interpreted as HTML.
- React escapes everything by default
- Bypass using dangerouslySetInnerHTML
- Excepts an Object with an __html property
dangerouslysetInnerHTML={{__html="Foo"}}
Demo @ http://jsfiddle.net/kb3gN/461/
- React has its own Event Abstraction
--> Normalizes Event behaviour (make events work the same in all browsers)
--> Uniform event system for DOM Events and Component Events
- Synthetic Event
--> Original Event Object is available via the nativeEvent Property
* Controlled components are Form components with values or checked attribute.
* They always maintain the synchronization between component markup and with the props and states passed
* Preserve React's rendering semantics
* Change value of Controlled Components : change the state {this.setState({})}
Demo @ http://jsfiddle.net/kb3gN/514/ - Using Props
Demo @ http://jsfiddle.net/kb3gN/513/ - Using SetState
- UnControlled Components let the values change independently with the owning component props and states.
- Form components rendered without a value or checked prop
Demo @ http://jsfiddle.net/kb3gN/512/ - Uncontrolled components
- Provide a way to reference owned component
- Usage:
--> Add a ref attribute to the react DOM Component to name the component instance
--> Access the element via this.refs.element_name
- We can access this.refs only after the component is rendered, which means we cannot access this.refs within ComponentsWillMount
Demo @ http://jsfiddle.net/kb3gN/515/ - Using Refs
Demo @ http://jsfiddle.net/kb3gN/516/ - Usiing Refs
- React Components are often mapped to DOM Node. The getDOMNode() method helps to get the inderlying DOM Node from React Component Instance.
Demo @ http://jsfiddle.net/kb3gN/595/
- Client-side routing with HTML5 pushState API:
--> pushState allows Javascript to update the browser URL
--> Uses proper URL and better Bookmarking Support
Disadvantage:
--> Require a browser that supports pushState
--> Require server-side support
- Client-side routing with Hash Fragments
--> Works because the hash fragment is never sent to the server
--> Works in all browser
- When SEO is not needed, we can go for Client-side routing with Hash Fragments
