php - How to build front-end multiple page website using ReactJS for a web-api service -

my original website developed in laravel framework, client wants separate back-end front-end in wants back-end work purely api based web-service.

so decided build sample blog api service using lumen micro framework, api has following features:- login, register, post blog, post comment

i tested api endoints using postman , working fine

i new concept of front-end frameworks decided take @ reactjs, while going through facebook documentation liked framework, not able understand using webpack + bundle + reactjs how can make multiple page front-end website api-service

plan host api-service on other server , host front-end website on other server

my question based on goal expectation reactjs correct? or should use angularjs or other front-end framework

front-end website have multiple pages, how decide react component render on particular page, apart apache need install anyother web-server make react work?

all tutorials came across seems serve 1 page application, using webpack react components merged 1 bundle.js file

but requirement have different pages login, register, posting blog, viewing blog post etc how achieve reactjs assuming reactjs fit such requirement if not please feel free suggest tech stack front-end framework can use api-service

here currect tech stack api-service linux lumen framework apache mysql

for time being front-end website tech stack linux apache reactjs(npm+webpack+bundle) there else required, missing?

this first time have been asked make use of front-end framework, feeling lost

please help!

---

i trying understand how make react router work, not able work properly.

the problem facing figure out how load page specific components based on page open, meaning how tell react load login component in login page , register component in register page?

react apps single web applications, can handle routing react-router.

for interaction api, there lot of pattern out there, simplest way fetch data inside componentdidmount hook of component.

lets api service returns list of posts under /api/posts, component like:

const postlist extends component {   constructor(props) {     super(props);     this.state = { posts: [] };   }    componentdidmount() {     fetch('/api/posts')       .then(response => response.json())       .then(data => { this.statestate({ posts: data }) });    }    render() {      return         (<ul>          {this.state.posts.map(post => <li key={post.id}>{post.title}</li>)}        </ul>)    } }