When you create a class with React, using the createClass method.
We can use some properties and methods in order to manage behavior of our class.
for this let’s use points : propTypes and getDefaultProps.
propTypes : We can set the properties of the class.
getDefaultProps: We can set default values.
So we can set the components properties.
- React.PropTypes.array
- React.PropTypes.bool
- React.PropTypes.func
- React.PropTypes.number
- React.PropTypes.object
- React.PropTypes.string
PropTypes with React
<html>
<head>
<title>Props With ReactJS</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0/JSXTransformer.js"></script>
</head>
<body>
<div id="content"></div>
<script type="text/jsx">
var App = React.createClass({
propTypes: {
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string
},
getDefaultProps: function() {
return {
optionalArray: [],
optionalBool: true,
optionalFunc: function(){},
optionalNumber: 1,
optionalObject: {},
optionalString: 'default value'
};
},
render: function() {
return (
<div>
<input
type="text"
optionalArray={this.props.optionalArray}
optionalBool={this.props.optionalBool}
optionalFunc={this.props.optionalFunc}
optionalNumber={this.props.optionalNumber}
optionalObject={this.props.optionalObject}
optionalString={this.props.optionalString}
/>
</div>
);
}
});
React.render(<App />, document.body);
</script>
</body>
</html>