init

Taylor Griffith · Taylor Griffith · commit 55a6cbae27dc · 2018-02-15T21:52:43.000-08:00
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,3 @@
+{
+  "extends": "react-static/.babelrc"
+}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,3 @@
+module.exports = {
+  extends: 'react-tools',
+}
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,19 @@
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/dist
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/README.md b/README.md
@@ -0,0 +1,10 @@
+# React-Static - Basic Example
+
+This example is the most basic version of react-static available. It includes:
+- Babel
+- CSS imports
+- Image imports
+- File imports
+- Automatic Routing
+
+To get started, run `react-static create` and use the `basic` template.
diff --git a/package.json b/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "react-static-example-basic",
+  "version": "1.0.1",
+  "main": "index.js",
+  "license": "MIT",
+  "scripts": {
+    "start": "react-static start",
+    "stage": "react-static build --staging",
+    "build": "react-static build",
+    "serve": "serve dist -p 3000"
+  },
+  "dependencies": {
+    "axios": "^0.16.2",
+    "react": "^16.0.0",
+    "react-dom": "^16.0.0",
+    "react-hot-loader": "^4.0.0-beta.21",
+    "react-router": "^4.2.0",
+    "react-static": "^5.1.10"
+  },
+  "devDependencies": {
+    "eslint-config-react-tools": "1.x.x",
+    "serve": "^6.1.0"
+  }
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1 @@
+User-agent: *
diff --git a/src/App.js b/src/App.js
@@ -0,0 +1,24 @@
+import React from 'react'
+import { Router, Link } from 'react-static'
+import { hot } from 'react-hot-loader'
+//
+import Routes from 'react-static-routes'
+
+import './app.css'
+
+const App = () => (
+  <Router>
+    <div>
+      <nav>
+        <Link to="/">Home</Link>
+        <Link to="/about">About</Link>
+        <Link to="/blog">Blog</Link>
+      </nav>
+      <div className="content">
+        <Routes />
+      </div>
+    </div>
+  </Router>
+)
+
+export default hot(module)(App)
diff --git a/src/app.css b/src/app.css
@@ -0,0 +1,33 @@
+body {
+  font-family: 'HelveticaNeue-Light', 'Helvetica Neue Light', 'Helvetica Neue', Helvetica, Arial,
+    'Lucida Grande', sans-serif;
+  font-weight: 300;
+  font-size: 16px;
+  margin: 0;
+  padding: 0;
+}
+
+a {
+  text-decoration: none;
+  color: #108db8;
+  font-weight: bold;
+}
+
+img {
+  max-width: 100%;
+}
+
+nav {
+  width: 100%;
+  background: #108db8;
+}
+
+nav a {
+  color: white;
+  padding: 1rem;
+  display: inline-block;
+}
+
+.content {
+  padding: 1rem;
+}
diff --git a/src/containers/404.js b/src/containers/404.js
@@ -0,0 +1,8 @@
+import React from 'react'
+//
+
+export default () => (
+  <div>
+    <h1>404 - Oh no's! We couldn't find that page :(</h1>
+  </div>
+)
diff --git a/src/containers/About.js b/src/containers/About.js
@@ -0,0 +1,10 @@
+
+import React from 'react'
+//
+
+export default () => (
+  <div>
+    <h1>This is what we're all about.</h1>
+    <p>React, static sites, performance, speed. It's the stuff that makes us tick.</p>
+  </div>
+)
diff --git a/src/containers/Blog.js b/src/containers/Blog.js
@@ -0,0 +1,19 @@
+
+import React from 'react'
+import { withRouteData, Link } from 'react-static'
+//
+
+export default withRouteData(({ posts }) => (
+  <div>
+    <h1>It's blog time.</h1>
+    <br />
+    All Posts:
+    <ul>
+      {posts.map(post => (
+        <li key={post.id}>
+          <Link to={`/blog/post/${post.id}/`}>{post.title}</Link>
+        </li>
+      ))}
+    </ul>
+  </div>
+))
diff --git a/src/containers/Home.js b/src/containers/Home.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import { withSiteData } from 'react-static'
+//
+import logoImg from '../logo.png'
+
+export default withSiteData(() => (
+  <div>
+    <h1 style={{ textAlign: 'center' }}>Welcome to</h1>
+    <img src={logoImg} alt="" />
+  </div>
+))
diff --git a/src/containers/Post.js b/src/containers/Post.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import { withRouteData, Link } from 'react-static'
+//
+
+export default withRouteData(({ post }) => (
+  <div>
+    <Link to="/blog/">{'<'} Back</Link>
+    <br />
+    <h3>{post.title}</h3>
+    <p>{post.body}</p>
+  </div>
+))
diff --git a/src/index.js b/src/index.js
@@ -0,0 +1,19 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+
+// Your top level component
+import App from './App'
+
+// Export your top level component as JSX (for static rendering)
+export default App
+
+// Render your app
+if (typeof document !== 'undefined') {
+  const renderMethod = module.hot ? ReactDOM.render : ReactDOM.hydrate || ReactDOM.render
+  const render = Comp => {
+    renderMethod(<Comp />, document.getElementById('root'))
+  }
+
+  // Render!
+  render(App)
+}
diff --git a/src/logo.png b/src/logo.png
diff --git a/static.config.js b/static.config.js
@@ -0,0 +1,38 @@
+import axios from 'axios'
+
+export default {
+  getSiteData: () => ({
+    title: 'React Static',
+  }),
+  getRoutes: async () => {
+    const { data: posts } = await axios.get('https://jsonplaceholder.typicode.com/posts')
+    return [
+      {
+        path: '/',
+        component: 'src/containers/Home',
+      },
+      {
+        path: '/about',
+        component: 'src/containers/About',
+      },
+      {
+        path: '/blog',
+        component: 'src/containers/Blog',
+        getData: () => ({
+          posts,
+        }),
+        children: posts.map(post => ({
+          path: `/post/${post.id}`,
+          component: 'src/containers/Post',
+          getData: () => ({
+            post,
+          }),
+        })),
+      },
+      {
+        is404: true,
+        component: 'src/containers/404',
+      },
+    ]
+  },
+}
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+{`
	`2`	`+ "extends": "react-static/.babelrc"`
	`3`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+module.exports = {`
	`2`	`+ extends: 'react-tools',`
	`3`	`+}`