Is Reactjs based on Object Orient concept? [closed]

Question

I am starting to use Reactjs, and coming from a OO (Java) background I was curious if we can use React in a true Object Oriented fashion with true inheritance and composition.

USE CASE: We are creating React components in a library for our developers to reuse. Can we design this in an Object Oriented fashion? For example, can I have a generic Input text field, with some basic styles/behaviors, then have another MyInput field that extends Input that is able to leverage the properties and behaviors from Input?

It seems that most of what I've learned React uses states and reducers within the Application itself to manage everything; which to me seems like it's missing the point of the power of OO design. But maybe I'm wrong. Any information would be most helpful

Answer 1

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 tradional 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.

Answer 2

It is possible to create mixins to share functionality between components. Inheritance force tight coupling of components and in the long run this can be contraproducente.