Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #35963 > unrolled thread

cost {} = ? (React Native)

Back to article view | Back to comp.lang.javascript

Contents

  cost {} = ? (React Native) CantReact <CantReact@please.nospam> - 2019-01-15 17:23 -0500
    Re: cost {} = ? (React Native) CantReact <CantReact@please.nospam> - 2019-01-15 18:34 -0500
    Re: cost {} = ? (React Native) Jon Ribbens <jon+usenet@unequivocal.eu> - 2019-01-16 11:32 +0000
      Re: cost {} = ? (React Native) Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2019-01-16 22:03 +0100
        Re: cost {} = ? (React Native) "Mark-" <nospam@mapson.xyz> - 2019-01-17 02:19 +0000
        Re: cost {} = ? (React Native) CantReact <CantReact@please.nospam> - 2019-01-17 22:41 -0500
      Re: cost {} = ? (React Native) CantReact <CantReact@please.nospam> - 2019-01-17 22:37 -0500

#35963 — cost {} = ? (React Native)

Hi, looking at some React Native examples and I see things like this:

const {
   FooterComponent,
   HeaderComponent,
   ItemComponent,
   ListEmptyComponent,
   ItemSeparatorComponent,
   PlainInput,
   SeparatorComponent,
   Spindicator,
   genItemData,
   getItemLayout,
   pressItem,
   renderSmallSwitchOption,
} = require('./ListExampleShared');

or this:

const {
   Animated,
   Image,
   Platform,
   TouchableHighlight,
   StyleSheet,
   Switch,
   Text,
   TextInput,
   View,
} = ReactNative;

What is this? Some kind of import? Can anyone explain the logic behind this?

Thank you

[toc] | [next] | [standalone]

#35964

This one explains something, but not everything (albeit I may just need 
to understand more of how React Native works)

https://stackoverflow.com/questions/33798717/javascript-es6-const-with-curly-braces



On 1/15/2019 5:23 PM, CantReact wrote:
> 
> Hi, looking at some React Native examples and I see things like this:
> 
> const {
>    FooterComponent,
>    HeaderComponent,
>    ItemComponent,
>    ListEmptyComponent,
>    ItemSeparatorComponent,
>    PlainInput,
>    SeparatorComponent,
>    Spindicator,
>    genItemData,
>    getItemLayout,
>    pressItem,
>    renderSmallSwitchOption,
> } = require('./ListExampleShared');
> 
> or this:
> 
> const {
>    Animated,
>    Image,
>    Platform,
>    TouchableHighlight,
>    StyleSheet,
>    Switch,
>    Text,
>    TextInput,
>    View,
> } = ReactNative;
> 
> What is this? Some kind of import? Can anyone explain the logic behind 
> this?
> 
> Thank you
> 

[toc] | [prev] | [next] | [standalone]

#35965

On 2019-01-15, CantReact <CantReact@please.nospam> wrote:
> Hi, looking at some React Native examples and I see things like this:
>
> const {
>    FooterComponent,
>    HeaderComponent,
>    ItemComponent,
>    ListEmptyComponent,
>    ItemSeparatorComponent,
>    PlainInput,
>    SeparatorComponent,
>    Spindicator,
>    genItemData,
>    getItemLayout,
>    pressItem,
>    renderSmallSwitchOption,
> } = require('./ListExampleShared');
...
> What is this? Some kind of import? Can anyone explain the logic
> behind this?

Yes it's an import. 'require' returns an object containing the
exported properties, and 'const { } =' "destructures" that object
into variables in the current script. It's a lot less typing and
more explicit to declare what properties you want to import and then
use then locally like this:

    const {
      FooterComponent,
      HeaderComponent
    } = require('./ListExampleShared')

    const footer = new FooterComponent()
    const header = new HeaderComponent()

than to type it all out explicitly every time like this:

    const ListExampleShared = require('./ListExampleShaared')

    const footer = new ListExampleShared.FooterComponent()
    const header = new ListExampleShared.HeaderComponent()

[toc] | [prev] | [next] | [standalone]

#35966

Jon Ribbens wrote:
> On 2019-01-15, CantReact <CantReact@please.nospam> wrote:

A forged sender "adress" is inappropriate (see AUPs and RFC 5536),
a pseudonym *only* is stupid.

>> Hi, looking at some React Native examples and I see things like this:
>>
>> const {
>>    FooterComponent,
>>    HeaderComponent,
>>    ItemComponent,
>>    ListEmptyComponent,
>>    ItemSeparatorComponent,
>>    PlainInput,
>>    SeparatorComponent,
>>    Spindicator,
>>    genItemData,
>>    getItemLayout,
>>    pressItem,
>>    renderSmallSwitchOption,
>> } = require('./ListExampleShared');
> ...
>> What is this? Some kind of import? Can anyone explain the logic
>> behind this?
> 
> Yes it's an import. 'require' returns an object containing the
> exported properties, and 'const { } =' "destructures" that object
> into variables in the current script. It's a lot less typing and
> more explicit to declare what properties you want to import and then
> use then locally like this:
> 
>     const {
>       FooterComponent,
>       HeaderComponent
>     } = require('./ListExampleShared')
> 
>     const footer = new FooterComponent()
>     const header = new HeaderComponent()
> 
> than to type it all out explicitly every time like this:
> […]

However, if possible, the import by require() should be replaced with

import {
  FooterComponent,
  HeaderComponent,
  ItemComponent,
  ListEmptyComponent,
  ItemSeparatorComponent,
  PlainInput,
  SeparatorComponent,
  Spindicator,
  genItemData,
  getItemLayout,
  pressItem,
  renderSmallSwitchOption
} from './ListExampleShared';

because that will only import the used parts.

See also: <https://github.com/airbnb/javascript#modules--use-them>

-- 
PointedEars

Twitter: @PointedEars2
Please do not cc me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#35967

Thomas 'PointedEars' Lahn wrote:

> A forged sender "adress" is inappropriate (see AUPs and RFC 5536),
> a pseudonym only is stupid.

SMH

[toc] | [prev] | [next] | [standalone]

#35969

On 1/16/2019 4:03 PM, Thomas 'PointedEars' Lahn wrote:

> A forged sender "adress" is inappropriate (see AUPs and RFC 5536),
> a pseudonym*only*  is stupid.

Jeremy T. Bestow, Sterling VA, SSN: 594-66-4375

Happy now?

[toc] | [prev] | [next] | [standalone]

#35968

On 1/16/2019 6:32 AM, Jon Ribbens wrote:
> 
> Yes it's an import. 'require' returns an object containing the
> exported properties, and 'const { } =' "destructures" that object
> into variables in the current script. It's a lot less typing and
> more explicit to declare what properties you want to import and then
> use then locally like this:

John. You rock!

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web