The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Building a React.js App - ES6 Refactor: Firebase and React Binding with re-base

Building a React.js App - ES6 Refactor: Firebase and React Binding with re-base

7:37
In this lesson, we’ll finish refactoring our application to ES6. Along the way, we’ll learn how to get route parameters in React Router without mixins as well as learn about re-base, a library for building React applications with Firebase in ES6
Watch this lesson now
Avatar
egghead.io

In this lesson, we’ll finish refactoring our application to ES6. Along the way, we’ll learn how to get route parameters in React Router without mixins as well as learn about re-base, a library for building React applications with Firebase in ES6.

Avatar
Boris

Hi,
first of all, thank you for this great serie !

I have a question about the way to replace mixing with ES6.
Tyler showed us how to deal with it using contexts.
With the upcoming feature of ES7 (with the babel?stage=0 setting in the web pack config), could we use the "@" syntax ?

For example :
import React from 'react';
import Router from 'react-router';

@Router
class Profile extends React.Component {
...
}

What I understood about the "@" syntax is that it allows us to attach some methods of the Router object on our current Profile class (but without inheritance).
Am I right ?

Thanks.
Boris.

Avatar
Tyler

Hi Boris.

You are correct. What you're describing is called decorators. I don't have much experience with them yet so I didn't include them in the series (and it was an ES6 refactor not ES7). For more info, check out this link. https://github.com/rackt/react-router/issues/1173

In reply to Boris
Avatar
Kasper

Thanks for the series! It really made a huge improvement for me personally, to get a better grasp on both React and also ES6.

I may have missed the point somewhere along the line, but I'm a bit baffled about how/why we don't have to 'import react-router' and how it just suddenly appears to be working after setting the contextTypes object.

I hope you can help me out with this. :-)

Best regards,
Kasper

Avatar
Boris

Hi Tyler,
thanks for your reply.

Boris.

In reply to Tyler
Avatar
David

Thanks for a great series. A lot of concepts that I'd half-grasped have now been clarified.

Would be great if you extended this out to incorporated a flux based model ;)

Thanks again,
Dave.

Avatar
Tyler

Thanks David! If no other instructor gets to Flux in the next few weeks I'll go ahead and extend the series.

In reply to David
Avatar
Aaron

Thanks for the amazing series Tyler. I am confident I will be able to get my own demo project going now after watching this! I would also be interested in seeing how using Flux could improve the GitHub note taker app.

In reply to Tyler
Avatar
Tyler

Thanks Aaron! I like the idea of adding Flux as well. Hopefully I'll get to it soon.

In reply to Aaron
Avatar
Simon

Great series, first off the whole react one showed me more here than trying to figure things out, just what i was looking for a good example of how to use and see react in a working example.

Then into ES2015, just took it to the next level. This series opened my eyes even more to react.

welldone.

PS: Flux too please :-)

Avatar
Tyler

Thanks for the kind words Simon.

In reply to Simon
Avatar
Henry

Great series, well-presented!
Thanks for making this available.

Avatar
Daniel

Thanks so much for the series, Tyler. I'm a lot more confident in putting pieces of a react app together now. Please post more tutorials in the future about these integration-y concepts! There are not many series that focus on best practices in piecing together parts of a live application!

Avatar
Philip

Great job on the series Tyler, it's a nice extension to your blog post! Thank you.

Avatar
Philip

Hi Kasper. I hope I am correct, I believe we have access to react-router in all of our child components because we passed down the properties of react-router as props in App.js with the use of the spread operator {...state}. Hopefully Tyler can clarify this.

In reply to Kasper
Avatar
Thorben

Hi, I was wondering how I can use can use re-base together with React-Natives's ListView component.

This is what I am trying to achieve:

this.ref = base.bindToState('items', {
context: this,
asArray: true,
state: 'items'
});
this.setState({
dataSource: this.state.dataSource.cloneWithRows(this.state.items),

})

My problem is that the "this.state.items" is still empty when it is passed to the datasource state. What is the best way to fix this?

Thanks

Avatar
Tyler

You have a few options. What I usually do is remove setting the dataSOurce on the state and instead just cloneWithRows in render. Something like this.

render(){
    return (
        <ListView
          dataSource={this.dataSource.cloneWithRows(this.state.items)}
          renderRow={this.renderRow}
        />       
    );
}

I also wouldn't put dataSource (new ListView.DataSource...) on the state but move it to just being a property on the class.

In reply to Thorben
Avatar
Thorben

Thanks a lot, this did help.

However I am now getting stuck with other issues:

1) How can I delete an item with syncedState? I was able to do it before with Firebase.remove(), but I struggle to do it with Rebase.

2) How can I use Rebase with two different instances of the same components? E.g. I have two instances of a components showing the same list, where one of them is filtered. I am getting an Error saying "REBASE: Endpoint (items) already has listener syncState" when switching to the second component

3) How can I implement a loading spinner? Is there a callback I can use to stop my spinner with this.setState({loaded: true}) once the data is loaded?

Thank you Tyler! I would also really appreciate if you could provide short code snippets in your answer.

In reply to Tyler
Avatar
Tyler

1) You do it the normal way you would delete an item in React, usually using .splice.

2) Currently you can't do this. There's an issue filed right now for this feature.

3) Not for setState. There's an issue for this as well.

In reply to Thorben
Avatar
Thorben

Thank you!

Regarding #2) I guess that is the same issue with base.listenTo? (even though I use them in different components)

My goal is to make each Component a "Mirco-MVC", wich deals with its data needs in isolation. (Inspired by this article: https://medium.com/@AdamRNeary/unidirectional-data-flow-yes-flux-i-am-not-so-sure-b4acf988196c)

Am I correct if I assume that this is not possible with re-base today? Whats your take on the Micro-MVC approach?

Update: Is there a way to shut down the base.listenTo on componentWillUnmount? base.reset(); didn't work for me, but maybe I am doing it wrong.

In reply to Tyler
HEY, QUICK QUESTION!
Joel's Head
Why are we asking?