View Post.js.diff
-import React from 'react';
+import React, { createElement } from 'react';
import { createClient } from 'contentful';
import Helmet from 'react-helmet';
+import marksy from 'marksy';
+
+// Markdown helper function
+const getMarkup = field => {
+ if (!field) return null;
+ const compile = marksy({
View Post.js.diff
import React from 'react';
import { createClient } from 'contentful';
+import Helmet from 'react-helmet';
return (
<React.Fragment>
+ <Helmet title={this.state.data.title} />
<h1>{this.state.data.title}</h1>
{this.state.data.content}
</React.Fragment>
View Post.js.diff
render() {
- console.log(this.state.data);
- return <p>Post</p>;
+ if (!this.state.data) return null;
+
+ return (
+ <React.Fragment>
+ <h1>{this.state.data.title}</h1>
+ {this.state.data.content}
+ </React.Fragment>
View Post.js
import React from 'react';
import { createClient } from 'contentful';
class Post extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
View App.js.diff
<h1 className="App-title">Welcome to React</h1>
- <Link to="/">Home</Link> <Link to="/post/">Post</Link>
</header>
<Switch>
<Route exact path="/" component={Home} />
- <Route path="/post/" component={Post} />
+ <Route path="/post/:id" component={Post} />
</Switch>
</div>
</BrowserRouter>
View Home.js.diff
import React from 'react';
+import { Link } from 'react-router-dom';
import { createClient } from 'contentful';
class Home extends React.Component {
return this.state.posts.map(post => {
console.log(post);
- return <p>Post</p>;
+ return (
View Home.js
import React from 'react';
import { createClient } from 'contentful';
class Home extends React.Component {
state = {
posts: []
};
componentWillMount() {
const client = createClient({
View Home.js.diff
import React from 'react';
+import { createClient } from 'contentful';
class Home extends React.Component {
+ state = {
+ posts: []
+ };
+
+ componentWillMount() {
+ const client = createClient({
View index.js.diff
import React from 'react';
-import ReactDOM from 'react-dom';
+import { hydrate, render } from 'react-dom';
import './index.css';
import App from './App';
-import registerServiceWorker from './registerServiceWorker';
-ReactDOM.render(<App />, document.getElementById('root'));
-registerServiceWorker();
+const rootElement = document.getElementById('root');
View package-json-react-snap.diff
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
+ "postbuild": "react-snap",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}