React + RxJS = Reactive Global Goodness

  Рет қаралды 41,513

Jack Herrington

Jack Herrington

Күн бұрын

Let's fuse together React and RxJS to build a Pokemon deck builder application and use that as an opportunity to learn about RxJS and how it can play nicely with React.
00:00 Introduction
01:06 Project Setup
03:00 Getting the data
08:30 Creating the search UI
11:50 Supporting selections
14:11 Merging pokemon with selections
16:40 Creating the deck
17:44 Bringing in observable-hooks
20:45 Using context
23:23 Using RxJS for all the state
26:15 Outroduction
Code: github.com/jherr/rxjs-pokemon
RxJS: rxjs.dev/
Observable Hooks: observable-hooks.js.org/
👉 What's my theme? Night Wolf [black]
👉 What's that font? MonoLisa
👉 Jack is also on the React Round Up podcast: devchat.tv/podcasts/react-rou...
👉 Don't forget to subscribe to this channel for more updates: bit.ly/2E7drfJ
👉 Discord server signup: / discord
Thank you for watching this video, click the "SUBSCRIBE" button to stay connected with this channel.
#rxjs #react

Пікірлер: 186
@IamPali2024
@IamPali2024 5 ай бұрын
Criminally underrated. Short, sweet, and directly discusses the topic at hand. He gives you the critical information needed without wasting time with irrelevant boilerplate details. Bravo 👏
@omarkarim9298
@omarkarim9298 2 жыл бұрын
this is the most underrated programming tutorial channel ...
@AliAlmahdi
@AliAlmahdi 2 жыл бұрын
I love the way you explain things, extremely simplified. I develop in both, angular and react, as for backend mostly NestJS (Coming from Java to Python to NodeJS). I know a lot of what you say, but I watch to learn something new, I have adopted your style somehow. Thank you.
@oumardicko5593
@oumardicko5593 2 жыл бұрын
Didn't know about the observable-hooks library, since most of the stuff i've seen are about redux-observable but that was amazing. Thanks for the great content 😁
@jherr
@jherr 2 жыл бұрын
You are very welcome. Thank you for the great idea.
@priyanshramnani1751
@priyanshramnani1751 10 ай бұрын
Thank you so much! you explained complex thing in such a simple manner that it was easy to understand! loved the candid smile in the end!
@sideshowlol
@sideshowlol 2 жыл бұрын
Love the sigh at the end. Another vid well done! Thanks Jack 😄👍
@juanperez5257
@juanperez5257 Ай бұрын
Great, great, great I wish all the internet would be like this
@ericzorn3735
@ericzorn3735 2 жыл бұрын
Great video as always @Jack! More and more recently, I have seen the true power of RX and see how the observable pattern is so powerful (Svelte stores). Can we please see a video on SingleSPA server-side rendering and possibly even see if we can integrate NextJS into SingleSPA’s ecosystem. If not, even a demo on the recommended SingleSPA SSR integration would be awesome 😀
@twothreeoneoneseventwoonefour5
@twothreeoneoneseventwoonefour5 Жыл бұрын
At my current job I am creating a highly interactive map application that uses a native Javascript library (leaflet), so I needed the reactivity and interactivity that integrates well into React, as well as just plain Javascript. I searched for hours, finally discovered RxJS lately and I got to say I am loving it. Having streams of data, combining them and having the whole application react to that (not only the React, but the javascript map part as well) is life changing. The first time I created a complex stream I felt like a genius, everything is so readable and all interactions flow so well. Also being able to separate the business logic of your application and the actual React UI components feels great. React was intended to be a UI library, and now all my React components are only concerned about the UI, with all the complex logic being written outside of them. If you need complex interactions with data (inside and outside of React), RxJS is a life saver. Coming from Redux even with Redux Toolkit, I am crying at how happy I am switching to RxJS. No more endless one liner actions, no more selectors and dispatch slugs. You can make RxJS as easy as Jotai or as complex as you want it to be.
@CarlosAlexisG
@CarlosAlexisG 2 жыл бұрын
Great video as always! Thanks!!! Would love a video about testing library with React and hooks 😋
@michaeltyiska
@michaeltyiska Жыл бұрын
Excellent lecture. You deserve way more subscribers.
@clusterbyblocks
@clusterbyblocks 2 жыл бұрын
Thanks again for being very concise and provide this practical walkthrough on state management with rxjs, [...] Learning a lot from all these State Management series. I guess what I can get from it is that there are just subtle differences between which library we use to handle our app state. But to understand those core principles is better than relying on more complex lib... Will be awesome if a series on functional programming with typescript comes from this channel! Just core principles, perhaps Monads?
@jherr
@jherr 2 жыл бұрын
Ah, monads. I looked a while back for a decent video that described Monads. I understand them a little. Maybe I can put something together.
@aymanpatel5862
@aymanpatel5862 2 жыл бұрын
Would love to see the use-cases of RxJS and Redux.
@kostispodaras999
@kostispodaras999 2 жыл бұрын
Working on a project like this. Using redux-observable. It's really powerful
@deansacramone2515
@deansacramone2515 2 жыл бұрын
@@kostispodaras999 Can you share the github?
@seanpaulson9098
@seanpaulson9098 Жыл бұрын
Loading list on window scroll. Dragi.g items in a list. Any event/asynchronous events.
@yikan1107
@yikan1107 Жыл бұрын
Rxjs is bundle heavy. It’s also better used if you have more help in unsubscribe. Like the pipe async in angular that auto unsubscribes As it is right now , i don’t see the combo being practically effective.
@vitorfigueiredomarques2004
@vitorfigueiredomarques2004 11 ай бұрын
@@yikan1107 All imports from rxjs are tree-shakable, so it's not bundle heavy since you're application are using only what it needs from rxjs.
@abhisheksharma9796
@abhisheksharma9796 2 жыл бұрын
Hey very nicely explained 😀 Keep the knowledge coming.
@mortezatourani7772
@mortezatourani7772 2 жыл бұрын
Really enjoyed watching you code and I LOVE RxJS
@rucklerful
@rucklerful 2 жыл бұрын
Thank you so muck for sharing all of this knowledge with us.
@ThEldeRS
@ThEldeRS 2 жыл бұрын
Thanks for the great video Jack! I don't know if it's my end or not, but the microphone was distorted (by means of being too loud) a lot in the video... Anyhow, would love to see some more nextJS, especially statically generating static content which is gated - or locked (meaning you need to be authenticated and authorized to see it)! Keep up the great videos!
@jherr
@jherr 2 жыл бұрын
Yeah, that's on me. Bad recording on that and I didn't notice it until it came out. :(
@vuluu4066
@vuluu4066 2 жыл бұрын
Thank Jack. It's an amazing tutorial. Can you create another video that describes how you apply rxjs in the big application( folder structure , debugging, testing..)?
@luispozo2380
@luispozo2380 Жыл бұрын
fyi RxJs by industry standard is used more than any other State Management library or frame work. We need more content. for example how you apply RxJs in a big application( folder structure(architecture) ,valid patterns, anti patterns, debugging, testing..)? Thank you for the awesome content! You rock!!!!
@hillcountrydev
@hillcountrydev 2 жыл бұрын
React/Typescript + Apollo/GraphQL. Thanks Jack! awesome content as always
@JustHumanfacts
@JustHumanfacts 2 жыл бұрын
this is amazing....love your work
@adamkarafyllidis9264
@adamkarafyllidis9264 2 жыл бұрын
Thank you for your awesome videos! I have a tutorial recommendation. How to approach DDD or clean architecture in a more functional and JS idiomatic way to suit React applications. For example how to structure and implement the domain layer with immutable entities, use cases, the data layer such as repositories (here maybe a more OOP or imperative style), so to extract business logic from state management solutions such as xState for separation of concerns! That would be a great topic which I can't find good enough resources! Thank you!
@abhinav.sharma
@abhinav.sharma 2 жыл бұрын
LOOOOOOKING FORWARD TO THIS ONE!
@chris3079
@chris3079 2 жыл бұрын
would love to see more xstate, of all the packages i use with react/react-native, feel that one is the one i should get really good at, i see the benefits so much in area i use it. Maybe more on the Actor model etc
@hbela1000
@hbela1000 2 жыл бұрын
In Angular RXJS is paramount, really enjoyed this vid to see how React can leverage RXJS.
@vin5718
@vin5718 2 жыл бұрын
Would love to see ReactQuery and/or SWR for API State Management, possibly React query + GraphQL as well
@user-vu7ew6qm4c
@user-vu7ew6qm4c 2 жыл бұрын
wow... awesome best rxjs tutorial!
@phyolim5064
@phyolim5064 2 жыл бұрын
Thank you for this nice tutorial. I think you could do everything demoed with just useState and derived states in react. I think those would be pure functions and easier to look at? What's the advantage of using rxjs?
@bobvantpadje1490
@bobvantpadje1490 2 жыл бұрын
Really like the simple explanation on how to implement rxjs in a React project. I am just a little bit curious on the why part tho. What sort of project would you recommend rxjs over any other state management library? I really like how this works, but it does make a project much harder to understand for developers who don’t have any rxjs experience. When would you choose rxjs over just regular context or any other state management library? Also another question, what were there any more advantages in exporting the observables in the context instead of just importing them as constants?
@jherr
@jherr 2 жыл бұрын
Gotcha. Yeah, this video was a question about how to do it, and not about why to do it. So I wanted to cover a lot of the methodology bases. As for the why, it really depends on the nature of how data is modeled in your system. If you have real-time data then RxJS would be a good fit for that. But if you are looking to just do shared global data there are a lot of other simpler options for that, for example, recoil or jotai, would be good substitutes and would be a lot simpler. In fact, you could do the whole thing in custom hook/context combination since the entire tree needs to re-render on any state change anyway.
@ansonthai4709
@ansonthai4709 2 жыл бұрын
Hi Jack, fantastic video. Any chance you would be able share some ideas about how to incorporating a timer for fetching Pokémon data?
@mohamedkhamis8082
@mohamedkhamis8082 Жыл бұрын
you are the best to explain reactjs 😍, What if you add a global checkbox (select all) will it re-render the whole list if you checked it ?
@LahiruKurukulasuriya
@LahiruKurukulasuriya 2 жыл бұрын
awesome stuff
@shubhamlatiyan7972
@shubhamlatiyan7972 2 жыл бұрын
You are awesome Jack
@j0hannes5
@j0hannes5 2 жыл бұрын
I would love to see RxJs used in combination with React-Query. You could demonstrate an example combining and filtering content feeds from an API. Or using RSS feeds from news sites that update very frequently so we can observe changes in the resulting feed live.
@fr-ii7qs
@fr-ii7qs Жыл бұрын
You don't need react-query if you use rxjs. IMO react query is a lightweight version of rxjs + useState
@inarky5355
@inarky5355 7 ай бұрын
I can confirm this is a wildly powerful technique. I looked at useQuery and useMutation, they are just setting up subscribers that properly update react or force update. so i converted this logic into rxjs with subscriber.next etc, just replicating when react would update and trying to get same sequence of events. its amazing, i made it so that query options are passed in as stream, same with mutation observer. if the options change, the observer does not get thrown away, it is its own observable logic so i keep that around and just let it emit on changes. i can observe the state changes of a whole bunch of related API's and do derivations or side effects from them and its simplified logic like optimistic updating to be way easier. I set up an optimistic updating stream that uses scan to maintain an online reducer for all the api events that would change the entity being updated/read/created from a CRUD-api then you subscribe to that stream and there is your reduced state from side effects, no need for a global store or emitting event to represent the value somewhere else
@josephlarsen
@josephlarsen 2 жыл бұрын
video request :). If you were going to start a brand new "next cool billion $ website" what would the first few hours looks like of development? How would you setup the project that you're going to do real work on for the next several years? What things would you put where? How would you build the login and that first page?
@dwikurniawan1376
@dwikurniawan1376 2 жыл бұрын
I really enjoy the video
@anasaljawa858
@anasaljawa858 2 жыл бұрын
The title is so cool
@alishayk374
@alishayk374 Жыл бұрын
Thanks Jack, first time learning RxJS and this was the biggest help by far. One question, what do you think of the React-RxJS library vs Observable Hooks?
@jherr
@jherr Жыл бұрын
obersvable-hooks seems to be the current best of breed.
@alinawaz4034
@alinawaz4034 2 жыл бұрын
This is what i am waiting for Atlast.
@_anjianto
@_anjianto 2 жыл бұрын
Can we make a page with difference library or framework with or without module federation? Like React, Vue and Svelte combine to one page or also with Angular. Would be great video
@Middollo
@Middollo 5 ай бұрын
Thank you
@faradniftaly8893
@faradniftaly8893 2 жыл бұрын
Thanks a lot, this is an awesome tutorial. Is it possible to use rxjs and share data between two projects? Like in microfrontend based projects.
@jherr
@jherr 2 жыл бұрын
Yes, have a look at my freeCodeCamp tutorial where I do exactly that: kzbin.info/www/bejne/onyupJ2mfZVsmrc
@theyreMineralsMarie
@theyreMineralsMarie 2 жыл бұрын
Yes, yes, yes and YES. All our microservices at work use Spring Boot webflux which is built on the Reactor Project. I've been wanting to experiment with an RxJS conversion of our web apps and this video will hopefully fill in some of the gaps in my understanding.
@amitsinghrawat4760
@amitsinghrawat4760 2 жыл бұрын
Rxjs is a great reactive library and an example is Angular reactivity
@thatoneuser8600
@thatoneuser8600 2 жыл бұрын
How often do you personally use reactive programming with Rx*, at work and personal projects? I'm wondering if it's used all that much and whether I should avoid learning it, because it seems to have a huge learning curve
@jherr
@jherr 2 жыл бұрын
I am always looking to use reactive programming, but I don't often use Rx to do that. Most often I'm doing reactive React hooks using the basic hooks (useState, useReducer, useEffect, useMemo and useCallback) with the dependency arrays.
@user-gj3jv3pp2r
@user-gj3jv3pp2r Жыл бұрын
is there need to introduce react context if we're able to detect changes and share the state with rxjs only ?
@AntJB12345
@AntJB12345 2 жыл бұрын
Hey Jack, what VS extension did you use to convert the JSON to a TS interface?
@jherr
@jherr 2 жыл бұрын
marketplace.visualstudio.com/items?itemName=GregorBiswanger.json2ts
@akverma3141
@akverma3141 2 жыл бұрын
Hi Jack. This is a Great video! Can you share your thoughts on using Recoil with RxJS ?
@jherr
@jherr 2 жыл бұрын
Never tried that combo. What would be the point?
@hkhald01
@hkhald01 2 жыл бұрын
what vscode extension you are using ? that let the
@jherr
@jherr 2 жыл бұрын
GitHub Copilot.
@KuzyoYaroslav
@KuzyoYaroslav 2 жыл бұрын
Managing search state with Rxjs looks more complicated for me than with regular useState. Thanks for the video.
@jherr
@jherr 2 жыл бұрын
It is. And hooks does the reactive state management as well, if you get the hooks right. But if you need some global state (e.g. a shared shopping cart, or a count of pending chat messages), this is actually a pretty nice solve for that.
@KuzyoYaroslav
@KuzyoYaroslav 2 жыл бұрын
@@jherr What the name of theme shell you are using - with all the info about branch and node version ? Look cool.
@jherr
@jherr 2 жыл бұрын
@@KuzyoYaroslav Node is version 14. Theme is Night Wolf [dark] and Monolisa for the font. Not sure about what branch means in this case.
@mooder3247
@mooder3247 2 жыл бұрын
I would love to see more content about nextjs (protected routes , i18n) there is no much content about these topics especially the auth and protected routes most content talking about auth from nextjs api routes and i real world project no one uses them most practices are about using an external api and separate your front from your back
@isi1044
@isi1044 2 жыл бұрын
what was the magic done to convert json to typescript type?
@mridulmishra8166
@mridulmishra8166 2 жыл бұрын
You sir are a fire 🔥 ...
@mani8586
@mani8586 2 жыл бұрын
Hi Jack Can we have a video on Redux Saga with most possible combinations of methods available.😶 And any good example on Graphql would be also helpful
@ethanfung1413
@ethanfung1413 2 жыл бұрын
Having gone through this exercise my general sense is that RxJS is an event based state management system. From what I understand about React however, already is reactive in nature, and has its own state management system via React hooks. Is there any specific advantages that RxJS has over React hooks?
@jherr
@jherr 2 жыл бұрын
The RxJS subjects can be global. Which you can kind of do with context, but even then it's not global to non-React sources. But there are a bunch of different ways to do simple global reactive state (Recoil, Jotai, react-hooks-global-state, etc.)
@ethanfung1413
@ethanfung1413 2 жыл бұрын
@@jherr That's helpful to know, thanks for the response
@Sameer_Kumar
@Sameer_Kumar 2 жыл бұрын
Cooooooool. 🥇 Btw, usual question back again, Which font and theme ? 😅
@jherr
@jherr 2 жыл бұрын
It’s listed in the description. But it’s night wolf [black] and monalisa.
@Sameer_Kumar
@Sameer_Kumar 2 жыл бұрын
@@jherr anyways that was naive yet smart this biggest FAQ in description right away. Btw, have you done any mvc with nextjs video? 🤓
@jherr
@jherr 2 жыл бұрын
@@Sameer_Kumar Not yet, good idea tho.
@dorindumitrascuta4755
@dorindumitrascuta4755 2 жыл бұрын
Very nice tutorial. Are the code auto completions with suggested code part of the CoPilot beta?
@jherr
@jherr 2 жыл бұрын
Yep, Copilot.
@dorindumitrascuta4755
@dorindumitrascuta4755 2 жыл бұрын
@@jherr Awesome! Just applied to beta myself, hope to get accepted soon. It is a nice feature which at first I resisted, but seeing the potential for speeding up dev and making us more productive, I'd say, why not.
@dorindumitrascuta4755
@dorindumitrascuta4755 2 жыл бұрын
Ideas for new videos on the same theme: Redux-Observable with epics and marble testing. Wish you a great Sunday!
@jherr
@jherr 2 жыл бұрын
@@dorindumitrascuta4755 It's just a copilot. You are the one steering the ship. It's just helping out.
@sarangreenz5062
@sarangreenz5062 7 ай бұрын
Hi Jack, I have an application which is developed using (RTK + Redux Saga) I want to replace this with (Zustand and RxJs) is it feasible to implement side effect actions like we do it in Redux Saga?
@jherr
@jherr 7 ай бұрын
TBH, I don't really know enough about Sagas to answer that. Perhaps you should look into Jotai? Zustand + RxJS feels like a weird combo to me.
@scattyrot
@scattyrot 9 ай бұрын
what vs code extension use to convert from json to typescript interface
@michaelneumann3695
@michaelneumann3695 2 жыл бұрын
How does he do that hining that you just tab and you get everything? It it the github pilot?
@jherr
@jherr 2 жыл бұрын
Yep.
@user-bn2qt4ge9x
@user-bn2qt4ge9x 2 жыл бұрын
What difference between context and just directly import observable inside component file?
@jherr
@jherr 2 жыл бұрын
If you get it from context then potentially you could change which observable certain components look at based on that context.
@Zeestack
@Zeestack Жыл бұрын
how can we track changes within the object using rxjs
@juttameerhamza
@juttameerhamza 2 жыл бұрын
Please make video on React + ReactQuery + Redux how can we differentiate between client state and server state how manage them
@designcoded7585
@designcoded7585 2 жыл бұрын
next js + typescript video also focus on next js specific topic with typescript
@damianperez7736
@damianperez7736 2 жыл бұрын
Can you make a video about a react /next app implementing the "Twelve factor app", that's some real world app creation right there
@Fanaro
@Fanaro 10 ай бұрын
I wish the browser itself made reactive streams available as native objects.
@lucasr5995
@lucasr5995 2 жыл бұрын
Hi, what do you think about the Server components planned for react 18?
@jherr
@jherr 2 жыл бұрын
Thanks for reminding me. That looks really cool, technically speaking. But I'm super wary of SSR, having come from doing Walmart and Nike which were both big SSR shops. SSR, even in different forms, comes with headaches over SSG and CSR. I'll definitely look at it though.
@chris3079
@chris3079 2 жыл бұрын
@@jherr you worked for NIKE! Thats awesome, i spend so much time on stuff maybe you helped build then.
@jherr
@jherr 2 жыл бұрын
@@chris3079 Well, if you bought anything on nike.com then, yes. :)
@chris3079
@chris3079 2 жыл бұрын
@@jherr that even better, because the website is perfect, but the NRC app is little buggy lol
@jherr
@jherr 2 жыл бұрын
@@chris3079 No comment. :) (Actually, I really don't know since I left there a year ago.)
@codehan
@codehan 2 жыл бұрын
Please do a video on combining Redux-Toolkit with RxJS..! I've been developing in React for about two years, but before that I was working a lot with Angular - so I miss Observables a lot ^^
@jherr
@jherr 2 жыл бұрын
So... I'm not quite sure what that would look like. They are two different methodologies for state management and I'm not sure what the fusion would look like or how it would work. Could you elaborate a little?
@codehan
@codehan 2 жыл бұрын
​@@jherr ...actually, the Redux toolkit currently covers everything I need for my daily work. But after seeing this video and this package (redux-observable) regarding async actions, I'm wondering if they can't just be combined in a meaningful way that creates a clear benefit - which I can't imagine at the moment as well : )
@jherr
@jherr 2 жыл бұрын
@@codehan Yeah, if I was going to do observables I'd probably just do something like MobX or Valtio and then do everything through that. I'm not super keen on mixing state managers. Unless you consider React Hooks a state manager. :P
@gotcrazy101
@gotcrazy101 2 жыл бұрын
What color theme are you using for vscode?
@jherr
@jherr 2 жыл бұрын
Night Wolf [dark] and Monolisa (I've also started listing it in the description.)
@gotcrazy101
@gotcrazy101 2 жыл бұрын
@@jherr thanks alot!
@santhoshuploads
@santhoshuploads 2 жыл бұрын
Can you do a video on Symbols in Javascript
@robmcmahon3883
@robmcmahon3883 2 жыл бұрын
Is rxjs framework agnostic? Can I pub / sub using window between MFE’s?
@jherr
@jherr 2 жыл бұрын
Yup. Framework agnostic.
@robmcmahon3883
@robmcmahon3883 2 жыл бұрын
@@jherr thanks! Love the videos!
@jherr
@jherr 2 жыл бұрын
@@robmcmahon3883 Thanks!
@rucklerful
@rucklerful 2 жыл бұрын
So basicaly you just created SolidJs. I am curious if the render count is the same as Solid
@jherr
@jherr 2 жыл бұрын
Hahah, yeah, a React render count will only be as low as Solid if the app is not dynamic. :)
@JP12313
@JP12313 2 жыл бұрын
Hello, in your opinion what is the best global state system for graphql apps with graphql code generator?
@jherr
@jherr 2 жыл бұрын
Great question. There is GraphQL Code Generator (www.graphql-code-generator.com/) which looks pretty good, and there is also the Apollo code generator, which if you are doing the Apollo thing, would be my preferred first go-to. Personally I would start with Apollo and URQL and then see what "global" state they did not manage, and then figure out how to manage that remaining state. If it was something like identity and auth tokens I'd just use context. If it was something larger then I would use something like zustand or xstate.
@nepalcodetv6298
@nepalcodetv6298 2 жыл бұрын
@@jherr wow, no to redux-toolkit and redux-saga !?
@jherr
@jherr 2 жыл бұрын
@@nepalcodetv6298 That's just my take. :) The move to the Flux model was a push towards singleton state (i.e. "local state is evil"). Then hooks pushed us back the other way; "local state is ok/preferred." Now, IMHO, the trend is a combination of local state right where you need it, and a smaller set of shared globals. And in that world the big infrastructure of large scale global state management doesn't pay for itself. Why do I need something like Redux Toolkit, or Sagas, if all I'm sharing is user identity and the content of their shopping cart? (Just an example.) I can get by with something much smaller, e.g. valtio, zustand, recoil/jotai, shared state hooks, etc.
@santoshbokefode
@santoshbokefode 10 ай бұрын
React is not detecting the iPAD screen showing the iPhone screen effect not iPAD effect what you think about this Issue in React?
@jherr
@jherr 10 ай бұрын
I don't think it's a React issue. React doesn't have any device specific code.
@code.withdimpu
@code.withdimpu 11 ай бұрын
can we do like Redux with Rxjs, i can't find any tutorial in react native programming
@abubakar-emumba
@abubakar-emumba 2 жыл бұрын
please make a video on SWR and React-query
@mohammedsofienebarka6400
@mohammedsofienebarka6400 2 жыл бұрын
What extension are you using to show the predicted code? (intellisense?, please don't tell me copilot)
@jherr
@jherr 2 жыл бұрын
It is copilot. Sorry. :(
@mohammedsofienebarka6400
@mohammedsofienebarka6400 2 жыл бұрын
@@jherr what's the font tho it's pretty xD
@jherr
@jherr 2 жыл бұрын
@@mohammedsofienebarka6400 Monolisa
@mohammedsofienebarka6400
@mohammedsofienebarka6400 2 жыл бұрын
@@jherr thanks
@mohammedsofienebarka6400
@mohammedsofienebarka6400 2 жыл бұрын
@@jherr I mean theme, sorry..
@tevoj
@tevoj 2 жыл бұрын
Was that code complete the gh copilot in action?
@jherr
@jherr 2 жыл бұрын
Yuup
@tevoj
@tevoj 2 жыл бұрын
@@jherr Dang, that's amazing!!!
@jherr
@jherr 2 жыл бұрын
@@tevoj It's not going to replace you. It takes a good engineer to know when to take the advice as-is, or take the advice and tweak it, or just ignore the advice. But it is helpful. And sometimes... it's scary right.
@tevoj
@tevoj 2 жыл бұрын
@@jherr Yes, watching your video felt more like..you know when you stop typing to search smth in google ˜trying to remember the syntax˜ and basically the copilot gives you the hint. But for me at least it was super cool because inside my head when you were typing I was like: ok he's gonna complete this AND the copilot showed you exactly that!!! hahaha so cool, jeez!
@niwasikajhos
@niwasikajhos Жыл бұрын
Would love to see the use cases of OpenLayers and React.
@jherr
@jherr Жыл бұрын
What is OpenLayers?
@pommesmayo
@pommesmayo 2 жыл бұрын
Jack just did a speedrun at coding
@tolgask2812
@tolgask2812 2 жыл бұрын
why did you use useMemo instead of useCallback ?
@jherr
@jherr 2 жыл бұрын
Because we want memoize a value, which is the matching pokemon. useCallback is used to memoize a function.
@isi1044
@isi1044 2 жыл бұрын
Please what auto complete tool is being used?
@techhguy
@techhguy 2 жыл бұрын
It's Github Co-Pilot
@ismailulgac3132
@ismailulgac3132 Жыл бұрын
hello please color schema name in vscode??
@armanmkhitaryan16
@armanmkhitaryan16 Жыл бұрын
Dear Jack can you please make a video about tail-recursion? would be grateful
@jherr
@jherr Жыл бұрын
Is node even supporting tail recursion optimization? It did for a release or two as I recall but it got pulled out.
@armanmkhitaryan16
@armanmkhitaryan16 Жыл бұрын
@@jherr I'm afraid, I can't answer that))
@jherr
@jherr Жыл бұрын
@@armanmkhitaryan16 Just have a google around, it's actually pretty interesting. There are some environments that support it: kangax.github.io/compat-table/es6/ The issue appears to be that supporting it actually slows down none tail recursion code. So it's a chicken and egg problem, you have to get folks to write for tail recursion so the can us the feature but you have to do it while it's not supported, then enable, it, blah blah blah. Honestly, just another reason why JS is not a true FP language, and no FP language built on top of JS will be a true FP language.
@none0n
@none0n 2 жыл бұрын
How do you code so fast?
@jherr
@jherr 2 жыл бұрын
It is all scripted. When I'm researching and writing the code the first time it's not that fast. :)
@georgekalogeropoulos1813
@georgekalogeropoulos1813 2 жыл бұрын
Why not exports and use react context
@jherr
@jherr 2 жыл бұрын
Just wanted to provide some different options depending on how you want to use it.
@waqasrana5734
@waqasrana5734 Жыл бұрын
why we use rxjs in react
@isrocket
@isrocket 5 ай бұрын
Can we do PHP AND NEXTJS
@jherr
@jherr 5 ай бұрын
PHP and NextJS used together?
@VeereshPatel15
@VeereshPatel15 2 жыл бұрын
Bro please do latest (2021) crash course on 1.Angular 12 2- reactjs 3- nodejs- 4-- meanstack 5.mern stack 6-Real time project (product) development 7.Frontend development interview questions and answers
@jherr
@jherr 2 жыл бұрын
All in one video? :)
@VeereshPatel15
@VeereshPatel15 2 жыл бұрын
@@jherr no separately
@omarkarim9298
@omarkarim9298 2 жыл бұрын
@@jherr or in one tutorial series, showcasing typescript support across all platforms using an nx workspace!
@Henrique01010
@Henrique01010 Ай бұрын
I'm maintaining a large legacy codebase at my job with react and rxjs and my god the code stinks. Every single logic is deeply coupled and nested with those rxjs apis, I had no idea whats was going on. Watching this tutorial I could understand what most of the main functions do, its going to help me a lot. Thanks Jack! And if there is anyone considering mixing rxjs with react, just know that there are much better options for state management now days.
@jherr
@jherr Ай бұрын
Ouch. FWIW it’s a tough call on whether to pull this video or not, since on the one hand it’s helpful. On the other hand I don’t recommend RxJS for FE state management.
@LaLoses
@LaLoses 2 жыл бұрын
But at the end you ended up using RxJS with React, not React with RxJS, well only if you make global and local variables. I feel like is lost the purpose of using React and the philosophy of states IDK...
@jherr
@jherr 2 жыл бұрын
I'm not sure I understand the different between RxJS with React vs React with RxJS, is there something that covers the "philosophy of states" that I can look at? Basically this is doing what every state manager does with React. React components register listeners on the state, the state changes, that triggers the listeners, then listeners trigger a re-ender of the components. The state in this case just happens to be managed by RxJS.
@LaLoses
@LaLoses 2 жыл бұрын
@@jherr yeah, you are right. I think a little bit more and what happens is that is so common to almost always see the useState and useEffect hooks, so I felt that removing them is like removing a core functionality, but as you mentioned React is about re-rendering when there's changes. Also, I think a reason people like React is because all the logic is in one file and removing the logic part of the fetch requests makes it more abstract and harder to understand (that's for me 😅), but it looks cleanner and faster to read. Is the first time I see how is use RxJS with React, and I felt unsure if use this state manager or not, I guess only practicing it I would make a decision. 🙌
@tolgask2812
@tolgask2812 2 жыл бұрын
You have used {...spread}. You told us it is performance killer in another video. you should use p.power = ... return p;
@jherr
@jherr 2 жыл бұрын
It's not always a performance killer. It's fine in this case. As it is with a map. Because you are creating a new object for every object in the array. The problem with spread in a reduce context is when you use it to build new versions of continuously growing object or array.
@isi1044
@isi1044 2 жыл бұрын
That voice yo
@MrEnsiferum77
@MrEnsiferum77 2 жыл бұрын
Rxjs is the only thing Javascript ecosystem needs, nothing more....
@robins3379
@robins3379 2 жыл бұрын
Seriously, why the heck did they call map "map".
@thatoneuser8600
@thatoneuser8600 2 жыл бұрын
It maps an inputted value of type T to a value of type V. If you have an Employee class and you called .map(employee -> employee.getSalary()), it would transform each element using that function and create a new stream of just their salaries, which might be an integer type.
@alex_chugaev
@alex_chugaev 2 жыл бұрын
Without microfrontends... it's boring 😉
@thehaptiK
@thehaptiK 2 жыл бұрын
jack, grow your beard out!
@jherr
@jherr 2 жыл бұрын
Nah, shavin' that thing off today. Getting itchy.
@thegrumpydeveloper
@thegrumpydeveloper 10 ай бұрын
Rx js is great until you have to read it and understand it again in a year. Also good luck to the poor devs who inherit it. Lots of tools that manage things in a different way and would argue should only be used where absolutely nothing else does the job.
@eakzit3181
@eakzit3181 2 жыл бұрын
I still don't see the benefit
@isi1044
@isi1044 2 жыл бұрын
I remember when I used to think like this... the benefit of rxjs is that it is used to make complex tasks simple.
@MrKevinsylvester
@MrKevinsylvester Жыл бұрын
If you take it slow would be nice
RxJS Crash Course
58:14
Laith Academy
Рет қаралды 87 М.
Netflix JavaScript Talks - RxJS + Redux + React = Amazing!
37:14
Netflix Engineering
Рет қаралды 393 М.
бесит старшая сестра!? #роблокс #анимация #мем
00:58
КРУТОЙ ПАПА на
Рет қаралды 3,4 МЛН
Became invisible for one day!  #funny #wednesday #memes
00:25
Watch Me
Рет қаралды 32 МЛН
Making React Context FAST!
33:34
Jack Herrington
Рет қаралды 86 М.
You're Doing React Hooks Wrong, Probably
20:11
Jack Herrington
Рет қаралды 64 М.
No const! How NOT To Give A JavaScript Talk
10:28
Jack Herrington
Рет қаралды 60 М.
Разбор Tanstack Router - убийца React Router
28:08
PurpleSchool | Anton Larichev
Рет қаралды 8 М.
Mastering React Memo
26:56
Jack Herrington
Рет қаралды 132 М.
Common React Mistakes: useEffect - Part 1
19:57
Jack Herrington
Рет қаралды 45 М.
Объясняю RxJS
1:01:18
Архитектор ПО. Александр Желнин
Рет қаралды 31 М.
Blue Mobile 📲 Best For Long Audio Call 📞 💙
0:41
Tech Official
Рет қаралды 1 МЛН
Как слушать музыку с помощью чека?
0:36
Хотела заскамить на Айфон!😱📱(@gertieinar)
0:21
Взрывная История
Рет қаралды 4,9 МЛН
Неразрушаемый смартфон
1:00
Status
Рет қаралды 2,3 МЛН