Facebook API Question posted in
The official documentation for the Facebook APIs can be found here.

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

My original website was developed in Laravel Framework, but now the client wants to separate back-end from front-end as in he wants back-end to work purely like an api based web-service.

So I decided to build a sample Blog Api Service using Lumen Micro Framework, this api has following features:-
Login, Register, Post Blog, Post Comment

I tested the api endoints using Postman and everything is working fine

I am new to the concept of Front-end frameworks so decided to take a look at ReactJS, while going through Facebook documentation I really liked this Framework, but now I am not able to understand using webpack + bundle + reactjs how can I make a multiple page front-end website for my api-service

Plan is to host api-service on some other server and host front-end website on some other server

My question is based on my goal is my expectation with ReactJS correct? or should I use AngularJS or some other front-end framework

Front-end website will have multiple pages, so how do I decide which react component to render on a particular page, apart from Apache do I need to install anyother web-server to make React work?

All the tutorials I came across seems to serve only 1 page application, where using webpack all the react components are merged into 1 bundle.js file

But my requirement is to have different pages for Login, Register, Posting a Blog, Viewing a Blog post etc so how do I achieve this with ReactJS assuming reactjs is good fit for such a requirement if not then please feel free to suggest some tech stack with front-end framework that I can use for my api-service

Here is my currect tech stack for api-service
Linux
Lumen Framework
Apache
MySQL

For the time being my front-end website tech stack is
Linux
Apache
ReactJS(npm+webpack+bundle)
is there anything else required, is something missing?

This is the first time I have been asked to make use of a front-end framework, so feeling completely lost

Please help!

I am trying to understand how to make React Router work, but not able to get it to work properly.

The only problem I am facing is to figure out how to load page specific components based on the page open, meaning how do I tell React to load login component in login page and register component in register page?

Tags:

4

Answers


  1. Chosen as BEST ANSWER
    0

    Special thanks to Ha Ja and archae0pteryx for guiding me in the right direction

    I am providing the solution steps that worked for me based on suggestions received from above mentioned 2 programmers

    First things first make sure your apache server is re-routing all the requests to your index.html file i.e. your main html file

    Now just implement ReactJS's react-router, react-router will only work if you configure your web-server to re-route all the request to a single file in this case index.html

    Here is my apache/htaccess config

    RewriteEngine On
# Redirect Trailing Slashes If Not A Folder...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)/$ /$1 [L,R=301]

# Handle Front Controller...
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^ index.html [L]

    This config will make sure no matter what url you are trying to access, it will always get handle by index.html file, this is the file where you need to integrate your React code, once the react-router code gets called it will render the correct page based on the url entered

    To some this solution might seem obvious but it took me time to figure this simple thing out so thought best to mention it so that no one else end up wasting his/her time

    Hope this answer helps you, happy coding!!!


  2. 0

    React apps are single web applications, but you can handle routing with react-router.

    For the interaction with your api, there are lot of pattern out there, but simplest way is to fetch you data inside the componentDidMount hook of any component.

    Lets say your api service returns a list of posts under /api/posts, then your component would look 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>) 
  }
}
    Login or Signup to reply.
  3. 0

    React falls well within your expectations. You can do all you’re after and more.

    If you haven’t already seen create-react-app then use that to scaffold your project as it will configure webpack with best practices and all the features you need.

    As far as using your separate API server, you’ll need to use fetch or axios to make the calls from your client side react app – (no prob).

    To your router question…
    Here’s a simple react-router example

    import {
  BrowserRouter as Router,
  Route,
  Link
} from react-router-dom

class App extends React.Component {
  render() {
    return (
      <Router>
        <div>
          <nav>
            <ul>
             <Link to='/'><li>Home Link</li></Link>
              <Link to='/somepage'><li>Some Link</li></Link>
            </ul>
          </nav>
          <div>
            <Route path='/' component={HomeComponent}/>
            <Route path='/somepage' component={SomeComponent}/>
          </div>
        <div>
      <Router>
    )
  }
}

    You basically wrap your entire app in either BrowserRouter or HashRouter (see docs to learn the differences). The component gets rendered via the <Route> higher order component and basically swaps out the component depending on the url.

    One important thing to note about the <Router> component. It Must render a single child node. In this example I wrapped in a div.

    Login or Signup to reply.
  4. 0

    I would highly recommend you to try Next.js, it’s the best ReactJS framework I’ve seen by far. It comes with server side rendering and routing out of the box.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search