fpersico

{
  "name": "drupal-reactivated-frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "react-scripts": "1.0.17",
    "superagent": "^3.5.2",
    "superagent-jsonapify": "^1.4.5"

fpersico

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

import 'bootstrap/dist/css/bootstrap.css';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

fpersico

import React, { Component } from 'react';

import { BrowserRouter, Switch, Route } from 'react-router-dom';

import Header from './components/Header';
import HomeScreen from './screens/HomeScreen';
import ArticleScreen from './screens/ArticleScreen';

class App extends Component {
  render() {

fpersico

import React, { Component } from 'react';

import { withRouter, Link } from 'react-router-dom';

import { Container, Nav, NavItem, NavLink } from 'reactstrap';

import './Header.css';

class Header extends Component {
  render() {

fpersico

import React, { Component } from 'react';

import { Container, Row, Col } from 'reactstrap';

import { fetchArticles } from '../api';
import ArticleList from '../components/ArticleList';
import SimplePager from '../components/SimplePager';

class HomeScreen extends Component {
  constructor(props) {

fpersico

import superagent from 'superagent';
import superagentJsonapify from 'superagent-jsonapify';

superagentJsonapify(superagent);

const BASE_URL = 'http://drupal.docker.localhost:8000';
const CONSUMER_ID = 'fd49afa9-81ef-4550-927c-9c7e5da995b7';
const PAGE_SIZE = 10;

export const fetchArticles = page => {

fpersico

{
  "type": null,
  "id": "6c50cb76-fcd1-4e71-b987-2de6d4cdcbc4",
  "attributes": {
    "nid": 34,
    "uuid": "6c50cb76-fcd1-4e71-b987-2de6d4cdcbc4",
    "vid": 34,
    "langcode": "en",
    "status": true,
    "title": "Quidem",

fpersico

// Simple component that render an Article

import React, { Component } from 'react';

import { Link } from 'react-router-dom';

import moment from 'moment';
import truncate from 'html-truncate';

import './Article.css';

fpersico

import React, { Component } from 'react';

import { Container } from 'reactstrap';

import { fetchArticle } from '../api';
import ArticleFull from '../components/ArticleFull';

class ArticleScreen extends Component {
  constructor(props) {
    super(props);

fpersico

{
	"data": {
    ...
		"relationships": {
      ...
			"field_image": {
				"data": {
					"type": "file--file",
					"id": "ff50dc33-175e-4b19-ab2a-82220fa7f022",
					"meta": {