React: Questions and Answers

Posted on by admin

What is the difference between using constructor vs getInitialState?

When using ES6 classes then you should initialize state in the constructor

class MyComponent extends React.Component {
 constructor(props) {
 super(props);
 this.state = { /* initial state */ };
 }
}

Note:
– this.state is assigned directly in the constructor, but everywhere else use this.setState()
– you cannot use getInitialState() with ES6 class

Define the getInitialState method when using React.createClass.

var MyComponent = React.createClass({
 getInitialState() {
 return { /* initial state */ };
 },
});

Reference

Rules:
Component name starts with a capital letter
Components must return a single root element.
Props are readonly

ReactJS – JSX

Posted on by admin

What is JSX

JSX is an XML-STYLED syntax for use in javascripts. JSX is  a preprocessor step that adds XML syntax to JavaScript.

Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression.

Rules:

  • JSX is XML and not to be mistaken with HTML
  • JSX avoids Javascript keywords such as ‘CLASS’ uses classname instead
  • LOWER-CASE for html tabs
  • CAPITAL-CASE for react components
  • CAMEL-CASE for html attributes
  • Style is mostly a json object

Compilers

  • This is the link to compile the html to JSX.
  • Babel link for the compiler JSX to ReactJS

 

 

 

ReactJS: Framework

Posted on by admin

React Framework

What is ReactJS

ReactJS is a javascript framework from Facebook (javascript library) which is narrow in scope but tightly focused. It is concerned with rendering the view with data state(dataset) and viewer state(UI). It is a two way binding with model and view and not using the controller. It turns the javascript into reactive descriptive language.

In short javascript is about props, state and events.

Benefits of using ReactJS

It uses virtual DOM which is in memory DOM, very fast and has many states. It also uses Javascript XML(JSX).

Features

  • Rendering an Element

ReactDom.render() – renders element to the DOM

React Element the element to render
DOM Element the target DOM element to render into
Callback optional callback function

Example (fiddle)

ReactDOM.render(
  <h1>Hello, world</h1>,
  document.getElementById('container'),
  function(){
     window.alert('done');
  }
)


<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

  • Rendering a Component

Returns element via render method and reusable components. In MyComponent capital M is important, if M is not capital than reactjs will not function properly. React component returns the react element. render() is a required method.

Example (fiddle)

var MyComponent = React.createClass({
  render: function(){
  	return (
    	<p>Testing the MyComponent feature</p>
    );
  }
});

ReactDOM.render(
<MyComponent/>,
document.getElementById('container')
);

Source: Link

  • Component Props

Collection of values associated with a component (Key value pair). It allows dynamic rendering of data when re-using components.

Example

var Hello = React.createClass({
    render: function() {
        return
Hello {this.props.name}

; } }); ReactDOM.render( <Hello name=“World” />, document.getElementById(‘container’) );

  • Component State

Sometimes components may have state that represent a mutatable properties that may affect the rendered output, eg pressing a button (True or False). State is optional in a component.

2 types of states:

  • GETINITIALSTATE – set initial values
  • SETSTATE – update and render from virtual DOM

Example

var ClickCounter = React.createClass({
	getInitialState: function(){
		return { 
			count:0
		}
	},

	increment: function(){
		this.setState({
			count:this.state.count + 1
		});
	},
    render: function() {
        return (
        	<button> Clicked {this.state.count} times! </button>
        );
    }
});
 
ReactDOM.render(
	<ClickCounter />,
    document.getElementById('container')
);

  • Component Events

Events tell when to change the state of the components.

Useful Materials

React Website

Blog

Happy coding!!

….Sometime simple tip makes someone’s coding life easier…………