I want to save a simple boolean + userID if a user is authenticated and have it accessible via React Context API.
Many guides wrapped their root compoennt with the context Provider. To me it seems wastefull to wrap the whole app. On the other hand I need this information to be available in all my main pages.
Does it have any negative consequenses to wrap your whole app with a React Context Provider?
Example:
class App extends Component {
render() {
return (
<MyProvider>
<div className="App">
<h1 className="App-title">Welcome to my web store</h1>
<ProductList />
</div>
</MyProvider>
);
}
}
I used this guide as a reference.
I do not have any experiences in React Redux so this might just natural to everyone who has used this framework before.
Researching Google brings up many guides on how to implement React Context or use HOC but the 15 I clicked did not answer my question.
#Fyodor pointed it out in his comment:
You can wrap whole app in provider. React-redux recommends the same
(react-redux.js.org/introduction/…), so you may consider it acceptable
practice
Related
I'm having an issue with my adsense ad inside my react component, it will almost always display the same ad on route change. I suspect this is because Google sees the route as an empty page and so would not serve personalized ads.
What I currently have is very simple. I have the google script on my index.html
and then my ad component which I'm calling under my App component.
import React from 'react';
export default class Ad extends React.Component {
componentDidMount () {
(window.adsbygoogle = window.adsbygoogle || []).push({});
}
render () {
return (
<div className='ad'>
<ins className='adsbygoogle'
style={{ display: 'block' }}
data-ad-client='ca-pub-4543556906953539'
data-ad-slot='3566322911'
data-ad-format='auto'
data-full-width-responsive="true"
/>
</div>
);
}
}
I was reading this thread and the answer was use googletags to manage served ads:
Using google adsense with React + React Router
However I found the answer vague maybe because I have never used google tag manager nor ads manager before. Does anyone have more information on this?
I am trying to make all React Components' data to be available through Redux. I need it so that any component can easily modify / interact with other component.
But I don't know how to inform Redux about the fact that React Component was mounted / unmounted, because the component itself has no info about its place in the React tree. Let's say that we have a list of three React Components in our main App.js:
<div>
<ClickCounter />
<ClickCounter />
<ClickCounter />
</div>
ClickCounter is implemented here:
import React from 'react'
function ClickCounter() {
const clicks = useSelector(state => state.UI.ClickCounter[/* What is my id?*/].clicks)
return (
<div>
</div>
)
}
export default ClickCounter
This lonely ClickCounter function does not know whether it was called by the first, second or third <ClickCounter />. No info about the React tree from the component level - no synchronizing with Redux.
I stuck and don't know how to implement it. Thanks for your time in advance!
I thought this would be simple, and the answer probably is and I'm just missing something, but I'm having trouble with updating a header/layout component based on what page I'm on.
Code wise, I have just installed the ASP.NET Core 2.0 template that uses React with Redux. I'm familiar with React, but TypeScript and Redux is new to me so it's hopefully a syntax/layout issue I'm having, as I can do this in a standalone React project. If you create a new project in Visual Studio following this template, you'll see the code that I'm trying to modify (New > Project > ASP.NET Core Web Application > React.js and Redux).
The TypeScript Layout file (ClientApp/components/Layout.tsx) is where I want to put essentially:
<h1>{ this.state.title }</h1>
...and further on from this use a Header tag to load a Header component that holds the title.
I want to then change the title based on whether I am on the Home, FetchData, or Counter page, which I imagine is just a basic string set on each component file.
If you can't open the project file for whatever reason, here is the layout I'm working with:
Layout component (should set the title here)
import * as React from 'react';
import { NavMenu } from './NavMenu';
export interface HeaderState {
title: string;
}
export class Layout extends React.Component<{}, {}> {
public render() {
return <div className='container-fluid'>
// !!!!---> Create a <Header /> component that includes the page title, set on a page by page basis
<div className='row'>
<div className='col-sm-3'>
<NavMenu />
</div>
<div className='col-sm-9'>
{ this.props.children }
</div>
</div>
</div>;
}
}
I would potentially include more component code for those who can't use the Visual Studio project, but it's pretty bloated with a lot of code that doesn't apply here. I just thought someone could help without needing it, but happy to provide if necessary!
Any help or pointers in the right direction are greatly appreciated! Apologies if this question and answer is somewhere. I have Googled and searched SO but no luck.
I have a React+Django app which is a custom video player, and I'm currently working on a related videos / queue at the end of the video. I have it working, if I use a simple window.location.replace with the link to the next video. However, it would be a lot smoother to only reload the video player.
From the many many threads I've read on SO, it seems that this it is possible to re-route my "main" component within a child component in React, but none of the methods have worked for me and I have a slightly different case than everything I've read. If the video playing depends on my URL (or Route), is it even still possible to reload without re-rendering the entire page?
Here's a barebones version of the relevant code:
Index.js:
class Welcome extends React.Component {
render() {
return (
<BrowserRouter>
<App/>
</BrowserRouter>
)
}
}
const element = <Welcome/>;
ReactDOM.render(
element,
document.getElementById('container')
);
App.js:
class App extends React.Component {
render() {
return (
<Row id="app-container" className="h-100 justify-content-center align-items-center">
<Switch>
<Route path='/app/:number' component={Player}/>
</Switch>
</Row>
)
}
}
export default App
Queue.js, Note: this is obviously just the part I'm having trouble with. I have clickable imgs to do the window.location.replace method.
<div>
<Link to='app/1' replace>
Previous Video
</Link>
<div>
The Link actually does change the URL in the way I want, but doesn't reload the App. I've spent a long time trying to implement solutions to this problem from other SO posts, but I'm worried that once I get it, it will end up forcing the whole page to reload anyway. Can anyone tell me if it's possible to JUST re-reroute my app? It's alright if the URL doesn't change, as long as the app is based on the new route.
Thanks in advance
I have just started learning react and Meteor. I am using the okgrow:accounts-ui-react to show a login and signup form on my site. You only have to add the component to show the signup/login form on your page. However, the dropdown form is ugly and does not go well with my site's design. Therefore, I want to learn how can you modify the styles of such meteor components. In this case, how can you change the style of this component to appear as a materially design form. I am using materialize.css and I want to know how can I give this login component a materialize design inspired look? I want to make the dropdown inspired by material design and also change the contents of the form. The following is my component that I created by following a video on leveluptuts.
import React, {Component} from 'react';
import { LoginButtons } from 'meteor/okgrow:accounts-ui-react';
class App extends Component{
render(){
return (
<div>
<header>
<h1>Level Up Voting </h1>
<LoginButtons/>
</header>
</div>
);
}
}
The following image shows how my login button appears on screen: