Skip to content

Instantly share code, notes, and snippets.

View astrotim's full-sized avatar

Tim Holt astrotim

View GitHub Profile
@astrotim
astrotim / Post.js.diff
Last active December 29, 2017 01:48
added Markdown support to Post.js
-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({
@astrotim
astrotim / Post.js.diff
Last active December 29, 2017 11:21
added page title with react-helmet
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>
@astrotim
astrotim / Post.js.diff
Last active December 29, 2017 11:20
update Post.js to render content
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>
@astrotim
astrotim / Post.js
Created December 29, 2017 00:56
retrieve entry data per post id
import React from 'react';
import { createClient } from 'contentful';
class Post extends React.Component {
constructor(props) {
super(props);
this.state = {
data: null
};
@astrotim
astrotim / App.js.diff
Created December 29, 2017 00:39
updated Post route in App.js
<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>
@astrotim
astrotim / Home.js.diff
Last active December 29, 2017 11:16
added React Router's Link
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 (
@astrotim
astrotim / Home.js
Last active December 29, 2017 00:25
updated with Contentful API call
import React from 'react';
import { createClient } from 'contentful';
class Home extends React.Component {
state = {
posts: []
};
componentWillMount() {
const client = createClient({
import React from 'react';
+import { createClient } from 'contentful';
class Home extends React.Component {
+ state = {
+ posts: []
+ };
+
+ componentWillMount() {
+ const client = createClient({
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');
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
+ "postbuild": "react-snap",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}