move code to sub dir, added book

1-basics/conditional.md

@@ -0,0 +1,147 @@
+# Conditional rendering
+
+Follow me on [Twitter](https://twitter.com/chris_noring), happy to take your suggestions on topics or improvements /Chris
+
+Conditional rendering is about deciding what to render given a value of a variable. There are different approaches we can have here:
+
+* render if true
+* ternary expression
+
+## Render if true
+
+Let's have a look at the first version:
+
+```js
+class Element extends React.Component {
+  state = {
+    show: false
+  };
+
+  const toggle = () => {
+    this.setState({
+      show: this.state.show
+    });
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <div>some data</div>
+        {this.state.show &&
+        <div>body content</div>
+        }
+        <button onClick={this.toggle}></button>
+      </React.Fragment>
+    );
+  }
+}
+```
+
+Above we can see that look at the variable show in our state and renders a div if show is truthy:
+
+```js
+{ this.state.show &&
+  <div>body content</div>
+}
+```
+
+## Ternary rendering
+
+In this version we define a ternary expression and render different things depending on the value of our variable:
+
+```js
+class Element extends React.Component {
+  state = {
+    loading: false,
+    data: void 0
+  };
+
+  const toggle = () => {
+    this.setState({
+      show: this.state.show
+    });
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        {this.state.loading ?
+        <div>loading...</div> :
+        <div>{this.state.data}</div>
+        }
+      </React.Fragment>
+    );
+  }
+}
+```
+
+Let's highlight the ternary expression:
+
+```js
+{ this.state.loading ?
+<div>loading...</div> :
+<div>{this.state.data}</div>
+}
+```
+
+## Using if, else if, else
+
+And of course it is possible to use normal `if`, `else if`, `else` clauses when rendering, like so:
+
+```js
+class Element extends React.Component {
+  state = {
+    loading: false,
+    data: void 0
+  };
+
+  const toggle = () => {
+    this.setState({
+      show: this.state.show
+    });
+  }
+
+  const click = () => {
+    this.setState({
+      loading: true
+    });
+  }
+
+  getData() {
+    if (this.state.loading) {
+      return <div>loading...</div>;
+    } else if(this.state.data) {
+      return <div>{this.state.data}</div>;
+    }
+    return <div>{this.state.data}</div>;
+  }
+
+  render() {
+    return (
+      <React.Fragment>
+        <div>something</div>
+        { this.getData() }
+      </React.Fragment>
+    );
+  }
+}
+```
+
+We can't use `if`, `else if` and so on directly in the template but we can have a method `getData()` that can decide for us what ot render out. Let's highlight what we did above, define a getData\(\) method with conditional rendering:
+
+```js
+getData() {
+  if (this.state.loading) {
+    return <div>loading...</div>;
+  } else if(this.state.data) {
+    return <div>{this.state.data}</div>;
+  }
+  return <div>{this.state.data}</div>;
+}
+```
+
+and calling it in the template like so:
+
+```js
+{ this.getData() }
+```

1-basics/first-component.md

@@ -0,0 +1,102 @@
+# Your first component
+
+Follow me on [Twitter](https://twitter.com/chris_noring), happy to take your suggestions on topics or improvements /Chris
+
+There are many ways to create a component but let's have a look at how you can create a so called class based component.
+
+We will do the following:
+- **Define** the component, this will involve us inheriting from `React.Component` and define the method `render()`
+- **Use** the component in our app.
+
+ We use JSX to define it and assign it to a variable. Thereafter we are free to use it in our markup. To create our component we need the following:
+
+## Define the component
+
+Let's begin by creating a Jedi component:
+
+```js
+class Jedi extends React.Component {
+  render() {
+    return (
+      <div>I am a Jedi Component</div>
+    );
+  }
+}
+```
+
+Above we are defining the class `Jedi` and have it inherit from  `React.Component`. Thereafter we define the method `render()` that defines what our component will output. We return a JSX statement as output.
+
+## Use component
+
+Now that we have our component we can easily it as we would any HTML element like below `<Jedi />`:
+
+```html
+<div>
+  <Jedi />
+</div>
+```
+
+## Create a React application
+
+> Ok, great I know how to create a Component but how do I actually create a React app? 
+
+That's a fair comment. 
+
+To create a React app we will opt to use the `script` version of creating a React project. This involves creating thee following files:
+
+- **index.html**, this will contain the script tags pointing to the needed React libraries but also a mount point for our app.
+- **app.js**, this will contain the application definition
+
+### Create `index.html`
+
+```html
+<!-- index.html ->
+
+<html>
+  <body>
+  <!-- This is where our app will live -->
+    <div id="app"></div>
+
+    <!-- These are script tags we need for React, JSX and ES2015 features -->
+    <script src="https://fb.me/react-15.0.0.js"></script>
+    <script src="https://fb.me/react-dom-15.0.0.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
+    <script type="text/babel" src="app.js"></script>
+  </body>
+
+</html>
+```
+
+Above we create the mount point `<div id="app"></div>`, this is where our app will be rendered.
+
+### Create `app.js`
+
+`app.js` looks like the following:
+
+```js
+class Jedi extends React.Component {
+  render() {
+    return (
+      <div>I am a Jedi Component</div>
+    );
+  }
+}
+
+class Application extends React.Component {
+  render() {
+    return (
+      <div>
+        <Jedi />
+      </div>
+    );
+  }
+}
+
+ReactDOM.render(<Application />, document.getElementById('app'));
+```
+
+The above has three parts:
+
+1. **Component definition**, We define our `Jedi` component. 
+2. **Application definition**, this where we create the component `Application` and within its `render()` method we place the `Jedi` component
+3. **Render the app**, our last line is us  calling `ReactDOM.render()` with the `Application` component and as second argument we tell it where to find the mount point. In our case this is the `div` with id `app`

1-basics/jsx.md

@@ -0,0 +1,116 @@
+# JSX
+
+Follow me on [Twitter](https://twitter.com/chris_noring), happy to take your suggestions on topics or improvements /Chris
+
+This chapter covers:
+
+- **What** is JSX
+- **Why** use it
+
+## What & Why
+
+JSX is pretty much you writing XML in JavaScript. It's a preprocessor step. You don't have to have it but it makes life a whole lot easier.
+
+### Simple example
+
+This is a simple example on one line of code:
+
+```js
+const Elem = <h1>Some title</h1>;
+
+// and you can use it in React like so:
+<div>
+  <Elem />
+</div>
+```
+
+The above looks like XML in JavaScript. When it is being processed it is turned into the following ES5 code:
+
+```js
+React.createElement('Elem', null, 'Some title');
+```
+
+Ok so `Elem` becomes the element name, the second argument that above is null are our element attributes, which we don't have any. The third and last argument is the elements value. Let's look at an example below where we give it a property:
+
+```js
+const Elem = <h1>Some title</h1>;
+
+// usage:
+<div>
+  <Elem title="a title">
+</div>
+```
+
+The above would become the following code:
+
+```js
+React.createElement(
+  'Elem', 
+  { 
+    title: 'a title' 
+  }, 
+  'Some title'
+);
+```
+
+Above we can see that our attribute `title` is now part of the second argument.
+
+### Multiline
+
+Most of the time you will define JSX over several different rows and starting out new it might stump you why it doesn't work. You simply need to wrap it in a parenthesis, like so:
+
+```jsx
+const Elem =
+(
+  <div>
+    <h1>Some title</h1>
+    <div>Some content</div>
+  </div>
+)
+```
+
+### One parent
+
+JSX needs to have one parent. The following would be incorrect:
+
+```html
+// would be incorrect, no parent element
+const Elem =
+(
+  <h1>Some title</h1>
+  <div>Some content</div>
+)
+```
+
+We can fix this by either wrapping the in div element like so:
+
+```html
+const Elem =
+(
+  <div>
+    <h1>Some title</h1>
+    <div>Some content</div>
+  </div>
+)
+```
+
+or we can wrap it in a React.Fragment, like so:
+
+```html
+const Elem = (
+<React.Fragment>
+  <h1>Some title</h1>
+  <div>Some content</div>
+</React.Fragment>
+)
+```
+
+React.Fragment would be the parent element needed instead of us using a div element just to make JSX happy.
+
+## Summary
+
+This is pretty much all we need to know on JSX to be able to work with it:
+
+* It's like XML that gets translated to `React.createElement()` calls
+* Multiline needs parenthesis to work
+* We need to have a parent element, React.Fragment is good option for that