First of all I would like to tell you that React is based on Javascript which is obviously object oriented (but not exactly similar to languages such as Java, C++, and many other traditional Object Oriented languages
).
React itself does not enforces any object oriented technique but
React components are totally reusable. You can create generic components from very simple input text box, labels to complex one and can be reused many times.
If you are coming from Java world, then I would suggest you to use Javascript es6 to get taste of class in somewhat similar way.
A sample React component in Javascript es6
class Text extends React.Component {
render() {
return <p>{this.props.children}</p>;
}
}
React.render(<Text>Hello World</Text>, document.body);
See how inheritance is working here
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return '(' + this.x + ', ' + this.y + ')';
}
}
class CPoint extends Point {
constructor(x, y, color) {
super(x, y);
this.color = color;
}
toString() {
return super.toString() + ' in ' + this.color;
}
}
All code you see is in Javascript!
For React you can divide your application to have Presentational components and Container components for better re-usability and structuring.
- Presentational components :
mainly concerned with receiving the data via props and displaying them. They don’t specify how the data is loaded or mutated and don’t have their own states.
Example
const Text = ({ children = 'Hello World!' }) => <p>{children}</p>
- Container components:
passes the data and behavior to presentational or other container components. They have their own states.You can generate the data here and pass it to presentational components.
Example
class Contacts extends React.Component {
constructor(props) {
super(props);
this.state = {
message:"new message"
};
}
render() {
return (
<div><Text children={this.state.message}/></div>
);
}
}
I would suggest stay away from Mixins.
Mixins aren’t supported in ES6 classes.