Duvidas sobre ReactJS Admin/User?

Muito obrigado, eu já fiz a proteção nas rotas! Coloquei um remove() em js, mas ao carregar a pagina ela aparece por alguns segundos, saberia como resolver?

Se ver código e como acontece complicado, é um problema local

não se usa em React tal linha de código document.getElementById, por isso o seu componente não persiste a informação … !!! entendeu agora.

Ou seja, fazendo errado.

Como faria para pegar este Id e remove-lo ? Pensei que poderia fazer igual o JS, pois ele remove mas tem demora 0.5s para remover.

Um exemplo:

Esse código aparece e esconde um Label, olha como faz:

class App extends React.Component {
  constructor(props) {
  	super(props);
    this.state = {
    	show: true,
      toogle: 'show'
    };
    this.toggleButton = this.toggleButton.bind(this);
  }
  toggleButton(){  	
    let {show, toogle} = this.state;
    show = !show;
    toogle = show ? 'block': 'none';    
  	this.setState({
    	show,
      toogle
    });
  }
  render() {
  	const {show, toogle} = this.state;
    const labelShow = toogle === 'none'
    	? 'Show'
      : 'Hide';
    return (
    	<div>
        <div style={{height: '20px'}}>
          <label style={{display: toogle}}>Show</label>
        </div>
        <div style={{height: '20px'}}>
          <button onClick={this.toggleButton}>{labelShow}</button>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

Isso tudo é feito em ReactJs, então na hora que carregar o NavBar precisa esconder o menu como se fosse esse button e label.

Da mesma forma ainda, existe um demora de milissegundos ao fazer reload.

Outro jeito de fazer é assim:

const {show} = this.state;

return (
    { show &&
        <label>Show</label>
    }
)

O código acima verifica se show returna true ou false, se for true, a label é renderizada no DOM.

Possivelmente o seu render esta sendo executado por inteiro, fazendo com que tenha esse delay.
Caso esse seja o problema, experimente fazer o seu componente herdar de Pure Component

Ex:

class App extends React.PureComponent {

Então não precisa do toogle! é outra forma também, mas, fica complicado em saber se na tela dele só tem isso, porque, se tiver um componente isso é viável, mas, se tiver outros não é!

Opa, esqueci de remover

Corrigido

Mesmo assim, ainda tem o delay.

Sim, só tem um componente.

Tem como você postar o seu código no jsfiddle? se não está usando algo errado também ai.

Ai está, https://jsfiddle.net/dfzso2eq/ .

A forma como foi citada:

class App extends React.Component {
  constructor(props) {
  	super(props);
    this.state = {
    	show: true
    };
    this.toggleButton = this.toggleButton.bind(this);
  }
  toggleButton(){  	
    let { show } = this.state;
    show = !show;    
  	this.setState({show});
  }
  render() {
  	const { show } = this.state;
    const labelShow = show ? 'hide': 'show';
    return (
    	<div>
        <div style={{height: '20px'}}>
          { show && (<label>Show</label>) }
        </div>
        <div style={{height: '20px'}}>
          <button onClick={this.toggleButton}>{labelShow}</button>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<App />, document.querySelector("#app"))

Aqueles setInterval??? é ali o problema! ele fica em a cada 2 segundos fazendo a operação… não ta errado?

Mas ele renderiza o verificaAdmin() e depois os setInterval. Mesmo excluindo ele aplica um delay perceptível.

Talvez tem mais coisas além desse código.

Note

Eu já achei vários problemas, será que um revisão (não precisa ser só no carro) o seu código precise passar?

Não tenho muito conhecimento em ReactJS, por isso existe alguns erros pois fiz baseados em alguns tutoriais em inglês e português. Teria alguma dica que eu possa melhorar o código?

Eu não sei do seu código mas é assim mesmo o início. Tem bastante vídeos vai no Youtube e estude por lá.

Sobre seu código tinha que ver tudo só trechos fica complicado e também o projeto todo fica complicado ver.