Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is Reactjs based on Object Orient concept? [closed]

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

like image 480
jbambrough Avatar asked Mar 03 '16 06:03

jbambrough


People also ask

Is Reactjs object oriented?

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

Is React component oriented design?

Component-oriented programming is the new object-oriented programming. With all the latest front-end frameworks — such as React, Angular, and Vue — we're seeing a cool new paradigm rise. It's known as component-oriented programming, and it's all about stitching reusable components together like Lego blocks.

Is JavaScript object oriented or functional?

What is JavaScript? JavaScript (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for Web pages, but it's used in many non-browser environments as well.

Is JavaScript object oriented?

JavaScript is not a class-based object-oriented language. But it still has ways of using object oriented programming (OOP). In this tutorial, I'll explain OOP and show you how to use it. The most popular model of OOP is class-based.


2 Answers

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.

like image 168
WitVault Avatar answered Sep 20 '22 08:09

WitVault


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.

like image 35
Raulucco Avatar answered Sep 20 '22 08:09

Raulucco