Free React.js Fundamentals Course • Hacker News Board

Re: Free React.js Fundamentals Course

#51

Post by enraged_camel » Tue, Mar 01, 2016, 10:21 PM UTC

Here's a potentially dumb question about React: can it be used inside a client-side application that was written using Angular?

Part of my job involves customizing a commercial, closed-source web application that lets you build web forms. The application's front-end was written using Angular, but it lets you add your own custom JavaScript to add more functionality to forms, such as character counts, hiding/showing relevant fields based on conditions and auto-capitalization of user input. Basically, each form has its own JSFiddle-like section that gets published alongside the form.

We currently use native JS and JQuery for these customizations, usually within a monolithic document.ready block. The problem is that our code can get pretty complex, especially when hooking up multiple event handlers to the same elements. I've been thinking that React may be able to solve this problem, but I'm uncertain about using it alongside Angular, especially since I have no control over the latter.

Based on this description, would there be any advantages to trying to shoehorn React into our projects, or should we stick with native JS and JQuery?

Re: Free React.js Fundamentals Course

#52

Post by tm33 » Tue, Mar 01, 2016, 10:42 PM UTC

enraged_camel wrote: post #8

tm33 wrote: post #5

Earlier quoted context omitted.

Thank you so much! Means the world.

Tyler, I echo the parent's comments. I took your React course on Egghead back in August and it was great. Question: I've been meaning to come back to it and re-watch the videos, but I'm concerned that the React ecosystem changes quickly and they may have become outdated. Can you comment? Do you have plans to update/re-record the videos as new versions of React/Redux/Flux etc. come out? Thanks again for all the great…

The react ecosystem does move really quickly. I think what's important to realize is that even though it moves quickly, if you learn the correct principles you'll just be stuck with minor API changes rather than architectural changes - which is a huge difference. I tried to approach the course from this point of view as well. Even if the API changes a little bit, the overarching methodology of building your UI will be the same. Someone who did the amazingly was Dan Abramov in is egghead series. Learn concepts, not libraries.

Re: Free React.js Fundamentals Course

#53

Post by tm33 » Tue, Mar 01, 2016, 10:42 PM UTC

sotojuan wrote: post #11

I think I'm going to go through this this coming weekend, even if I am comfortable with React. Tyler is a great teacher and I could use help with the router and webpack. Thanks for making this free!

Thank you so much!

Re: Free React.js Fundamentals Course

#54

Post by Geee » Tue, Mar 01, 2016, 10:43 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…

Native fetch() and polyfills are also an excellent choice for ajax. There's a comparison of those: http://andrewhfarmer.com/ajax-libraries/

Re: Free React.js Fundamentals Course

#55

Post by tm33 » Tue, Mar 01, 2016, 10:43 PM UTC

joshmanders wrote: post #10

Great work Tyler! You're one of the reasons I even am remotely interested in React. You're a very good teacher.

Huge compliment. Thank you SO much!

Re: Free React.js Fundamentals Course

#56

Post by BigJono » Tue, Mar 01, 2016, 10:53 PM UTC

ausjke wrote: post #21

Just started learning js etc. Was told Angularjs has everything loaded so it's easy for beginners, while React is better for the more experienced who knows how to pull various things together? is this true? if so is there a "React-stack" for me to start with?

Don't start with a full stack, it can be overwhelming. Start with a minimal toolkit and only add stuff when you actually run into pain points that it can solve. This guide is a good one:

https://github.com/petehunt/react-howto

Re: Free React.js Fundamentals Course

#57

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

halayli wrote: post #16

Thanks Tyler! It might be helpful to also add redux + async to it.

Check out the other courses. I think they're what you're looking for :)

Re: Free React.js Fundamentals Course

#58

Post by Geee » Tue, Mar 01, 2016, 11:02 PM UTC

enraged_camel wrote: post #51

Here's a potentially dumb question about React: can it be used inside a client-side application that was written using Angular? Part of my job involves customizing a commercial, closed-source web application that lets you build web forms. The application's front-end was written using Angular, but it lets you add your own custom JavaScript to add more functionality to forms, such as character counts, hiding/showing re…

It's possible: http://ngreact.github.io/ngReact/

Re: Free React.js Fundamentals Course

#59

Post by MatthewPhillips » Tue, Mar 01, 2016, 11:10 PM UTC

iLoch wrote: post #40

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?

Here's a look at the folder structure we're using for our app: https://i.imgur.com/wc7DyOA.png /actions: Flux action creators /components: These are all the JSX React components (the presentation layer) - so there are subfolders like "pages", "controls", etc. /reducers: These are Redux reducers - they're the logic that handles all of the application state /services: This is what your question was really about. We use…

How does one create a reusable component (something I could publish on npm for example) for React + Redux? The component would have to define its own data expectations, so the actions and reducers would have to be defined by the component. How would you do this, given your folder structure (which I think is very common in Redux/React apps)?

Re: Free React.js Fundamentals Course

#60

Post by iLoch » Tue, Mar 01, 2016, 11:13 PM UTC

MatthewPhillips wrote: post #59

iLoch wrote: post #40

Earlier quoted context omitted.

Here's a look at the folder structure we're using for our app: https://i.imgur.com/wc7DyOA.png /actions: Flux action creators /components: These are all the JSX React components (the presentation layer) - so there are subfolders like "pages", "controls", etc. /reducers: These are Redux reducers - they're the logic that handles all of the application state /services: This is what your question was really about. We use…

How does one create a reusable component (something I could publish on npm for example) for React + Redux? The component would have to define its own data expectations, so the actions and reducers would have to be defined by the component. How would you do this, given your folder structure (which I think is very common in Redux/React apps)?

Generally you don't actually use Redux in your component. Instead, you'd expose the action creators required by your component. Then the user has to make sure that the new state created from your actions gets back to your component via props. This is a common behaviour I've observed, anyway.