Introduction to React Component
1) Defining a Component
The top level namespace for react is "React".We use the createClass function in order to create a new component
var firstComponent =React.createClass({
render:function(){
return <div>
<h1>Hello {this.props.name}</h1>
</div>
}
});
The html syntax will be converted into plain javascript.The JSX in the return will be converted like the below code
return React.DOM.div(null,
React.DOM.h1(
null, 'Hello" , this.props.name)
);
2) Rendering a Component
So , What is rendering a component?
Whenever we are rendering a component, it means we are linking it to a DOM element.
React.render(
<Hello name={"world"}/>,
document.getElementById('app')
);
Note:Render function can return a single react component.
3) Props
Props are immutable values that a react component uses to render.These are supplied as XML attributes in the JSX syntax.
In the example below Hello is the name of the component and we are supplying a value of name in the java script expression syntax.
React.render(
<Hello name={"world"}/>,
document.getElementById('app')
);
This name can be accessed by using props.name
4) State
When a component needs to be changed and the cause of it is the component's parent ,then the parent can just change the child props and re-render.
If the component needs to change due to some event , then the component needs to use state.
Inclusion of state in the component increases the complexity of the component, so it's better to avoid the usage of state whenever possible.
Always store state in the upper level and send them to the lower ones.
getInitialState:
getInitialState allows a component to populate it's initial State.
When a component is first mounted , we need to initialize the state of the component for rendering.This is possible with getInitialState, as getInitialState initializes the state value by returning an object.
getInitialState:function(){
return {value:3};
}
The value can be accessed as {this.state.value}
setState:
setState is used to update the state of the component. setState merges the new state with the old state.The setState keeps track of the old state unless its overridden
5)Props
getDefaultProps:
getDefaultProps is used to specify the values , if they are not explicitly provided.
We can give values in two ways
1) With Attributes
2)With getDefaultProps
getDefaultProps(){
return{
a:1,
b:10
};
}
propTypes:
propTypes is used for validation purpose.
propTypes:{
name:React.propTypes.string
}
Here we are setting the type of "name" as string.In thr below example we are making it required.
propTypes:{
name:React.propTypes.string.isRequired
}
- A react application is built with a set of components.Components are the fundamental units of a react application.Each component has its own element in the DOM.
- Components are known for rendering the content for that element and also handle events. Components can be nested within each another.
1) Defining a Component
The top level namespace for react is "React".We use the createClass function in order to create a new component
var firstComponent =React.createClass({
render:function(){
return <div>
<h1>Hello {this.props.name}</h1>
</div>
}
});
The html syntax will be converted into plain javascript.The JSX in the return will be converted like the below code
return React.DOM.div(null,
React.DOM.h1(
null, 'Hello" , this.props.name)
);
2) Rendering a Component
So , What is rendering a component?
Whenever we are rendering a component, it means we are linking it to a DOM element.
React.render(
<Hello name={"world"}/>,
document.getElementById('app')
);
Note:Render function can return a single react component.
3) Props
Props are immutable values that a react component uses to render.These are supplied as XML attributes in the JSX syntax.
In the example below Hello is the name of the component and we are supplying a value of name in the java script expression syntax.
React.render(
<Hello name={"world"}/>,
document.getElementById('app')
);
This name can be accessed by using props.name
4) State
When a component needs to be changed and the cause of it is the component's parent ,then the parent can just change the child props and re-render.
If the component needs to change due to some event , then the component needs to use state.
Inclusion of state in the component increases the complexity of the component, so it's better to avoid the usage of state whenever possible.
Always store state in the upper level and send them to the lower ones.
getInitialState:
getInitialState allows a component to populate it's initial State.
When a component is first mounted , we need to initialize the state of the component for rendering.This is possible with getInitialState, as getInitialState initializes the state value by returning an object.
getInitialState:function(){
return {value:3};
}
The value can be accessed as {this.state.value}
setState:
setState is used to update the state of the component. setState merges the new state with the old state.The setState keeps track of the old state unless its overridden
5)Props
getDefaultProps:
getDefaultProps is used to specify the values , if they are not explicitly provided.
We can give values in two ways
1) With Attributes
2)With getDefaultProps
getDefaultProps(){
return{
a:1,
b:10
};
}
propTypes:
propTypes is used for validation purpose.
propTypes:{
name:React.propTypes.string
}
Here we are setting the type of "name" as string.In thr below example we are making it required.
propTypes:{
name:React.propTypes.string.isRequired
}