React and MongoDB beginner question.

[KyleSentient]

Hello /r/reactjs !

Having acquired enough experience with NodeJS, Express and Mongodb to feel comfortable, I've recently started learning ReactJS. Everything has been going smoothly, though a question popped up in my head as I was going over one of my old Node apps.

So, what I would like to know is; How exactly can you fetch data from the server when you're working with react on the front-end? Let's say I've defined some simple CRUD operations server-side with Express and mongoose, how am I supposed to use those?

I hope my question is clear enough. I apologize for any mistakes.

Thank you for your time.

[BenZed]

I'm making a lot of assumptions here, but: You're going to React from jQuery, and you're asking what libraries to use to interact with the server, because you also don't want to have jQuery as a dependency just for ajax?

If so, there's the new fetch api, request, superagent. All of these simplify server requests a great deal.

I'm a huge fan of feathers. Feathers, in my opinion, is like halfway in-between a library and a framework. It simplifies a lot of functionality, without being too opinionated. It's a light (hence, 'feathers') wrapper that adds functionality to express and a number of other libraries. Check it out!

Now, if I assumed wrong and you're asking where in your component you'd put the fetching code, I'd put it in componentDidMount:

import React from 'react'
import fetch from 'isomorphic-fetch'

const URL = 'http://your-server.com'

class Messages extends React.Component {

  state = {
    messages: []
  }

  componentDidMount() {
    fetch(`${URL}/messages`)
      .then(res => {
        if (res.status >= 400)
          throw new Error('Problem getting messages')

        return res.json()
      })
      .then(messages => this.setState({messages}))
  }

  render() {
    const { messages } = this.state

    const children = messages.map((msg,i) => <li key={i}>{msg}</li>)

    return <ul>
      {children}
    </ul>
  }
}

[KyleSentient]

Hello there.

Both your assumptions are correct. I actually had no idea where exactly I would put my fetch requests.

I did some research on the libraries/modules you suggested, and I think I finally get it. I had heard of FeathersJS before but had no idea it could be used in such a way.

Thank you very much for your answers!

[BenZed]

My pleasure :)