feat: add render props

locol23 · locol23 · commit d22204cb2919 · 2020-04-06T13:43:48.000+09:00
diff --git a/README.md b/README.md
@@ -10,6 +10,8 @@ Learn React with TypeScript
   - [Goal](https://github.com/locol23/learn-react-typescript/tree/master/packages/function-components-goal)
 - Styled Components
     - [Base & Goal](https://github.com/locol23/learn-react-typescript/tree/master/packages/styled-components)
+- Advanced Techniques
+  - [Base](./packages/render-props-base)
 - Recompose
   - State(withStateHandlers)
     - [Base](https://github.com/locol23/learn-react-typescript/tree/master/packages/recompose-state-base)
diff --git a/packages/render-props-base/README.md b/packages/render-props-base/README.md
@@ -0,0 +1,3 @@
+# render props
+
+[React Advanced Guides](https://reactjs.org/docs/render-props.html)
diff --git a/packages/render-props-base/package-lock.json b/packages/render-props-base/package-lock.json
diff --git a/packages/render-props-base/package.json b/packages/render-props-base/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "render-props-base",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "clean": "rimraf dist",
+    "parcel:dev": "parcel src/index.html",
+    "parcel:prod": "parcel build src/index.html",
+    "dev": "run-s clean parcel:dev",
+    "build": "run-s clean parcel:prod",
+    "storybook": "start-storybook -p 6006",
+    "build-storybook": "build-storybook"
+  },
+  "keywords": [],
+  "author": "Yoshitaka Terazawa <locol6622@gmail.com> (https://twitter.com/locol23)",
+  "license": "MIT",
+  "devDependencies": {
+    "npm-run-all": "^4.1.5",
+    "parcel-bundler": "^1.12.4",
+    "rimraf": "^3.0.2",
+    "typescript": "^3.8.3"
+  },
+  "dependencies": {
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1"
+  }
+}
diff --git a/packages/render-props-base/src/components/App.tsx b/packages/render-props-base/src/components/App.tsx
@@ -0,0 +1,13 @@
+import React from 'react'
+import { Child } from './Child'
+
+export const App: React.FC = () => {
+  const render = () => <div>render props</div>
+
+  return (
+    <>
+      <Child render={render} />
+      <Child />
+    </>
+  )
+}
diff --git a/packages/render-props-base/src/components/Child.tsx b/packages/render-props-base/src/components/Child.tsx
@@ -0,0 +1,8 @@
+import React, { ReactNode } from 'react'
+
+type Props = {
+  render?: () => ReactNode
+}
+
+export const Child: React.FC<Props> = ({ render }) => <>{render ? render() : <p>render is nothing</p>}</>
+
diff --git a/packages/render-props-base/src/index.html b/packages/render-props-base/src/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>React Typescript Boilerplate</title>
+</head>
+<body>
+  <div class="app">Loading...</div>
+  <script src="index.tsx"></script>
+</body>
+</html>
diff --git a/packages/render-props-base/src/index.tsx b/packages/render-props-base/src/index.tsx
@@ -0,0 +1,5 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { App } from './components/App'
+
+ReactDOM.render(<App />, document.querySelector('.app'))
diff --git a/packages/render-props-base/tsconfig.json b/packages/render-props-base/tsconfig.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "commonjs",
+    "lib": ["dom", "es2020"],
+    "allowJs": false,
+    "jsx": "react",
+    "removeComments": true,
+    "noEmit": false,
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noImplicitReturns": true,
+    "noFallthroughCasesInSwitch": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  }
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# render props`
	`2`	`+`
	`3`	`+[React Advanced Guides](https://reactjs.org/docs/render-props.html)`