Free React.js Fundamentals Course • Hacker News Board

Re: Free React.js Fundamentals Course

#61

Post by moonchrome » Tue, Mar 01, 2016, 11:53 PM UTC

eecks wrote: post #30

Really can't decide to go ahead with an Angular approach (2.0) or use React. I know React is only for the view layer so what are people using with React to do stuff like api calls?

For me it comes down to what language are you more comfortable using. Plain old JavaScript with Babel ? React TypeScript ? Angular 2

Angular 2 is much more OO style GUI lib - if you've ever worked with stuff with WPF you'll recognize the patterns immediately - focus on DI, property bindings and attributes, class based design, etc. It really works well with TS and IDEs

React + TS is quirky to say the least - not just the base lib but the ecosystem - for example immutable.js is annoying to use with TS (creating typed records). It can be done but I'm not sure it's worth the effort.

But one huge consideration is that React has been "out there" for a while now - there's a ton of quality work available on top of it. In Angular 2 even the basics are in flux like animations and stuff like material design components are nowhere near in sight.

Re: Free React.js Fundamentals Course

#62

Post by kevinob11 » Tue, Mar 01, 2016, 11:55 PM UTC

eecks wrote: post #30

Really can't decide to go ahead with an Angular approach (2.0) or use React. I know React is only for the view layer so what are people using with React to do stuff like api calls?

I really like axios for the api calls, super simple and uses the promises syntax that we use throughout our app.

Re: Free React.js Fundamentals Course

#63

Post by silviogutierrez » Tue, Mar 01, 2016, 11:58 PM UTC

scwoodal wrote: post #44

eecks wrote: post #30

Really can't decide to go ahead with an Angular approach (2.0) or use React. I know React is only for the view layer so what are people using with React to do stuff like api calls?

I spent a month playing with the different libraries and settled on the following core modules for my frontend: * redux: Keeps track of all the state (UI and domain) in a single object. * immutable.js: Obviously for the immutable data structures which plays nicely within the React ecosystem. It also has a rich set of data structures that aren't found natively within JavaScript. For example I make heavy use of Records…

Any good tutorials for CRUD-heavy redux apps? Do you dynamically create your action creators? Or did you write createWidget(), updateWidget(), retrieveWidget() and destroyWidget() manually per resource (and their 3 corresponding constants for REQUEST, SUCCESS and ERROR)?

And how do you ensure your detail components (WidgetDetail, or WidgetForm) have the widget loaded before displaying? asyncConnect?

Thanks in advance for any pointers!

Re: Free React.js Fundamentals Course

#64

Post by santoshimz » Wed, Mar 02, 2016, 12:05 AM UTC

evo_9 wrote: post #45

Is anyone using React with .Net ( http://reactjs.net )? If so how has your experience been? This would seem to fit well with a MVC WebApi backend.

i started using it for one of my project. using react as a view works well without having to change backend

Re: Free React.js Fundamentals Course

#65

Post by idibidiart » Wed, Mar 02, 2016, 12:06 AM UTC

eecks wrote: post #30

Really can't decide to go ahead with an Angular approach (2.0) or use React. I know React is only for the view layer so what are people using with React to do stuff like api calls?

I recommend going with a deep architecture like React with GraphQL/Relay. Nothing like the React/Relay combo in the Angular word.

Here is why Relay matters:

https://gist.github.com/idibidiart/49a095b6bc528638f34f

Re: Free React.js Fundamentals Course

#66

Post by scwoodal » Wed, Mar 02, 2016, 12:45 AM UTC

silviogutierrez wrote: post #63

scwoodal wrote: post #44

Earlier quoted context omitted.

I spent a month playing with the different libraries and settled on the following core modules for my frontend: * redux: Keeps track of all the state (UI and domain) in a single object. * immutable.js: Obviously for the immutable data structures which plays nicely within the React ecosystem. It also has a rich set of data structures that aren't found natively within JavaScript. For example I make heavy use of Records…

Any good tutorials for CRUD-heavy redux apps? Do you dynamically create your action creators? Or did you write createWidget(), updateWidget(), retrieveWidget() and destroyWidget() manually per resource (and their 3 corresponding constants for REQUEST, SUCCESS and ERROR)? And how do you ensure your detail components (WidgetDetail, or WidgetForm) have the widget loaded before displaying? asyncConnect? Thanks in advance…

I'm a visual person so perhaps seeing some code will help. I've gutted a CRUD heavy side project that shows how I lay things out and put it on Github [1]. I left out the back end folder so this repo isn't intended to work. The "users" and "journals" folders are the CRUD parts.

I prefer a domain folder structure versus splitting things by function. So instead of folders like "actions/userActions.js" and "reducers/userReducer.js" I'll do "users/actions.js" and "users/reducers.js".

Ping me on github if you have any more questions.

[1] https://github.com/scottwoodall/react-demo

Re: Free React.js Fundamentals Course

#67

Post by frankthedog » Wed, Mar 02, 2016, 12:46 AM UTC

gorkemyurt wrote: post #27

noobie wrote: post #12

Honest noob question, what's with all the hype about React? Edit: Awesome replies, thank you!

No one mentioned code sharing between server side and the client side! (There are other ways to achieve this other frameworks/libraries are catching up) If you have a node.js server you can use react for both server side rendering and client side rendering.. So that you get the SS rendering advantages like fast initial page load and SEO but also have a very dynamic web app after the initial render.

Does server side rendering actually provide a boost in SEO these days? I know google renders JS apps (would be pretty silly of them to create angular if they didn't) and indexes SPAs, but am unsure on the other search engines.

Re: Free React.js Fundamentals Course

#68

Post by jeffchien » Wed, Mar 02, 2016, 12:49 AM UTC

noobie wrote: post #12

Honest noob question, what's with all the hype about React? Edit: Awesome replies, thank you!

In addition to everyone else's replies, React Native is starting to take off as a next-generation Cordova: Javascript code using native APIs and native UI components rather than using JS and HTML in WebView using native APIs.

Re: Free React.js Fundamentals Course

#69

Post by silviogutierrez » Wed, Mar 02, 2016, 12:56 AM UTC

scwoodal wrote: post #66

silviogutierrez wrote: post #63

Earlier quoted context omitted.

Any good tutorials for CRUD-heavy redux apps? Do you dynamically create your action creators? Or did you write createWidget(), updateWidget(), retrieveWidget() and destroyWidget() manually per resource (and their 3 corresponding constants for REQUEST, SUCCESS and ERROR)? And how do you ensure your detail components (WidgetDetail, or WidgetForm) have the widget loaded before displaying? asyncConnect? Thanks in advance…

I'm a visual person so perhaps seeing some code will help. I've gutted a CRUD heavy side project that shows how I lay things out and put it on Github [1]. I left out the back end folder so this repo isn't intended to work. The "users" and "journals" folders are the CRUD parts. I prefer a domain folder structure versus splitting things by function. So instead of folders like "actions/userActions.js" and "reducers/user…

Whoa thanks! I'll take a look.

Re: Free React.js Fundamentals Course

#70

Post by tm33 » Wed, Mar 02, 2016, 1:02 AM UTC

brosky117 wrote: post #7

I've watched both his React and React Native tutorials and loved both of them! I had the chance to talk with him after a local JS meetup and he was super nice. Can't recommend his stuff more.

Thanks so much! Utah FTW.