diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..5447c55
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,18 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+build
+
+# misc
+.DS_Store
+.env
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..0891e90
--- /dev/null
+++ b/package.json
@@ -0,0 +1,21 @@
+{
+ "name": "foobar",
+ "version": "0.1.0",
+ "private": true,
+ "devDependencies": {
+ "react-scripts": "0.9.5"
+ },
+ "dependencies": {
+ "prop-types": "^15.5.8",
+ "react": "^15.5.4",
+ "react-dom": "^15.5.4",
+ "react-router": "^4.1.1",
+ "react-router-dom": "^4.1.1"
+ },
+ "scripts": {
+ "start": "react-scripts start",
+ "build": "react-scripts build",
+ "test": "react-scripts test --env=jsdom",
+ "eject": "react-scripts eject"
+ }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
new file mode 100644
index 0000000..5c125de
Binary files /dev/null and b/public/favicon.ico differ
diff --git a/public/index.html b/public/index.html
new file mode 100644
index 0000000..aab5e3b
--- /dev/null
+++ b/public/index.html
@@ -0,0 +1,31 @@
+
+
+
+ React App
+
+
+
+
+
+
diff --git a/src/CompleteProps/User.js b/src/CompleteProps/User.js
new file mode 100644
index 0000000..4842c6e
--- /dev/null
+++ b/src/CompleteProps/User.js
@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const User = (props) => (
+
+ {props.preferredName || props.name}: {props.email}
+
+)
+
+// https://facebook.github.io/react/docs/typechecking-with-proptypes.html
+User.propTypes = {
+ name: PropTypes.string.isRequired,
+ email: PropTypes.string.isRequired,
+ preferredName: PropTypes.string
+}
+
+export default User
diff --git a/src/CompleteProps/UserList.js b/src/CompleteProps/UserList.js
new file mode 100644
index 0000000..c16297a
--- /dev/null
+++ b/src/CompleteProps/UserList.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import User from './User'
+
+const UserList = (props) => (
+
+ {props.users.map((user) => (
+
+
+ ))}
+
+)
+
+// https://facebook.github.io/react/docs/typechecking-with-proptypes.html
+UserList.propTypes = {
+ users: PropTypes.array.isRequired
+}
+
+export default UserList
diff --git a/src/CompleteProps/index.js b/src/CompleteProps/index.js
new file mode 100644
index 0000000..75ce057
--- /dev/null
+++ b/src/CompleteProps/index.js
@@ -0,0 +1,16 @@
+import React from 'react'
+import UserList from './UserList'
+
+const users = [
+ { name: 'Michael', preferredName: 'Mike', email: 'mike@mikesmart.co.uk' },
+ { name: 'Hugo', email: 'hugo.giraudel@gmail.com' }
+]
+
+const UserIndex = () => (
+
+
Users:
+
+
+
+
+ )
+ }
+}
+
+export default Search
diff --git a/src/HelloWorld/index.js b/src/HelloWorld/index.js
new file mode 100644
index 0000000..7c20ada
--- /dev/null
+++ b/src/HelloWorld/index.js
@@ -0,0 +1,5 @@
+import React from 'react'
+
+const HelloWorld = () => Hello world
+
+export default HelloWorld
diff --git a/src/HigherOrder/index.js b/src/HigherOrder/index.js
new file mode 100644
index 0000000..383c3a0
--- /dev/null
+++ b/src/HigherOrder/index.js
@@ -0,0 +1,11 @@
+import React from 'react'
+import Trackable from './trackable'
+
+const Page = (props) => (
+
+
Tasks (15 minutes):
+
Write a higher-order function that provides the viewport width to the wrapped component as a viewportWidth property. Do not forget to unregister the listeners when/if component unmounts!
+
+
React is undefined
+
+
What is it, how does it work, what’s the point? (30 mins)
+
+
+
+ Why choose React, what does it help with?
+
+
+ Declarative
+ Library, not a framework
+ Rich third-party ecosystem
+
+
+
+ Reverse-tree based architecture
+
+
+ Root component
+ Sub-components…
+
+
+
+ Component based approach with props
+
+
+
+
+
+
+
+
+
+
+ React component lifecycle
+
+
+
+
+
+
+ Higher Order Components
+
+
+
+
+
+ Component state - container
+
+
+ https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0
+ More complex example, text filter component
+
+
+
Use this knowledge to build something (60 mins)
+
+
+ Simple index.html/CodePen, build a simple example, css block
+ CRA
+
+
+
--- break ---
+
+
Build systems
+
+
+ Webpack the basics
+ Webpack the complicated
+
+
+
Isomorphism
+
+
+ Server setup (ReactDOMServer, JSX in Node)
+ Caching?
+
+
+
Styling
+
+
+ CSS
+ Modules?
+ CSS in JS (Fela, styled-components)
+
+
+
--- break ---
+
+
Bonus content
+
+
+ Flux based state management
+ Router
+ Refs and third parties
+ Events (Keyboard Click Events)
+ Context - when to use it, and when really not to use it
+ Controlled components
+ Prop/State Hoisting (Data flow bottom to top)
+
+
Hello {props.name}
+const HelloWithProps = (props) =>
+ {props.preferredName || props.name}: {props.email}
+
+)
+
+User.propTypes = {
+ name: PropTypes.string.isRequired,
+ email: PropTypes.string.isRequired,
+ preferredName: Proptypes.string
+}
+
+const UserList = (props) => (
+
+ {props.users.map((user) => (
+
+
+ ))}
+
+)
+
+UserList.propTypes = {
+ users: PropTypes.array.isRequired
+}
+
+const users = [
+ { name: 'Michael', preferredName: 'Mike', email: 'mike@mikesmart.co.uk' },
+ { name: 'Hugo', email: 'hugo.giraudel@gmail.com' }
+]
+
+const UserIndex = () => (
+
+
Users:
+ The browser should ask for confirmation before reloading the page.
+ )
+ }
+}
+
+export default AskBeforeUnload
diff --git a/src/State/index.js b/src/State/index.js
new file mode 100644
index 0000000..173a484
--- /dev/null
+++ b/src/State/index.js
@@ -0,0 +1,18 @@
+import Timer from './timer'
+import React from 'react'
+
+const Page = () => (
+
+
+
+
Pick a task below (15 minutes):
+
+ [Easy] Make the Timer component accept an initial property to set the default value for seconds.
+ [Medium] Build a component that ask for confirmation before leaving the page.
+ [Medium] Display the live mouse position on the page.
+ [Hard] Find a simple third-party library and initialise it inside your component (e.g.: Flickity, a11y-dialog…).
+
+
Mouse is currently at position X:Y.
+ )
+ }
+}
+
+export default MousePosition
diff --git a/src/State/timer.js b/src/State/timer.js
new file mode 100644
index 0000000..2f8bc4c
--- /dev/null
+++ b/src/State/timer.js
@@ -0,0 +1,37 @@
+import React from 'react'
+
+class Timer extends React.Component {
+ constructor (props) {
+ super(props)
+
+ this.state = {
+ seconds: 0
+ }
+ }
+
+ componentWillMount () {
+ this.timer = setInterval(this.increment, 1000)
+ }
+
+ componentWillUnmount () {
+ clearInterval(this.timer)
+ }
+
+ increment = () => {
+ this.setState({
+ seconds: this.state.seconds + 1
+ })
+ }
+
+ pluraliseSeconds = () => {
+ return this.state.seconds === 1 ? 'second' : 'seconds'
+ }
+
+ render () {
+ return (
+ 👋🏻 I have been loaded for {this.state.seconds} {this.pluraliseSeconds()}.
+ )
+ }
+}
+
+export default Timer
diff --git a/src/__internals/Page/index.js b/src/__internals/Page/index.js
new file mode 100644
index 0000000..1c6f705
--- /dev/null
+++ b/src/__internals/Page/index.js
@@ -0,0 +1,10 @@
+import React from 'react'
+import './styles.css'
+
+const Page = (props) => (
+
+ {props.children}
+
+)
+
+export default Page
diff --git a/src/__internals/Page/styles.css b/src/__internals/Page/styles.css
new file mode 100644
index 0000000..6b7b190
--- /dev/null
+++ b/src/__internals/Page/styles.css
@@ -0,0 +1,8 @@
+.Page {
+ max-width: 800px;
+ width: 100%;
+ margin: 0 auto;
+ padding: 1em;
+ background-color: white;
+ height: 100%;
+}
diff --git a/src/__internals/Router/index.js b/src/__internals/Router/index.js
new file mode 100644
index 0000000..8cc57ed
--- /dev/null
+++ b/src/__internals/Router/index.js
@@ -0,0 +1,38 @@
+import React from 'react'
+import { Link, Route } from 'react-router-dom'
+import Home from '../../Home'
+import HelloWorld from '../../HelloWorld'
+import Props from '../../SimpleProps'
+import MoreProps from '../../CompleteProps'
+import State from '../../State'
+import HigherOrder from '../../HigherOrder'
+import Forms from '../../Forms'
+import './styles.css'
+
+class Navigation extends React.Component {
+ render() {
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ,
+ document.getElementById('root')
+)