Existe algumas maneiras de solucionar isso amigo, vamos por partes.
Requisições
O ReactJS é apenas uma biblioteca para construção de interface, não te oferece, assim como frameworks maneiras de requisição nativa, você pode utilizar de outras bibliotecas como axios, ou até mesmo utilizar a api fetch presente no ES6, ou até mesmo do velho XMLHttpRequest.
Exemplo com axios:
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
axios.get(`https://jsonplaceholder.typicode.com/users`)
.then(res => {
const persons = res.data;
this.setState({ persons });
})
}
render() {
return (
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
)
}
}
Exemplo com fetch:
import React from 'react';
import axios from 'axios';
export default class PersonList extends React.Component {
state = {
persons: []
}
componentDidMount() {
fetch(`https://jsonplaceholder.typicode.com/users`)
.then((resp) => resp.json())
.then(function(data) {
const persons = res.data;
this.setState({ persons });
})
})
}
render() {
return (
<ul>
{ this.state.persons.map(person => <li>{person.name}</li>)}
</ul>
)
}
}
Fonte
Sessões
Formas de manter o usuário logado
Essa vai depender mais de sua arquitetura, hoje em dia há uma tendência maior para a utilização de JWT's (JSON Web Token), onde você armazena um token gerado em sua aplicação backend e os envia como cabeçalho em requisições para rotas que estão protegidas, (Basicamente um sistema de crachá WEB).
A armazenação desse token pode ser feita por meio da API WebStorage, sessionStorage
ou localStorage
.
Para manter a segurança é sempre importante dar uma olhada em como armazenar estes tokens de forma segura, implementando tokens de sincronização por exemplo, aconselho dar uma lida neste artigo https://auth0.com/docs/security/store-tokens e nesse https://medium.com/tableless/entendendo-tokens-jwt-json-web-token-413c6d1397f6.
Você pode variar o tipo de implementação com outras bibliotecas
, temos também a redux-react-session
, nesse caso vai depender do seu ambiente.
O reactjs é bem agnóstico desse tipo de coisa, você pode procurar e testar a melhor estratégia que se encaixe ao que você precise.