Mapping AngularJs codes to ReactJs?

Question

I'm new to reactjs. I want to know, is there an equivalent for angular services such as $rootScop, $q, $webSocket in reactJs?

code:

.service('a', function ($rootScope, $location, $q, $webSocket) {
    this.init = function () {
        b()
        c()
 }

For example code parameters above what equivalent in react? I know the equivalent $scope in react is this.state.

score 2 · Answer 1 · answered Oct 24 '16 at 12:09

There is no such thing as services in react

here are alternatives.

$rootscope --> state, you can share it across components. (You can use redux for state management whose philosophy is one true source of data).
$q --> Es6 Promise
$websocket --> html5 websocket.

Some thing similar to service is you can write a Class or Function which takes all the required services as params and you can call it any where by exporting it.

some similar implementation you can use for react.

In service.js

const myService = (...otherServices) => {
    doStuff1();
    doStuff2();
    return {
       ...items
    }
}
export default myService;

In component.js

you can import it

import myService from './service';
import React from 'react';
class testComponent extends React.Component {
    constructor(props){
        super(props);
        this.data = myService().getData(); //just an example.
    }
    render(){
        return (
            <div>{this.data}</div>
        );
    }
}

`$http` => axios (https://github.com/mzabriskie/axios). There are others but this one will be familiar coming from `$http`. — John F., Oct 24 '16 at 13:54
These are just one alternative i can think of on top of my mind. there are many alternatives we can use and new ones keep coming. — Neel, Oct 25 '16 at 08:55

score 0 · Answer 2 · edited May 20 '21 at 19:05

0

$rootScope -> it is an global scope object in angular, in react we use reducers to store data which will be accessible to all components

$q-> we have q library same as $q in react

$location -> we have transition/history inside instance of class/components

$webScocket-> t here are multiple modules https://blog.pusher.com/making-reactjs-realtime-with-websockets/

edited May 20 '21 at 19:05

ParisaN

1,816
2
23
55

answered Oct 24 '16 at 11:58

Akash Bhandwalkar

901
5
19

q library: Es6 Promise? OR react-q ? – ParisaN Oct 24 '16 at 12:51
you can use react-q which is npm module which allow you to create your own promise/ allow synchronus programming – Akash Bhandwalkar Oct 24 '16 at 13:00

Mapping AngularJs codes to ReactJs?

2 Answers2