
Show HN: Learn how to build an Airbnb like app in 10 mins - metagrover
https://appbaseio-apps.github.io/airbeds-onboarding/
======
TekMol
Nice. Thanks for this easy to understand example of your (?) library.

Personally I never used react. What do these placeholders do:

<div className="row" style={{"margin": "0"}}>

My guess is the stuff in {{}} is a placeholder that gets replaced by react.
But would have expected some identifier like {{ROWSTYLE}} or something. What
does {{"margin": "0"}} do?

~~~
helb
It has actually almost nothing to do with React, it's a part of JSX syntax
(which can be used with other libraries, and React can be used without it).

The outer curly braces indicate that there's a JS expression inside, and the
inner ones are just a part of an object (think JSON). It could look like this
if stored in a variable:

    
    
        let styles = { margin: 0, color: "red" };
        …
        <div style={styles}>
        
    

[https://facebook.github.io/react/docs/introducing-
jsx.html#e...](https://facebook.github.io/react/docs/introducing-
jsx.html#embedding-expressions-in-jsx)

[https://facebook.github.io/react/docs/dom-
elements.html#styl...](https://facebook.github.io/react/docs/dom-
elements.html#style)

~~~
TekMol
Now I am confused. Why the {{}} at all and not just:

<div className="row" style="margin": "0">

~~~
heavenlyblue
You may use both of the syntaxes; but the former allows to easily inject JS
variables directly, rather than by interpolating strings.

For example: var userParagraphMarginSetting = '5em'; styles={{ marginLeft:
userParagraphMarginSetting }}

Against: var styles='marginLeft:'+userParagraphMarginSetting; styles={styles}

------
FullMtlAlcoholc
I've tried to use a different appbase.io product, Reactive Maps, and was
sorely disappointed. They can't be bothered to fix the outdated tutorials,
broken manual/documentation links, etc. on their site,

------
metagrover
You will be interactively building an Airbnb like app using ReactiveSearch, a
UI components library built in React. You can read about how this app is built
over at [http://bit.do/simplebeds](http://bit.do/simplebeds).

