3

I am a beginner in react js, before react I was working with angular2 and backbone,and now my problem is I want to create a class such that all of my requests send from this class,like this:

class Ext {

    get(url){

        $.ajax({
            url : url,
            success : function(res){},
            and ......
        });

    }
}

in my another component that use from my Ext function : 

export default Ext;

import React from 'react';
import {render} from 'react-dom';
import {Ext} from "./module/Ext"

class App extends React.Component {

    constructor(props) {
        super(props);

      ///  Ext.get();

    }

    render () {
        return(
        <p> Hello React!</p>
        );
    }
}

render(<App/>, document.getElementById('app'));

how to extends from Ext ??? what is the best way ?

Improve this question
3
  • So one thing to keep in mind, that React is a view library more then anything else. So when you are creating components, you want an ajax call to be called when the component is mounted to the DOM? Facebook has an example for that facebook.github.io/react/tips/initial-ajax.html. Commented Jun 8, 2016 at 17:37
  • !!!!I see it,tnx and dont want my code get repeating!! realy need a structure..this is not OOP...so Generally, in react cant use another class functions??! Commented Jun 8, 2016 at 17:49
  • I wouldn't say that necessarily, you can basically leverage other modules. So your data fetching can be part of another module since you are using es6. Then your component can use that module to do that data fetching, and your component can just call that module. I would also suggest taking a look at redux: github.com/reactjs/redux. It is a very simple implementation of flux Commented Jun 8, 2016 at 19:26

1 Answer 1

Reset to default
2

If your get(url) method is something general, it would be wise to have it as part of a separate module, then import and use it in any component you would like.

If, on the other hand, you want to implement a functionality right into a react component, the new ES2015 way of doing it would be by using Composition.

You first create what's called a HOC (Higher order component), which basically is just a function that takes an existing component and returns another component that wraps it. It encapsulates your component and gives it functionality you want, like with mixins but by using composition instead.

So your example would look like something like this:

import React from 'react';

export default const Ext = (Component) => class extends React.Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    let result = this.get('some_url').bind(this)
    this.setState({ result })
  }

  get(url) {
    $.ajax({
        url : url,
        success : function(res){
          return res;
        }
    });
  }

  render() {
    // pass new properties to wrapped component
    return <Component {...this.props} {...this.state} />
  }
};

Then you can just create a stateless functional component and wrap it with the HOC:

import React from 'react';
import Ext from './module/Ext';

class App {
    render () {
        return <p>{this.result}</p>;
    }
}
export default Ext(App); // Enhanced Component

Or using ES7 decorator syntax:

import { Component } from 'react';
import Ext from './module/Ext';

@Ext
export default class App extends Component {
    render () {
        return <p>{this.result}</p>;
    }
}

You can read this post for more details: http://egorsmirnov.me/2015/09/30/react-and-es6-part4.html

Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I think on the get function, you meant to return a promise, and bind the setState to the result of a successful call

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.