8 ms·

How is tag-nesting not considered an API for React? The entire point of the new context API is to get around prop-drilling. Being able to do that and express th

How is tag-nesting not considered an API for React? The entire point of the new context API is to get around prop-drilling. Being able to do that and express the intent in JSX is what it does well IMO...

hestefisk 8y ago
Context to me seems like a sophisticated way of declaring global variables. Might as well do const GLOBALS = { ... } instead of another complex API that has to be loaded.
- eropple 8y ago
  It's not, though, any more than dependency injection is "declaring global variables".
- crooked-v 8y ago
  The new context API effectively makes variables available globally, but you're still using a separate (explicitly declared) Consumer for each, so you don't have any of the basic issues that go with using a single set of globals. For a very simple example: import { UserIdConsumer } from '@/contexts' const ThisComponent = () => ( <div> User ID: <UserIdConsumer>{value => value}</UserIdConsumer> </div> ) export default ThisComponent
  - hestefisk 8y ago
    Not sure I follow. Where does value come from?
    - tym0 8y ago
      UserIdConsumer will call the children prop as function, UserIdConsumer could look like this: const UserIdConsumer props => <Fragment>props.children(theValueYouWantAvailable)</Fragment>
tootie 8y ago
That's Stockholm Syndrome from staring at too much JSX. We abandoned programming with XML in 1999 for a reason. JSX is acceptable as fancy markup, not with magic behavior.
- dmitriid 8y ago
  JSX is a paper-thin XML-like DSL on top of regular Javascript. This: <Component prop="value" /> directly translates to this: React.createElement(Component, {prop: "value"}, null); You can skip JSX entirely, and use functions only. If that's too verbose for you, some people alias `React.createElement` to `h` à la Hyperscript[1] and that becomes h(Component, {prop: "value"}, null) That's why, unlike the not-really-HTML-not-really-javascript templates of Vue and Angular, JSX is not markup. It's 99% plain old Javascript, 1% paper-thin DSL. [1] https://github.com/hyperhype/hyperscript https://github.com/hyperhype/hyperscript
  - kabes 8y ago
    For me JSX really feels like old-school PHP, we all decided this sucks: <?php if (condition) { ?> <div>whatever</div> <?php } ?> Yet in react everybody seems happy to do the exact same thing in javascript.
    - skocznymroczny 8y ago
      In the webdev world, everything old is new again
    - seattle_spring 8y ago
      It's not the exact same thing at all though. Declarative versus imperative. I'm sure someone's going to hem and haw about how they're the "effectively" the same, but they're really not. JSX is a breath of fresh air for front end development.
      - kabes 8y ago
        Straight from the react docs [1]: if (isLoggedIn) { return <UserGreeting />; } How is that different? [1] https://reactjs.org/docs/conditional-rendering.html https://reactjs.org/docs/conditional-rendering.html

hestefisk 8y ago

Context to me seems like a sophisticated way of declaring global variables. Might as well do const GLOBALS = { ... } instead of another complex API that has to be loaded.

eropple 8y ago
It's not, though, any more than dependency injection is "declaring global variables".
crooked-v 8y ago
The new context API effectively makes variables available globally, but you're still using a separate (explicitly declared) Consumer for each, so you don't have any of the basic issues that go with using a single set of globals. For a very simple example: import { UserIdConsumer } from '@/contexts' const ThisComponent = () => ( <div> User ID: <UserIdConsumer>{value => value}</UserIdConsumer> </div> ) export default ThisComponent
- hestefisk 8y ago
  Not sure I follow. Where does value come from?
  - tym0 8y ago
    UserIdConsumer will call the children prop as function, UserIdConsumer could look like this: const UserIdConsumer props => <Fragment>props.children(theValueYouWantAvailable)</Fragment>

tootie 8y ago

That's Stockholm Syndrome from staring at too much JSX. We abandoned programming with XML in 1999 for a reason. JSX is acceptable as fancy markup, not with magic behavior.

dmitriid 8y ago
JSX is a paper-thin XML-like DSL on top of regular Javascript. This: <Component prop="value" /> directly translates to this: React.createElement(Component, {prop: "value"}, null); You can skip JSX entirely, and use functions only. If that's too verbose for you, some people alias `React.createElement` to `h` à la Hyperscript[1] and that becomes h(Component, {prop: "value"}, null) That's why, unlike the not-really-HTML-not-really-javascript templates of Vue and Angular, JSX is not markup. It's 99% plain old Javascript, 1% paper-thin DSL. [1] https://github.com/hyperhype/hyperscript https://github.com/hyperhype/hyperscript
- kabes 8y ago
  For me JSX really feels like old-school PHP, we all decided this sucks: <?php if (condition) { ?> <div>whatever</div> <?php } ?> Yet in react everybody seems happy to do the exact same thing in javascript.
  - skocznymroczny 8y ago
    In the webdev world, everything old is new again
  - seattle_spring 8y ago
    It's not the exact same thing at all though. Declarative versus imperative. I'm sure someone's going to hem and haw about how they're the "effectively" the same, but they're really not. JSX is a breath of fresh air for front end development.
    - kabes 8y ago
      Straight from the react docs [1]: if (isLoggedIn) { return <UserGreeting />; } How is that different? [1] https://reactjs.org/docs/conditional-rendering.html https://reactjs.org/docs/conditional-rendering.html