I'm after some design advice. I'm building out a React/Redux app that will, amongst other things, play Youtube videos in a modal dialog.
My initial design was to use lifecycle hooks to initialise the Youtube iframe API in the modal's componentDidMount. The problem with this approach is that the startup cost for the Youtube player is high - there's a noticeable delay between opening the modal, and the player popping in with the video.
What I need to do is initialise the player just once, and then cue up a different video based on which props are sent to the modal. However, I can't think of a nice, idiomatic design for this model.
Ideas I've had so far:
Hack around with the modal so that it never unmounts, but just hides based on some prop value.
This is the design I had with a previous non-React version of this app, but it feels very hacky, and I'd like to come up with something better.
Initialise the youtube player when the app loads, and hold the element in the store, passing it down to the modal via props to be rendered.
This is recommended against in the Redux FAQ
Initialise the youtube player at some higher level of the app which is always mounted, but hide it with CSS. On mounting the modal, move the element inside, and move it out again just before unmounting.
This is probably my favourite idea so far, it just feels like there might be a better idea out there.
Any thoughts on how to design this would be much appreciated!
There is a similar approach to what you described as the last option (preferred one).
It is called portal as far as I can remember.
The basic method is: You make manipulation with element outside of your component in componentDidMount (eg. show) and componentWillUnmount (eg. hide).
One of the powers of React is it's lifecycle methods. You can create components even without .render() method
Examples can be found here
https://github.com/tajo/react-portal
and here
https://github.com/FormidableLabs/react-music
And there is a great talk about this at React Conf, which completely changed my mind about lifecycle methods.
https://youtu.be/395ou6k6C6k
Related
So... I have a simple app that makes a note. Like MacOS Memo app.
I have "add card" button and list of "memo"s.
I can swipe memos to reveal card options like delete, archive etc..
Whenever I click "add card", I want all of the states of memos to reset.(such as swipe opened state back to false).
But problem is that "add card" and each memo card is all different component and have no access to each other. How am I supposed to let the memo component know that "add card" button has been clicked?
I am new to React, and I almost feel like React is not built for such action.
You have two main options here, useContext and redux. If you don't have any complex logic and don't need a global state that should be shared across your whole app, go with useContext, otherwise you should use redux who is more complex to implement.
The main goal of useContext is to avoid prop drilling, the kind of situation where you pass props between many components. So you wrap all the components that should access the state with a context provider and can get this state from any component who is wrapped by the provider, please read the docs to learn more about the useContext.
Another option is redux, who is much more complex and probably you will need at least one week to understand and apply the concepts, so i suggest to just use redux when you have an app with complex state logic that really need a better global state management. Anyway, knowledge is always welcome, so read the redux docs and also watch this video about redux.
I am building my first React app and I would like to build a rotating / scrolling Navbar Component. A couple of websites with examples of what I'm trying to build are Fandex (the better example) and also Numberfire (although Numberfire's doesn't scroll automatically.
Is there a Javascript library for building a moving Navbar in React?
Thanks!
First of all you need to be a familiar with the React.Component methods. The general is componentWillMount - he gives you the control over the manipulation of any event on the page just after it will be loaded. See: https://reactjs.org/docs/react-component.html#componentwillmount .
For animation rotating you can you the React library - React-Transition-Group (See: https://github.com/reactjs/react-transition-group), that gives you the full control about state changing with css effects wich you want to see on the page.
What about manual scrolling - you need to write the simple onmousedown/onmousemove events with some logic implementation to make it work and after bind it to the component constructor. How the events work in the React - see this manual https://reactjs.org/docs/handling-events.html
To make the full realization wich you want, stackoverflow is a not a lucky place for such huge work, sorry )
So I had a design pattern question I guess for React SPA's (single page application). Right now, we're using redux state to track which "page" the user is on. Depending on that page, we're rendering different html/css using conditionals (switch/ifelse).
I feel like it's a waste to create new components for something that isn't changing that much and while the variance in html/css per component varies ... I'm wondering if theres a better or "right" way to do this?
edit: After speaking with a fellow engineer, I think it makes sense to just conditionally render separate components. Although the abstraction to me seems kind of overkill it will probably be more maintainable in the long run.
You can use react-router and react-router-redux.
https://github.com/ReactTraining/react-router
https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux
It can be connected with React and Redux. It offers an action creator (push) so you can dispatch router-like actions.
I am new to React so please excuse me if this is a noob question but I really could not find the answer in the DOCs or elsewhere.
Let's say I have two buttons with a counter that share the state but are far away from each other in terms of the placement in the UI.
The documentation says the common owner component for both buttons should own the state. It makes sense if the components are next to each other like in the example but what if my buttons are each part of a different UI group and are far away in terms of nesting? My state holder would be the root of the document and I would have to pass a handler function down through many layers. And what if I need to add new component somewhere else that also needs to know the state? Would I have to modify all the parent components in the way to pass the state down? That is tremendously impractical.
Without React I would have some global Subscribe/Publish pattern like jQuery Observer and all UI elements could subscribe/publish to it regardless of their nesting position.
How does React solve this?
Related question: If I need to load/save the state to DB, how do I pass a reference of the controller (or Whatever) to each React component that stores the state?
1 for global state you may use REDUX
Redux is a predictable state container for JavaScript apps
for connect/subscribe component with that state ,you should use react-redux
If components are far away in terms of nesting, you may connect/subscribe them to redux store, and take only neccessary part of state. They will update if only neccessary part is changed.
article that explains how you can do your case
to learn how to use redux you can watch this videos from creator of redux (Dan Abramov)
1.getting-started-with-redux
2.building-react-applications-with-idiomatic-redux
3.I definitely recommend to you discordapp rectiflux channel. because you allways can ask any question online.(there you can find contributors of that tools)
2 alternative way that less verbose then redux is MobX
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). The philosophy behind MobX is very simple:
Anything that can be derived from the application state, should be derived. Automatically.
I suggest to look at the Flux stores. In short, stores are like model in your application. You can listen to change (subscribe) and also modify their properties (publish). You can see how it was done in example app.
A better option is to go with Redux.
Redux is enabling use cases like yours in a way simpler fashion :)
It will help you with all the state and make your life much easier.
Some good resources for learning:
The Redux Website
Video courses from Dan Abramov, the creator [Free]
Awesome course on Udemy [Not free]
Building Applications with React and Redux in ES6
And finally take a look at this youtube series [Free]
Managing state in the middle layers of your app should be avoided where possible. This data belongs in a store, which holds the global state of the app. Then each component accesses the state via its props.
The naïve approach to get the data down to the component is to pass the store through all the layers of your app "manually", i.e. through props.
Smarter alternatives exist, which use connected components, that access the global state through the context (as opposed to the props). Typically, the presentational component (your button component) is wrapped in a container component that handles this connection to the store, then passes the data in via props.
There are numerous frameworks that facilitate this process, links to which are already provided in the other answers.
If you are trying to share simple states, try this ( I am the author): react-provide-state
Otherwise I will recommend Redux. It has become the most popular tool for managing application states.
In the applications being working on, we use Redux to manage the main application states and almost all other states. But we use 'react-provide-state' for simple, UI only states like Modal, Checkbox states.
I'm facing some issues when rendering a React component into the shadow DOM of a webcomponent.
I wrote a small piece of code to turn a React component into a webcomponent, but I want to render the
React component inside the shadow DOM of the webcomponent. But in that case, it seems that React is not able to catch UI events (click, keyPress, etc ...) anymore.
Let's take an example, let say that I have a first webcomponent <awesome-timer /> that render the React component inside the webcomponent node, and another webcomponent <less-awesome-timer /> that render the React component inside the shadow DOM of the webcomponent.
Both webcomponents use the same React component. However the one rendered inside the shadow DOM does not work, because click events on the button of the timer component does not trigger the bound function.
I guess React is not designed to handle such case, but I'd love to get more details about it.
The code of the example is available here : https://gist.github.com/mathieuancelin/cca14d31184bf4468bc1
Does anyone have an idea about it ?
I know this is kinda late but, I believe your issue when you pass any attributes to a web component they instantly become strings Because that's all you can pass to a web component. Now of course you can convert or cast them back to there original data type, except functions because once stringified they loose there scoping, lexical and all.
Now to your main question, you are were trying to pass you child element through the Main web components slot. Now you have to remember that once you pass anything to a web component you now have to use the webs components methods and return types to manage whatever you pass. So yes passing react into a web component will not work they you expect.
You will need to go back to whatever tool you use to build your web component and deal with the slot logic there. Since this is a very old post as are web components. You might not have had access to the modern web component build tool's we have today. I found Stenicl allows you to build and manage your web components in Typescript.
A good option is to change your pattern a little bit and just return web components from your react app.
Or you can use another really cool to call Lit-HTML or Lit-element. I believe they may have combined there core libraries. Anyway these tool will allow you to combine Reactjs and web components where lit-html gives you access to methods simial to Reactjs's life cycle methods. Anyway some good stuff to check out if your stuck at this point.