[EPIC] Integrate dummy react component inside the webpage

[ferreiro]

Once we have the react app set up, we need to start adding our first components to it. Also, we need to hydrate those components with data from the backend. In order to achieve this we have to do updates to the template views to pass data.

Acceptance criteria

• Create 2 react components BlogPostsList and BlogPostsListItem/or BlogPostCard. The BlogPostsList will receive as one of the props the blogPosts.
• Hydrating those react components using data from the backend (https://medium.com/@baphemot/understanding-reactjs-data-hydration-initialization-bacbb790c7cb)
  Since we're using Jade/Pug for the templates, we can inject with JavaScript the SERVER_DATA inside the window object.

  script.
        window.__SERVER_DATA__ = {
              blogPosts: [] // another data structure could be: { blog: { posts: [] }}
        } 

• Hydrate BlogPostsList Component getting the data from the server using window.SERVER_DATA

  const props = window.__SERVER_DATA__ || {};
  ReactDOM.render(<BlogPostsList {...props} />, document.getElementById('root'));
  

[ferreiro]

@kwelch From the article you shared about hydrating components (https://medium.com/@baphemot/understanding-reactjs-data-hydration-initialization-bacbb790c7cb)

I like the approach A and B. I like the idea of passing data using the window.object because the data is already passed to the jade template and I only need to attach it to the window object.

It looks to me that Approach B makes harder to understand how are we hydrating a component and where that data comes from. That's something that approach A fixes by making explicit how are we fetching data for the component itself. The only con for approach A that I see now is that we don't have an endpoint in the backend to fetch the list of posts (since this is coupled in the web server): https://github.com/ferreiro/website/blob/master/api/v1/blog/blog.routes.js#L1

Q: Which approach do you think is better for our use case?
Q2: Do both approaches work for the server side rendering? I think (hope) so! => Do you think there is one approach better than the other?

Also, do we want to have for this story tests for the components? If so, I guess I'll need to add some dependencies for jest or another test runner.

[ferreiro]

In terms of speed Approach B is faster right now (less work) so I'm happy to move with it. But I'd like to understand better the tradeoffs.

[kwelch]

I think option B is less and matches our internal process so I can help understand internal workings as well.

Setting up jest is easy. Just install and add a script. We can do this together if you want.

I think B is closer to what we will need for server side.

To hydrate, you would just convert the window object to the app via props in index.js.

We separate index and app.js internally to allow for easy server side vs client side rendering. I would look that over to try and understand how we will hydrate.

[ferreiro]

@kwelch thanks for the comments! I started by creating a react app inside the current project. Here is the diff: #40

[ferreiro]

Just removed the acceptance test of creating the react app. That story is now #47

[ferreiro]

This task is blocked by #47. We need first to have the react integration before moving forward adding components.