Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

React in patterns

github.com

Post reply on HN
Print view View original

11–20 of 52 posts

Re: React in patterns

#11

Post by dsp1234 »

gf263 wrote: post #10

I literally don't know where to get started with React. Does anyone have any resources for a web design newbie?

I started with this tutorial[0] that covers react with no JSX, no Flux, no ES6, and no Webpack.

It is just a couple of script includes and normal html/javascript.

From that tutorial, I was able to understand exactly what react is. Then I started adding in the other items on top.

It's definitely not a boilerplate "site in 5 minutes", but it's also a lot less confusing when trying to learn what's going on underneath the hood with react.

[0] - http://jamesknelson.com/learn-raw-react-no-jsx-flux-es6-webp...

Re: React in patterns

#13

Post by munro »

_greim_ wrote: post #8

Ugh, the dependency injection stuff is just Angular all over again. export default wire(Title, ['title'], function resolve(title) { return { title }; }); Now I have to register "title" somewhere. Where is it registered? Did I remember to register it? I no longer know what's going on just by looking at the file in front of me, and my linter is silent. Then I have to annotate the function and declare it in the argument…

Agreed, it serves no purpose. For testing, dynamic languages have the ability to ... dynamically replace dependencies. :) For building a library, a function that takes in dependencies and returns the component works extremely well & is straightforward to understand, no tooling required.

Re: React in patterns

#14

Post by dceddia »

dsp1234 wrote: post #11
gf263 wrote: post #10

I literally don't know where to get started with React. Does anyone have any resources for a web design newbie?

I started with this tutorial[0] that covers react with no JSX, no Flux, no ES6, and no Webpack. It is just a couple of script includes and normal html/javascript. From that tutorial, I was able to understand exactly what react is . Then I started adding in the other items on top. It's definitely not a boilerplate "site in 5 minutes", but it's also a lot less confusing when trying to learn what's going on underneath t…

This was my first exposure too. Once you're ready to build an app with JSX (probably right after you finish that tutorial and realize that typing React.createElement all over will get painful), check out the new tool Create React App[0] by Dan Abramov and the folks at Facebook. It's an official generator that'll get you going with no build to set up, and a bare minimum of necessary code, basically one step above Hello World.

I'm working on a book about learning React by itself, without Redux and Webpack and all the other tools that distract from learning the basics. Hope to have it out in the next week or so.

[0] https://github.com/facebookincubator/create-react-app

Re: React in patterns

#15

Post by falnatsheh »

gf263 wrote: post #10

I literally don't know where to get started with React. Does anyone have any resources for a web design newbie?

So I just started a week ago, there's a lot of outdated tuts on the web, here is what I think could be a good route for somebody who starting today:

1- Create an app following the info here[0]. This was released officially few days ago, and it removes the pain of setuping React dependencies.

2- Use this [1] youtube tutorial to learn about React. I stopped at #9 since I didn't want to use Flux.

3- I think if you want to build something with React consider using Redux. Same youtube channel have a good tutorial[2] as well.

[0] - https://facebook.github.io/react/blog/2016/07/22/create-apps...

[1] - https://www.youtube.com/watch?v=MhkGQAoc7bc&list=PLoYCgNOIyG...

[2] - https://www.youtube.com/watch?v=1w-oQ-i1XB8

Re: React in patterns

#16

Post by clay_to_n »

Fifer82 wrote: post #4

I am struggling a little with Flux, everyone has their own implementation of it. I mean that is grand, but what does it actually mean for me? Contextless. Thanks for sharing :)

Don't implement Flux or Redux until you need it. This is what most React experts keep saying, but there are a ton of entry-level tutorials trying to teach both React concepts and Flux concepts (probably because it's a cool pattern). For most small apps, it's unnecessary. Pass state down as props.

Re: React in patterns

#17

Post by dceddia »

_greim_ wrote: post #8

Ugh, the dependency injection stuff is just Angular all over again. export default wire(Title, ['title'], function resolve(title) { return { title }; }); Now I have to register "title" somewhere. Where is it registered? Did I remember to register it? I no longer know what's going on just by looking at the file in front of me, and my linter is silent. Then I have to annotate the function and declare it in the argument…

Completely agree. I don't see many people in the React community advocating the use of DI though, so that's a plus.

The DI in Angular made a little bit of sense because JS modules weren't very widespread back then. But now, with ES6 imports (and/or 'require') there's no need. We have real modules now, and they can be dynamically injected for testing purposes with something like inject-loader[0].

I think Angular and/or DI's popularity has something to do with Java devs learning frontend development, and feeling more comfortable with more structure.

[0] https://github.com/plasticine/inject-loader

Re: React in patterns

#18

Post by mparr4 »

Stenerson wrote: post #7
Fifer82 wrote: post #4

I am struggling a little with Flux, everyone has their own implementation of it. I mean that is grand, but what does it actually mean for me? Contextless. Thanks for sharing :)

When I was learning Flux I thought this video series[1] was really helpful. That being said, I've switched to Redux now and am much happier for it. If you're into videos I highly recommend Dan's (creator of Redux and on React core team) Egghead series[2]. [1] - https://www.youtube.com/watch?v=Pd6Ub7Ju2RM [2] - https://egghead.io/courses/getting-started-with-redux

I second that. Anything by Dan Abramov is worth your time. In addition to being a brilliant dev he's an excellent teacher. The egghead series is fantastic.

Re: React in patterns

#19

Post by kin »

_greim_ wrote: post #8

Ugh, the dependency injection stuff is just Angular all over again. export default wire(Title, ['title'], function resolve(title) { return { title }; }); Now I have to register "title" somewhere. Where is it registered? Did I remember to register it? I no longer know what's going on just by looking at the file in front of me, and my linter is silent. Then I have to annotate the function and declare it in the argument…

Yeah, I'm also not a fan of the DI example. I would rather explicitly pass it down the component tree or use Redux's connect. I believe React's docs advise against using context.

Re: React in patterns

#20

Post by mparr4 »

clay_to_n wrote: post #16
Fifer82 wrote: post #4

I am struggling a little with Flux, everyone has their own implementation of it. I mean that is grand, but what does it actually mean for me? Contextless. Thanks for sharing :)

Don't implement Flux or Redux until you need it. This is what most React experts keep saying, but there are a ton of entry-level tutorials trying to teach both React concepts and Flux concepts (probably because it's a cool pattern). For most small apps, it's unnecessary. Pass state down as props.

This.

If your component hierarchy matches your application state hierarchy, don't use flux. If you need to pass pieces of state around to a bunch of different components (like sharing state across views), use flux.

My first react application was complicated enough (enterprise analytics application) to require a flux implementation. I went redux and would highly recommend it both due to its ease-of-use and popularity. However, in subsequent applications I haven't needed it and have enjoyed writing vanilla react.

Post reply on HN