Skip to content

Instantly share code, notes, and snippets.

Tim Holt astrotim

  • ABC
  • Brisbane
Block or report user

Report or block astrotim

Hide content and notifications from this user.

Learn more about blocking users

Contact Support about this user’s behavior.

Learn more about reporting abuse

Report abuse
View GitHub Profile
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"
}
@astrotim
astrotim / Post.js.diff
Last active Dec 29, 2017
added page title with react-helmet
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>
@astrotim
astrotim / Post.js.diff
Last active Dec 29, 2017
update Post.js to render content
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>
@astrotim
astrotim / Home.js.diff
Last active Dec 29, 2017
added React Router's Link
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 (
@astrotim
astrotim / Post.js.diff
Last active Dec 29, 2017
added Markdown support to Post.js
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({
@astrotim
astrotim / Post.js
Created Dec 29, 2017
retrieve entry data per post id
View Post.js
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 Dec 29, 2017
updated Post route in App.js
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>
@astrotim
astrotim / Home.js
Last active Dec 29, 2017
updated with Contentful API call
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');
You can’t perform that action at this time.