
I recently started at Microsoft, where I joined at the perfect moment. Microsoft has been transforming under the lead of our new CEO Satya Nadella. Who brought a new fresh breeze of air through the company, with as goal of “Hitting Refresh” and preparing us for the years to come.

As lucky as I was, I joined a few weeks before he released his book. Which made it special for me, since every Employee receives a special Employee Edition of this awesome book, including notes by Satya. (I can say that these notes were really well thought-off, seeing that even the Index at the back had extra notes in them to reference back to certain pages where notes were added). Of course I instantly set a goal for myself to finish this book, but I added a small little task for myself, which was to mark everything I personally found very interesting. These parts not only include some marked lines by Satya, but also my own reading between the lines.

This Blog Post will summarize my Key Takeaways from this book. The top part will include the points that I found Critical, and that I think everyone should learn — including some remarks from myself. Whereas the bottom part will be more literal copied parts with references to the pages.

> Disclaimer: Please note that almost everything besides my own comments written below comes from the Book Hit Refresh by Satya Nadella. If you like the parts that I included below, I recommend everyone to acquire (https://news.microsoft.com/hitrefresh/) a copy of this book and read it yourself. It is a very well written book that includes a lot of brainstorming for the future, and will definitely give you a spark to think about the future yourself.

## My 5 Key Picks

### Page: 119 — About leaders

“To be a leader in this company, your job is to find the rose petals in a field of shit”

> If I had to summarize myself how I see a leader, I couldn’t have done it any better. It is short, to the point and a hidden call-to-action for existing leaders.
> We can look at a leader as an operator of a machine. Machines are built up using a lot of different cogs of all sizes that coherently work together as one giant machine. So by definition it is important to select cogs that you know you can trust and rely on before operating your machine. Since without these cogs, it all falls apart and you would not be able to operate anything.

### Pages 119 and 120 — Leadership principles

1. Bring clarity to those you work with. By taking internal and external noise and synthesizing a message from it to deliver to your team.
2. Leaders generate energy, not only on their own teams but across the company
3. They find a way to deliver success to make things happen. This means driving innovations that people love and are inspired to work on; finding balance between long-term success and short-term wins; and being boundary-less and globally minded in seeking solutions.

> The key point in this list described above for me, is point 2: “Generating Energy”. Did you every talk to someone that had such a specific way of talking that you were instantly convinced? Or someone who talks in such a way that you are amazed by everything that person says? Well this is a kind of energy a leader needs. The energy that is contagious and makes other people move and follow the leader in every step they take.
> An excellent example here is Satya. When he got promoted as a CEO, he talked in such a way that the whole culture started to shift. His energy was transmitted to the people close around him, who in their turn passed the energy down towards the people close to them. If we can continue this chain till the furthest shackle. It results in everybody being on the same line, moving as one entity and reaching for the furthest stars.
> If someone ever asked me what I think are the best hiring qualities a recruiter should look for. Then my top answer would definitely be to look for the people who have energy. Because I know that those people will be the ones that can help your organization move and focus on the more innovative things.

### Page 125 — Our Partners

“For everyone working with partners, I encourage you to ask yourself “what could be?” and explore new, creative ways to do interesting things that add value back to our platforms for customers”

> This sentence speaks for itself. Without our partners we would not be able to get to the point where we are now. They are your first line of defense in receiving critical feedback, that can help you finetune your application for a better customer experience. Without them, we would need to receive this feedback from our customers, which is a good thing but also a dangerous thing. Customers criticize more easily which can have an impact on brand name and customer acquisition.

### Page 166 — How quantum computers will become part of our lives

“Quantum computers will not stake the form of a new stand-alone, super-fast PC but will operate as a co-processor, receiving its instructions and cues from a stack of classical processors”

> For me this was very interesting and opened up new ways of thinking. I always thought that quantum computers would replace our existing computers. But after reading sense, it makes more sense that quantum computers will focus on what they are good at. Allowing us to iterate further on what we already have, rather than reworking it.

### Page 203 — The different run-times through history

“There were 2 different run times already (First PC, then Web) and now we are progressing towards the third one: AI”

This is key. Seeing my age, I only saw the second run time coming since the PC battle was one that was already won (See Linux, Windows and Mac OS). Web however was just starting back then and has meanwhile reached a mature enough stage for us to be looking at a new run time.

Looking back at when the Web run time started, we can see the same patterns arriving now. Just as then, now AI is arriving in more startups, people are jumping on board, the general public is seeing and acknowledging its existence more and more. Helping me believe that AI is indeed the next run time. The question that I have however is the timeline. AI has promises, but in my opinion a lot of work is needed for it to become mainstream.

## Other Picks

### Pages 38 and 39 — Three business and leadership principles learned from cricket

* Compete vigorously and with passion in the face of uncertainty and intimidation
* Put your team first, ahead of your personal statistics and recognition
* One brilliant character who does not put the team first can destroy the entire team

### Page 126 — four initiatives every company must make a priority

* Engage with your customer base by leveraging data to improve the customer experience
* Empower your own employees by enabling greater and more mobile productivity and collaboration in the new digital world of work
* Optimize operations, automating and simplifying business process across sales, operations and finance
* Transform our products, services and business models (become a digital company)

### Page 150 — Three areas we have to work on to make AI a reality

* Big Data
* Massive Computing Power
* Sophisticated Algorithms

### Page 150 — About Artificial General Intelligence

Artificial General Intelligence (AGI) is the point at which a computer matches or even surpasses human intellectual capabilities

### Page 150 — The layers of Artificial Intelligence

* Bottom Layer: Pattern recognition
* Middle Layer: Perception, sensing more and more complex scenes (estimated that 99% of human perception is through speech and vision)
* Top Layer: Cognition — Deep understanding of human language

### Pages 151, 152 and 153 — The state of AI today and where we are going

* Bespoke (=tailored/commissioned to a particular specification): This is how AI is today, only for a few companies
* Democratized: Make tools so that everyone can use AI (this is what Microsoft is doing)
* Learn to Learn: Get computers to the point where they Learn to Learn

### Page 162 — Scientific and engineering breakthroughs needed to get to quantum computing

* Math breakthrough: The Topological Qubit
* Superconducting Breakthrough: Fabrication process to yield thousands of topological qubits that are both highly reliable and stable. A promising technique is available here called “Majorana fermions”
* Computer Science Breakthrough: New computational methods for programming the quantum computer

### Page 182 — Formula for Trust

Formula for trust: E + SV + SR = T/t (Empathy + Shared Values + Safety and Reliability = Trust over time)

> Note: Of course this is not possible, but rather an estimation if it could be written as a formula

### Page 197 — Conversational AI

Conversational AI needs to be able to create and understand dialog to deliver a personal, social and emotional experience

### Page 212 — Accelerants for innovations

Ultimately, we need technological breakthroughs to drive growth beyond what we’re seeing, and I believe mixed reality, artificial intelligence and quantum are the type of innovations that will serve as accelerants

### Page 215 — Leadership opportunities that no single community/region has seized yet

* Desert farming in Australia
* Local banking in Dubai
* Innovations in IoT
* Ambient Intelligence
* Mobile Payment Systems
* Virtual Reality
* Silicon Photonics
* 3D printing
* Wearables
* Lightweight, low altitude satellites
* Drones
* Native advertising
* Driverless cars
* Robotics and industrial automation
* Adaptive, gamified education
* Nano-machines
* Genomics
* Economical Solar, Wind , and tidal power


My Key Take-aways from reading Satya Nadella’s Book “Hit Refresh”


So you want to create a Kubernetes cluster to start testing your docker deployment? But you would like to test this locally first? Well, then this post is for you. Here we will go in depth on how you can set up your local development environment, and then port it to the cloud when you need the scale.

## Local Development Environment - Minikube

### Installation and starting it (Windows)

1. Install `kubectl`, see https://kubernetes.io/docs/tasks/tools/install-kubectl/ for more information
    * Note: I have installed this on the Windows Subsystem for Linux (WSL) since I already had it running on there. It also proved that I could access my `kubectl` from any other environment.
2. For Minikube, I ran `choco install minikube --version 0.25.0 --allow-downgrade` (older version since the most recent one was bugged - https://github.com/docker/machine/issues/4342)
    * Note: Chocolatey is a windows package manager, find more about it here: https://chocolatey.org/
3. Run: `minikube start --vm-driver="hyperv" --hyperv-virtual-switch="<YOUR_SWITCH>"` to start the Kubernetes cluster in the HyperV hypervisor
    * To find the <YOUR_SWITCH>, go to `Hyper-V Manager` in windows. At the right you will see `Virtual Switch Manager`, click this and find your Ethernet Adapter name. In my case this was named: `Realtek PCIe GBE Family Controller Virtual Switch`

> Note: Once you ran `minikube start` you should be able to access kubectl. If this is not the case (as for me, because I was running WSL), check the next points. Else you can skip straight towards the Commands section.

### Connecting your kubectl command to your Kubernetes cluster

Since our Kubernetes cluster is running on HyperV, we need to configure our local kubectl command to connect to this cluster. Depending on what you are using, these commands may differ. Let's go deeper on how we can configure this for PowerShell and WSL.

#### Configuring kubectl for PowerShell

Configuring kubectl for use with PowerShell is very easy. For this you just have to run the following command: `& minikube docker-env | Invoke-Expression` which will configure your Docker client to connect to the Docker Daemon running in the HyperV

#### Configuring kubectl for Windows Subsystem for Linux (WSL)

I also wanted to access my `docker` daemon, this we can do through these commands

```bash
export DOCKER_TLS_VERIFY="1"
export DOCKER_HOST="tcp://<your_ip>:2375"
export DOCKER_CERT_PATH="/mnt/c/Users/<user>/.minikube/certs"
export DOCKER_API_VERSION="1.23"
```

> You can now test this by running `docker ps` to see your running containers.

Now we also need to set our `kubectl` command, which we can do like this:

```bash
kubectl config set-cluster minikube --server=https://<your_local_ip>:8443 --certificate-authority=/mnt/c/Users/<user>/.minikube/ca.crt
kubectl config set-context minikube --cluster=minikube --user=minikube
kubectl config set-credentials minikube --client-certificate=/mnt/c/Users/<user>/.minikube/client.crt --client-key=/mnt/c/Users/<user>/.minikube/client.key
kubectl config use-context minikube
```

> You can not test this by running `kubectl proxy` which should allow you to access the dashboard on http://localhost:8001/api/v1/namespaces/kube-system/services/kubernetes-dashboard/proxy/

## Cloud Deployment - Azure

### Creating an Azure AKS instance through the CLI

> Note: If you do not have the Azure CLI installed, you can also use https://shell.azure.com/

1. Start by checking if you have access to your account by running `az account list`
  * Note: If you do not have access use `az login` to login to your account
2. Set your subscription with `az account set --subscription <name_or_id>`
3. Create an AKS with `az aks create -g <resource_group> -n <name_of_aks_cluster> --node-vm-size Standard_B1ms --location westeurope --node-count 5 --ssh-key-value <path_to_ssh_pub>`
4. Configure your kubectl to connect to the kubernetes cluster by using `az aks get-credentials --resource-group <RESOURCE_GROUP> --name <NAME>`

### Getting the right VM Size

You can view the VM sizes through the CLI with `az vm list-sizes --location westeurope`, and the locations through `az account list-locations`

> Note: Filter instances with jq: `az vm list-sizes --location westeurope | jq '.[] | select(.name | contains("Standard_A"))'`

Another way to view those sizes is through the Website: https://azure.microsoft.com/en-us/pricing/details/virtual-machines/linux/

## Creating and deploying a Dockerfile in your Kubernetes Cluster

### 1. Build dockerfile

Build your image using the docker daemon:
`docker build -t <image_name>:<version> <dir>`

example: 

`docker build -t node_image:v1 .`

> Note: If you would like to skip WSL and just use Powershell, then you can configure docker to connect to the Docker Daemon in your HyperV through `& minikube docker-env | Invoke-Expression`

### 2. Deploying the newly build docker image

`kubectl run <deployment-name> --image=<image_name>:<version> --port=<port_exposed>`

example: `kubectl run node-image --image=node_image:v1`

### 3. Monitoring your deployment

Once you started your Kubernetes cluster, you can monitor it through the Kubernetes UI. To get access to this UI, you need to run the following command:

```bash
kubectl proxy
```

Whereafter a local UI server will be created that you can access through this link: http://localhost:8001/api/v1/namespaces/kube-system/services/kubernetes-dashboard/proxy/

## Command Reference

To get you up to speed with Minikube and Kubernetes, I included a list of useful commands as a reference

### Minikube

|Command|Description|
|-|-|
|`minikube start`|Starts the Kubernetes cluster|
|`minikube dashboard`|Open the Kubernetes dashboard|
|`minikube docker-env`|Get the docker-env to connect to|
|`minikube service <deployment-name>`|Access a service in the browser|

### Kubernetes

|Command|Description|
|-|-|
|Access dashboard|`kubectl proxy`, now view http://localhost:8001/api/v1/namespaces/kube-system/services/kubernetes-dashboard/proxy/#!/overview?namespace=default for the dashboard|
|Creating a deployment|`kubectl run <deployment-name> --image=<image_name>:<version> --port=<port_exposed>`|
|View deployments|`kubectl get deployments`|
|View Pods|`kubectl get pods`|
|View Logs from a pod|`kubectl logs <pod-name>`|
|Make a container accessible from outside K8S|`kubectl expose deployment <deployment-name> --type=LoadBalancer`|
|View Services|`kubectl get services`|
|Delete a deployment|`kubectl delete deployment <deployment-name>`|

## FAQ

When you have problems, always try this first:

1. Start PowerShell as Administrator
2. Run `minikube delete`
3. Run `minikube start --vm-driver hyperv`


Create a local kubernetes development cluster and scale it with the cloud


So we learned all about starting our culture, and the base values that a influential leader should have (see FICEL, talked about in [Part 1](../culture-creation-part1-leadership)). But once we are this leader, how do we create a growth culture? Well this is all about **Motivation**.

Now how do we create this motivation? Put yourself in the shoes of a leader (or manager in this case), how do you make your people thrive?

## Creating Motivation

A common misconception is that people work harder when they see rewards. Just think about the area of sales where employees receive a bonus when they reach their targets. According to a study, this is however not the truth. When comparing two sets of employees - one with rewards, the other without - it has been proven that the one without rewards seems to provide better results.

Therefore, we should focus on creating a culture about making people motivated without providing rewards, or also called **Intrinsic Motivation**. By focusing on just three points, we are able to boost this motivation:

* **Purpose:** When people have a purpose, they are more eager to work towards a self-set goal.
* **Autonomy:** But to allow them to work towards self-set goals, we should provide them with the autonomy to do so.
* **Mastery:** And last but not least, to help them accomplish their purpose, provide them with the right training.

## Examples of Intrinsic Motivations

### Google

One of the most famous examples is Google who lets their employees work on their own projects for 20% of their time (called the 20% time rule).

This has the benefits of giving your employees the autonomy and mastery that they need, but also adds a benefit of that your company starts exploring new solutions (remember the *exploration* subject from part 1?)

### Zynga

Zynga goes even a step further. They allow employees to take **unlimited holidays** whenever they want it for as long as they want. They trust their employees to take the correct decisions when it matters, to improve in their job.

This is the perfect example on how you can provide *Autonomy* towards your employees.

## References

[https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5364176/](https://www.ncbi.nlm.nih.gov/pmc/articles/PMC5364176/)


Creating a culture of growth and ambition, Part 2 - Motivation


Did you ever lay awake in your bed, wondering what to do with your life? Wondering how you can make an impact in the society of today? Wondering how you can make people follow you? Well, if you are thinking about this, you belong to a group of people often called "Influential Leaders".

Just think about famous people such as Martin Luther King (I have a dream), Che Guevara (Che) or yes, even Donald Trump (Make America Great Again), they all figured out on how to influence people and make them follow them.

In this series of blog posts, I will be explaining different elements, that I think are needed for a person to create a culture of growth; a culture where people whom you work with are able to shine.

## Chapter #1: Influential Leadership

In the first step of creating a growth culture, it is crucial that you understand what makes good leaders. You want to be a leader that inspires people, someone who is able to say something that makes people admire you. You however, do NOT want to be the kind of leader that people fear, the kind of leader that destroys a culture.

So before we go in detail, lets summarize what makes up a good leader (as an acronym: FICEL):

* Focus: Focus on the correct group of people
* Inclusion: Making People Belong
* Commitment: Take initiative to change someone's life
* Exploration: Do not stick only to what worked before
* Listener: Always listen to everyone

### F: Focus

You have two different kind of leaders - the ones that influence a specific focus group (chemists, firefighters, technical, ...) or the ones that focus a bigger part of the population (world, us, europe, asia, ...). But in either case, it is important to know what your **focus group** is. Who are the people that should follow you?

Once you know your focus group, you can tune your messages to them, or even brush up certain skills to better understand them. This will make it easier for you to get people to follow you, since people tend to "tribe" together - just think on why people with a certain skill always sit together in the office.

### I: Inclusion

I can not express how important this one is. People tend to follow a group when they feel that they belong. Just think about the different religions: christianity, islam, buddhism, etc, or even the kind of sports teams people follow. When they think they belong, they are more likely to stick to it, and we all know how hard it is to change someone's mind.

### C: Commitment

But how do you really change someone's life? It is not by standing at the sidelines and watching something happen. No, it's by participating in it. When you see something happening that goes against your beliefs, take action! When you see something that could be improved, take action! That is if you believe in it yourself!

People tend to take things for granted, true leaders go against this and try to change the status quo.

### E: Exploration

Are you one of the persons that likes to stick with what works? Well, then you fall back out of the category of Influential Leaders. A leader is someone who constantly challenges himself/herself. You need to stay ahead of the competition, and what other way to do this then to keep on changing?

### L: Listener

Last but not least, listen to people! How else do you think to influence people if you do not know what they are thinking about? People like to express themselves through gossip, criticism, etc, so instead of challenging these expressions, it's important to listen to them.

By listening, you will be able to tackle core problems, that you would never have discovered otherwise.


Creating a culture of growth and ambition, Part 1 - Leadership


So you decided to get into Mobile development? Well your best bet on windows currently is the **Visual Studio Emulator for Android Apps** by Microsoft (https://www.visualstudio.com/vs/msft-android-emulator/). But you may run into some trouble when using it. This blog post consists out of the most commonly encountered problems with the Visual Studio Emulator for Android Apps, and how you could solve them.

**When running it just closes and gives: Could not connect to the debugger**

* in Hyper-V settings make sure Migrate to a physical computer with a different processor version. is enabled
* In your Android project, uncheck Fast Deploy

**Emulator is stuck on OS Is Starting**

* It's prone to crashing, just go to `C:\Program Files (x86)\Microsoft XDE\<version_number>\` and run `XDECleanup.exe`, wait till it is done and try again

**Emulator shows: Couldn't auto-detect the guest system IP address**

* It's prone to crashing, just go to `C:\Program Files (x86)\Microsoft XDE\<version_number>\` and run `XDECleanup.exe`, wait till it is done and try again

**I have no internet on the Emulator**

* This is a Virtual Switch error, to solve this make sure you delete your old Virtual Switches by deleting them in the Device Manager and in the Hyper-V Virtual Switch Manager
* Then Try to recreate your VM and look in your Hyper-V settings if it has 2 interfaces (one for the W Phone and one for the External Internet)
* If it doesn't have the second one, create it manually and add it

**My internet speed drops after creating the Hyper-V emulator**

* Known problem, check my other blog post: https://xaviergeerinck.com/fix-slow-internet-speed-realtek-adapter-hyper-v-machines/



Visual Studio Android Emulator Debugging


When working with the awesome Visual Studio Android Emulator, I encountered the following error:

**Issue:** Internet speed gets divided by a factor of 10x when creating a Hyper-V machine that uses a vSwitch bound on the main Network Interface (nic).

**Solution:**

Open adapter settings -> Right click towards properties -> Configure your network adapter

Now disable the following settings:

* IPv4 checksum offload
* Large Send Offload (IPv4)
* TDP Checksum Offload IPv4
* UDP Checksum Offload IPv4

After disabling these settings my internet speed went back to its original speed :) hope this helped!

> Note: For people with a Broadcom adapter, I recommend looking after disabling VMQ (Virtual Machines Queue) which seems to be an issue as well


How-To Fix slow internet speed on a Realtek adapter with Hyper-V machines


https://github.com/Xaviergeerinck/MERGE-Stack

Since the rise of new client-side frameworks such as Angular, React and many others. A lot of code gets written and executed on the client-side. Resulting in a decreased performance, bad SEO, increased bandwidth and many other issues. On the contrary side, client-side applications also have stronger points such as an improved UX flow, faster transitions and others. The question that we have to ask ourselves here, is how we are able to keep the advantages, and eliminate the disadvantages. Resulting in the rise of Universal Javascript applications and the creation of the MERGE Stack.

These Universal Javascript applications 1 combine the power of Server Side and Client Side rendering to create applications that can run in servers, browsers and mobile devices. To improve SEO, initial load performance and many others.

The MERGE stack now offers a set of languages, tools and frameworks that allow the developer to get started with developing Universal Javascript applications in a short period of time, without the need of researching the best tools to use and combine.

It exists out of cutting edge technology such as MySQL, Express, React and GraphQL. Allowing for applications to be written in a modular way, and keeping the bandwidth requirements as optimal as possible.

## Stack

* MySQL: Database engine used to store our data, this can easily be interchanged with any other relational database engine such as Postgres, MSSQL, Oracle SQL, ...
* Express: Web application framework used to route GraphQL requests and apply authorization
* React: A Javascript library for building user interfaces
* GraphQL: A query language for your API, decreasing the bandwidth utilized and replacing REST calls
* Next.js: A framework that implements Server Side rendering
* Apollo Client: A easy to use client to connect the UI to our GraphQL server.

## Installation

The setup of the MERGE stack can be done manually through the cloning of the components listed above. It is however more trivial to create a clone of this repository and work from there. Once this repository is cloned, the client and the server can both be installed and configured as listed below.

> Note: Make sure that enough memory is available for the build process of the client (1Gb recommended). You can also use swap through the following commands

```bash
sudo fallocate -l 1G /swapfile
sudo chmod 600 /swapfile
sudo mkswap /swapfile
sudo swapon /swapfile
sudo cp /etc/fstab /etc/fstab.bak
echo '/swapfile none swap sw 0 0' | sudo tee -a /etc/fstab
```

### Client

```bash
cd client/
npm install # or yarn
npm run dev # or yarn run dev
```

### Server

```bash
cd server/
npm install # or yarn
npm install -g sequelize-cli # Installation of the Database Manager
npm install mysql # Install the MySQL connector, or see http://docs.sequelizejs.com/en/v3/docs/getting-started/ for more)
sequelize db:migrate # Create the initial database schema, to adapt these configs, see: server/config/config.js
npm run dev # or yarn run dev
```

## Feature Solutions

### Authentication

Authentication in Universal Javascript applications can be a complex implementation, due to the use of both Server Side rendering and Client Side rendering. Because of this, we need to authenticate the user on the server on the first request, and also on the client.

To accomplish this, we are able to authenticate the user through a token based system, and store this token in a cookie. Once this is done, we are then able to forward this cookie to the server side, which is able to read and process the authentication.

For the client side, we can just read this token, and add it as a `Authorization: Bearer <token>` header, as described in the OAuth 2 token flow (https://tools.ietf.org/html/rfc6749#section-4.1).

The server can now lookup this token and add the user to the request for easy usage.

> Note that the choice was made to process the user in a middleware layer, to make this user easily available in the further layers of our application.


The MERGE Stack


## 1. Introduction

So in part 1 of this tutorial series we learned how the components work and how we can port our design over to this component based design. In part 2 we then went ahead and created our initial bootstrap for our application so that we are able to start working. Part 3 will be about creating our TODOList app as it is shown in the design. We will completely convert the design to the components and will be able to perform the actions such as checking items.

Please note that all the actions will be statically in this part and we will not be able to save it to a database yet. This part will be handled in part 4 (creating the API) and 5 (Creating the React.JS actions).

# 2. The components

As explained before we have the following components that we will have to create:

* **TodoList Page:** This is our page where we will put in the todolist component.
* **TodoList Component:** This is the component that we will be able to integrate into our page.
* **TodoListAdd:** The input box to add new todo items
* **TodoList:** The list of items
* **TodoListItem:** An item itself

We have already wrote the initial files for the TodoListPage component, which is why we will continue with the others before completing this one. This is because this component relies on the other components to be completed.

## 3. TodoList Component

Let's now start on the TodoList Component, for this create a folder in the `src/components/elements` folder called **TodoList**. This folder will then have the same bootstrap files as the TodoListPage folder: `TodoList.js`, `TodoList.css`, `package.json`. But we will also create extra files to accommodate the other features. Now also add `TodoListAdd.js`, `TodoListItems.js` and `TodoListItem.js`.

The TodoList folder will now look like this:

```bash
- src/components/elements/TodoList/
  - TodoList.css
  - TodoList.js
  - TodoListAdd.js
  - TodoListItems.js
  - TodoListItem.js
  - package.json
```

### 3.1. Writing the TodoList.js part

We are finally at the part of writing a component, it has been a long way but now the real work starts. Writing the component. Let us first start by defining the structure of the TodoList.js part. It will exist out of the Add box and the Overview box. So, add 2 elements `<TodoListAdd />` and `<TodoListItems />` which will show our items. Your class will look like this then:

```js
import React, { PropTypes } from 'react';
import TodoListAdd from './TodoListAdd';
import TodoListItems from './TodoListItems';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="TodoList">
        <TodoListAdd />
        <TodoListItems />
      </div>
    );
  }
}

export default TodoList;
```

### 3.2. Back to our TodoListPage

Now create the bootstrap files for the `TodoListAdd.js` and the `TodoListItems.js` files. This will allow us to add the TodoList component to our TodoListPage file. When you did this, add the TodoList Component to your Page by adding `<TodoList />` in it's render function. (Do not forget to include it.)

If you did everything right, when you reload the page it will show a blank page and no errors have happened in the console. If you encounter an error here, go back and see if you did not forget anything. Else check the repository.

## 3.3. Finishing the TodoListAdd part

The add function will allow us to insert a TodoItem by entering it's info into a textbox and clicking on the add button. We will also do this, so add a `<input type="text" ref="input_todo" />` and a `<input type="submit" />` element in the render function of the TodoListAdd part.

You will get this:

```js
<div className="TodoListAdd">
  <form onSubmit={this._handleOnSubmit.bind(this)}>
    <input type="text" ref="input_todo" />
    <input type="submit" />
  </form>
</div>
```

Note that I have already went ahead and created the event handler, it will call a local function `_handleOnSubmit` when a user submits the form. This function is here:

```js
_handleOnSubmit() {
  var input = this.refs.input_todo.getDOMNode().value;
  console.log(input);
}
```

for now it will just output our value that we have entered in the console.

> We are able to get the value of the textbox by placing a **ref** attribute on the HTML input element. Because of this we can now check `this.refs.input_todo` which contains this element. By calling `getDOMNode()` we can then ask react to get the raw HTML element and then get the value of it.

We are still not finished, the last part that we have to do is to give back this value to the parent component, this is needed since we do not allow TodoListAdd to have a state. The state of this TodoListComponent is managed through the root component, which is TodoList.

Therefor we will pass a function which will act as a sort of callback function to the root component. Adding this is really easy, we can add a property (which we will call handleOnSubmit) and call `this.props.handleOnSubmit` instead of the console.log.

To make sure that we allow this, we can add a `<MODULE>.propTypes = { }` and define our just explained function.

The resulting class looks like this:

```js
import React, { PropTypes } from 'react';

class TodoListAdd extends React.Component {
  constructor(props) {
    super(props);
  }

  _handleOnSubmit() {
    var input = this.refs.input_todo.getDOMNode().value;

    console.log(this.props);
    this.props.handleOnSubmit(input);
  }

  render() {
    return (
      <div className="TodoListAdd">
        <form onSubmit={this._handleOnSubmit.bind(this)}>
          <input type="text" ref="input_todo" />
          <input type="submit" />
        </form>
      </div>
    );
  }
}

TodoListAdd.propTypes = {
  handleOnSubmit: PropTypes.function
}

TodoListAdd.defaultProps = {
  handleOnSubmit: function () {}
}

export default TodoListAdd;
```

The code for adding the item is done, we will now go on to displaying the items. Do not worry about the items being inserted into our TodoList component state yet, this will happen on the end.

### 3.4. Finishing the TodoListItems part

Showing the TodoListItems is easy, we just check the items that were passed through an attribute and render those. The rendered items are then in turn TodoListItem components which will call the render function in the TodoListItem.js file.

#### TodoListItems.js

```js
import React, { PropTypes } from 'react';
import TodoListItem from './TodoListItem';

class TodoListItems extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { items } = this.props;

    return (
      <div className="TodoListItems">
        {
          items.map(i => {
            return <TodoListItem item={i} />
          })
        }
      </div>
    );
  }
}

TodoListItems.propTypes = {
  items: PropTypes.array
}

TodoListItems.defaultProps = {
  items: []
}

export default TodoListItems;
```

#### TodoListItem.js

```js
import React, { PropTypes } from 'react';

class TodoListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { item } = this.props;

    return (
      <div className="TodoListItem">
        {item}
      </div>
    );
  }
}

TodoListItem.propTypes = {
  item: PropTypes.string
}

TodoListItem.defaultProps = {
  item: ""
}

export default TodoListItem;
```

### 3.5. Quickly testing what we have

For a quick test of what we have now works, just change the content of your `TodoList.js` file to this:

```js
import React, { PropTypes } from 'react';
import TodoListAdd from './TodoListAdd';
import TodoListItems from './TodoListItems';

class TodoList extends React.Component {
  constructor(props) {
    super(props);
  }

  _handleAddSubmit(value) {
    console.log('Received item: ' + value);
  }

  render() {
    const items = [ "test1", "test2", "test3", "test4" ];
    return (
      <div className="TodoList">
        <TodoListAdd handleOnSubmit={this._handleAddSubmit.bind(this)}/>
        <TodoListItems items={items} />
      </div>
    );
  }
}

export default TodoList;
```

When we load the page now, we will see our items being added and when we add an item there will happen a console.log showing the added item it's value.

Of course this is not yet how we want it! We still need to define a state which will hold our items so we can perform actions on it such as adding and removing items for this component.

### 3.6. Finishing the TodoList Component

Let us finish this adding now. For that to happen, we will first have to convert our TodoList to work with states. So replace the content with this:

```js
import React, { PropTypes } from 'react';
import update from 'react/lib/update';
import TodoListAdd from './TodoListAdd';
import TodoListItems from './TodoListItems';

class TodoList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [ ]
    }
  }

  _handleAddSubmit(value) {
    var self = this;

    self.setState({
      items: update(self.state.items, {
        $push: [ value ]
      })
    });
  }

  render() {
    const { items } = this.state;

    return (
      <div className="TodoList">
        <TodoListAdd handleOnSubmit={this._handleAddSubmit.bind(this)}/>
        <TodoListItems items={items} />
      </div>
    );
  }
}

export default TodoList;
```

As you can see we changed the constructor. This one now has a state and will be able to hold our items. We also changed our render method to use the state variable and render the items from it. The last thing that we changed is the handler for the item submission, here we will set the state but we will use the update library of react to be able to use $push, which allows us to add items to an existing array.

Let's now change the rendering of the TodoItem part so that we are able to remove them and set them marked one by one.

### 3.7. Finishing the TodoItem

What we will do for the TodoItem, is add a checkbox and a removal button and bind 2 handlers. These handlers will then be pushed towards the parent component (TodoItems) which in it's turn will push a change event towards it's parent (the TodoList). We will also change the way items work by creating objects with { isChecked, value } as the keys. This way we can check the items that have been checked.

Now our **TodoItem.js** files becomes this:

#### TodoItem.js

```js
import React, { PropTypes } from 'react';

class TodoListItem extends React.Component {
  constructor(props) {
    super(props);
  }

  _handleCheckItem(e) {
    e.preventDefault();

    this.props.onCheckItem(this.props.item);
  }

  _handleRemoveItem(e) {
    e.preventDefault();

    this.props.onRemoveItem(this.props.item);
  }

  render() {
    const { item } = this.props;


    return (
      <div className="TodoListItem">
        <div className="TodoListItem-Check">
          <input type="checkbox" ref="is_checked" checked={item.isChecked} onChange={this._handleCheckItem.bind(this)}/>
        </div>
        <span>{item.value}</span>
        <button onClick={this._handleRemoveItem.bind(this)}><i className="fa fa-remove"></i></button>
      </div>
    );
  }
}

TodoListItem.propTypes = {
  item: PropTypes.string,
  onRemoveItem: PropTypes.function,
  onCheckItem: PropTypes.function
}

TodoListItem.defaultProps = {
  item: ""
}

export default TodoListItem;
```

#### TodoListItems.js

```js
import React, { PropTypes } from 'react';
import TodoListItem from './TodoListItem';

class TodoListItems extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { items, onRemoveItem, onCheckItem } = this.props;
    var self = this;

    return (
      <div className="TodoListItems">
        {
          items.map(i => {
            return <TodoListItem item={i} key={i.key} onRemoveItem={onRemoveItem} onCheckItem={onCheckItem} />
          })
        }
      </div>
    );
  }
}

TodoListItems.propTypes = {
  items: PropTypes.array,
  onRemoveItem: PropTypes.function,
  onCheckItem: PropTypes.function
}

TodoListItems.defaultProps = {
  items: []
}

export default TodoListItems;
```

and **TodoList.js**

```js
import React, { PropTypes } from 'react';
import update from 'react/lib/update';
import TodoListAdd from './TodoListAdd';
import TodoListItems from './TodoListItems';
import './TodoList.css';

class TodoList extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      items: [],
      id_counter: 0
    }
  }

  _handleAddSubmit(value) {
    var self = this;

    self.setState({
      items: update(self.state.items, {
        $push: [{
          id: self.state.id_counter,
          isChecked: false,
          value: value,

          // Set initial key based on the id and the check state
          key: "key_" + self.state.id_counter + "_" + false
        }]
      }),
      id_counter: self.state.id_counter + 1
    });
  }

  _onRemoveItem(item) {
    var self = this;

    self.setState({
      items: self.state.items.filter(i => {
        return i.id !== item.id
      })
    });
  }

  _onCheckItem(item) {
    var self = this;
    self.setState({
      items: self.state.items.map(i => {
        if (item.id === i.id) {
          i.isChecked = !item.isChecked;

          // Change key since it has been checked!
          i.key = "key_" + i.id + "_" + i.isChecked;
        }

        return i;
      })
    });
  }

  render() {
    const { items } = this.state;

    return (
      <div className="TodoList">
        <TodoListAdd handleOnSubmit={this._handleAddSubmit.bind(this)}/>
        <TodoListItems items={items} onRemoveItem={this._onRemoveItem.bind(this)} onCheckItem={this._onCheckItem.bind(this)}/>
      </div>
    );
  }
}

export default TodoList;
```

> Note the key property? This is really important in react, react will update the components based on if the key has been changed or not. So to trigger an update to this key object we have to provide a different key. The key is created based on the id of the item and the checkstate here.

## 4. Adding some CSS

So we are completely finished with the interaction part, now all that is left to do is to add some css code to make it better on the eye

```css
.TODOList {
  width: 400px;
  margin: 0 auto;
}

.TODOList h1 {
  font-size: 16px;
}

.TodoListAdd {
  border: 1px solid #d9d9d9;
}

.TodoListAdd input {
  background-color: #f5f5f5;
  border: none;
  width: calc(100% - 40px);
  box-sizing: border-box;
  height: 30px;
}

.TodoListAdd input[type='submit'] {
  width: 40px;
  border-left: 1px solid #d9d9d9;
}

.TodoListAdd input[type='text'] {
  padding: 7px 10px;
}

.TodoListItems {
  margin-top: 20px;
}

.TodoListItem {
  box-sizing: border-box;
  background-color: #f5f5f5;
  border: 1px solid #d9d9d9;
  border-bottom: none;
  height: 30px;
}

.TodoListItem:last-child {
  border-bottom: 1px solid #d9d9d9;
}

.TodoListItem button {
  height: 100%;
  float: right;
  border: none;
  padding: 0;
  margin: 0;
  width: 40px;
  border-left: 1px solid #d9d9d9;
  background-color: transparent;
}

.TodoListItem span {
  height: 100%;
  float: left;
  line-height: 30px;
  font-size: 12px;
  padding-left: 6px;
}

.TodoListItem .TodoListItem-Check {
  height: 100%;
  border-right: 1px solid #d9d9d9;
  margin-left: 5px;
  margin-right: 5px;
  width: 20px;
  float: left;
  line-height: 30px;
}

.clear {
  clear: both;
}
```

## 5. Finalize

The application is now complete and we are able to use the module, however in a real world application we need to save the state to a database when we perform an action. This will be covered in parts 4 and 5 where we will write the backend and add interaction with the backend to the react.js application.

Todo Application Tutorial React JS - Splitting it up (part 3)


## 1. Introduction

So in part 1 of this tutorial series we explained why you should use React.JS and how it works, in this part we will set up the development environment and start creating our TODOList components that we have split up in the previous article.

## 2. Development Environment - Webpack

An easy way to get started in a few minutes is by installing webpack. This is pretty straightforward once you have done the initial configuration.

Start by creating a file called `webpack.config.js` in your root folder and paste the following content into it:

```js
var path = require('path');
var webpack = require('webpack');
var node_modules_dir = path.resolve(__dirname, 'node_modules');

const AUTOPREFIXER_BROWSERS = [
  'Android 2.3',
  'Android >= 4',
  'Chrome >= 20',
  'Firefox >= 24',
  'Explorer >= 8',
  'iOS >= 6',
  'Opera >= 12',
  'Safari >= 6'
];

var config = {
  entry: {
    app: ['webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', path.resolve('src/index.js')],
  },
  output: {
    path: process.env.NODE_ENV === 'production' ? path.resolve(__dirname, 'dist') : path.resolve(__dirname, 'build'),
    filename: 'bundle.js'
  },
  module: {
    noParse: [],
    loaders: [{
        test: /.jsx?$/,
        exclude: [node_modules_dir],
        loaders: ['react-hot', 'babel']
      },
      {
        test: /.html$/,
        loader: 'file?name=[name].[ext]'
      },
      {
        test: /.css$/,
        exclude: [node_modules_dir],
        loader: 'style-loader!css-loader!cssnext-loader'
      },
      {
        test: /.txt/,
        loader: 'file-loader?name=[path][name].[ext]'
      },
      {
        test: /.gif/,
        loader: 'url-loader?limit=10000&mimetype=image/gif'
      },
      {
        test: /.jpg/,
        loader: 'url-loader?limit=10000&mimetype=image/jpg'
      },
      {
        test: /.png/,
        loader: 'url-loader?limit=10000&mimetype=image/png'
      },
      {
        test: /.svg/,
        loader: 'url-loader?limit=10000&mimetype=image/svg+xml'
      },
      {
        test: /.eot/,
        loader: 'url-loader?limit=100000&mimetype=application/vnd.ms-fontobject'
      },
      {
        test: /.woff2/,
        loader: 'url-loader?limit=100000&mimetype=application/font-woff2'
      },
      {
        test: /.woff/,
        loader: 'url-loader?limit=100000&mimetype=application/font-woff'
      },
      {
        test: /.ttf/,
        loader: 'url-loader?limit=100000&mimetype=application/font-ttf'
      }
    ]
  },
  resolve: {
    extensions: ['', '.js', '.jsx'],
    alias: {}
  },
  cssnext: {},
  postcss: [
    require('postcss-nested')(),
    require('cssnext')(),
    require('autoprefixer-core')(AUTOPREFIXER_BROWSERS)
  ],
  plugins: [
    new webpack.DefinePlugin({
      "global.GENTLY": false
    })
  ],
  node: {
    __dirname: true
  }
};

module.exports = config;
```

If we analyze this file then we can see that we will transform our Javascript with babel and the react hot loader (which allows hot reloading), and transform our css using cssnext so that we will be able to use next-gen css features such as var().

The last file we will need to define before we will be able to start our environment is the **package.json** file.

```json
{
  "name": "tutorial_react_flux_hapi",
  "version": "0.0.0",
  "private": true,
  "main": "./src/index.js",
  "devDependencies": {
    "autoprefixer-core": "^6.0.0",
    "babel-core": "^5.8.23",
    "babel-loader": "^5.3.2",
    "css-loader": "^0.17.0",
    "cssnext": "^1.8.4",
    "cssnext-loader": "^1.0.1",
    "file-loader": "^0.8.4",
    "font-awesome": "^4.4.0",
    "jsx-loader": "^0.13.2",
    "normalize.css": "^3.0.3",
    "postcss": "^5.0.4",
    "postcss-loader": "^0.6.0",
    "postcss-nested": "^1.0.0",
    "react-hot-loader": "^1.3.0",
    "style-loader": "^0.12.3",
    "url-loader": "^0.5.6",
    "webpack": "^1.12.1",
    "webpack-dev-server": "^1.10.1"
  },
  "scripts": {
    "dev": "",
    "start": "webpack-dev-server --devtool eval --progress --colors --content-base build --hot --inline",
    "deploy": "NODE_ENV=production webpack -p"
  },
  "dependencies": {
    "babel-eslint": "^4.0.5",
    "babel-runtime": "^5.8.20",
    "bootstrap": "^3.3.5",
    "eslint": "^1.1.0",
    "eslint-plugin-react": "^3.2.2",
    "flux": "^2.0.3",
    "history": "^1.9.1",
    "react": "^0.13.3",
    "react-bootstrap": "^0.24.5",
    "react-mixin": "^1.7.0",
    "react-router": "^1.0.0-rc1",
    "superagent": "^1.4.0"
  }
}
```

This file will install the dependencies and will also define our startup script for our environment.

Now let's start the environment, first run `npm install` to install the dependencies and then you start the environment itself by running `npm start`, which will call the webpack file with some startup parameters (see package.json for this definition).

You will now see that it starts the environment but with some error at the end stating that we are missing our *index.js* file. This is normal since we have not written any code yet so just ignore this for now. The environment itself is now available on `localhost:8080`.

## 3. Writing the initial React.js files

The development environment is working, so we can finally start coding! When working with react it is important to first fill in the content for the `src/index.js`, `src/index.html` and `src/routes.js` since these will be our main entry points.

* `index.js`: Will be the main entry point for the package.json, this starts react or in our case intialises the router.
* `index.html`: This file is our html file that will get loaded when we load `localhost:8080`, it will contain the hot reloader script and the javascript compiled bundle.
* `routes.js`: Here are our routes that will be used, only the / route will be used seeing that this is a 1 page app. I however included this so that your app is able to grow.

### index.js

```js
import React from 'react';
import routes from './routes';

// Install the routes
React.render(routes, document.body);
```

### index.html

```html
<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="styles/main.css">
</head>

<body>
  <script src="http://localhost:8080/webpack-dev-server.js"></script>
  <script type="text/javascript" src="bundle.js"></script>
</body>

</html>
```

### routes.js

```js
import React from 'react/addons';
import { Router, Route, IndexRoute  } from 'react-router';
import App from './components/App';
import TODOListPage from './components/pages/TODOList';

var routes = (
  <Router>
    <Route path="/" component={App}>
      <IndexRoute component={TODOListPage} />
    </Route>
  </Router>
);

export default routes;
```

## 4. Creating our Application component

The application is the mother of our components, it will load the page that we are trying to load and that was defined in the routes file. We can also use it to set the authentication state of a user if we got a login functionality.

To create this component, go to the App folder in src/components/App and create the 3 files that make a component (App.css, App.js, package.json).

Fill these in with the following content:

### package.json

```json
{
  "name": "App",
  "private": true,
  "version": "0.0.0",
  "main": "./App.js"
}
```

### App.js

```js
import React, { PropTypes } from 'react';
import Router from 'react-router';
import './App.css';
var RouteHandler = Router.RouteHandler;

class App extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div id="app" className="App-Container">
        {this.props.children}
      </div>
    );
  }
}

App.defaultProps = {

};

App.propTypes = {

};

export default App;
```

### App.css (EMPTY)

## 5. Testing the bootstrap

We start by creating our page, this way we are at least able to access our webpage. To do this, bootstrap a TODOList component in the `src/components/pages` folder. Now we will fill in the render function, here just return a new div element with as class the TODOListPage name.

For now we can put a HELLO WORLD string into the component so that we are able to test if it is all working nicely just as we want to. For that make your TODOListPage component look like this:

```js
import React, { PropTypes } from 'react';

class TODOList extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <div className="TODOList">
        HELLO WORLD
      </div>
    )
  }
}

export default TODOList;
```

When we now run `npm start` and navigate to `http://localhost:8080`, we will be presented with a nice HELLO WORLD body. Congratulations, we now got the initial bootstrap ready and we are able to start writing our TODOList components.

The part of writing the other TODOList components will be tackled in part 3.


Todo Application Tutorial React JS - Splitting it up (part 2)


## 1. Introduction

This post is part of a three part series that I am writing about how you can create a well designed and structured React.JS application. In part 1 we will delve into the basics of React.JS and how we can convert your application idea into a working React.JS component. After that we will create a small piece of backend code in Hapi that will interact with a easy to use disk adapter for simplicity (part 2) and last but not least we will then create the interaction between our component and API by using the flux architecture. So let's get started.

## 2. How components work

The vision of React is to enable us to re-use code quickly by splitting it up in components. Components are small pieces of code that are bundled in one little package. These components then have a state that contains the information about that specific component. Think for example of an input box, it's state would be the value that you put in it it's properties would be the name, placeholder, type, ...

Every component is then able to perform actions (onClick, onChange, ...) which we can define through properties. I try to keep the idea of letting the components define actions through properties and my pages through stores. That way we got a state for a page but make sure that we can re-use the components.

> It is also a good practice to bundle your css of a specific component into that component folder. This will make it possible to really drag and drop components as you go. Be careful though and keep a good naming convention since else you will end up overwriting other components. A nice practice that I follow is to name your className the name of your component and add dashes to give it more information.

By converting all our code into components we achieve multiple goals

1. Maximum reusability; we can just drag and drop and re-use components (if they are written correctly)
2. Better security; by recreating existing html components (for example input) we can prevent security issues from happening (think of xss).
3. Fast POC building; when you have a library, you can just drag and drop existing components, apply a new style and you got a POC in a few hours instead of days.
4. Complex forms are easy; ever tried to make a page with 20 input fields in Angular, plain HTML? Then you know forms are a pain! React makes this as easy as possible and we can even add validation and others by bundling it all in a single component.
5. Need updates to your application when something changes? React got you covered, by using a store and state change listeners we are able to update just the components that are needed. No need to refresh the complete page.

These advantages are in my personal opinion the future of the web. No need to juggle around bad code to prevent XSS injection attacks, easy forms and most import re-usability is what we need!

## 3. The application that we will be creating

Now let's get started building an application. For this tutorial I am going to write the "Hello World" of a web application. A todo list. Todo Lists seem simple but cover a lot of important aspects:

* CRUD Operations (Create, Read, Update and Delete)
* Dynamic flows; We see the component being added in real time allowing for a beautiful flow.
* Forms
* Some CSS of course

**Example of what we will be creating:**

![http://xaviergeerinck.com/wp-content/uploads/2015/09/TodoList-e1442575859548.png](http://xaviergeerinck.com/wp-content/uploads/2015/09/TodoList-e1442575859548.png)

## 4. Splitting it up

The most important task of React is to split up our component so we can re-use it. This is not always that easy, you have to keep in mind that the state of the component can change. But that your "page" it's store also should get updated. In case of the todo app we will take this picture as our break up:

![http://xaviergeerinck.com/wp-content/uploads/2015/09/TodoList-Marked.png](http://xaviergeerinck.com/wp-content/uploads/2015/09/TodoList-Marked.png)

Here we see a couple of components:

* **TodoList Page:** This is our page where we will put in the todolist component.
* **TodoList Component:** This is the component that we will be able to integrate into our page.
* **TodoListAdd:** The input box to add new todo items
* **TodoList:** The list of items
* **TodoListItem:** An item itself

Now we got the different components to create. Important to do now is to imagine how you would fit it in your application, are you able to incorporate it? Are you able to give it starting items? How would your page work with it? All those questions will convert into our next step, where we will define the folder structure.

## 5. Component folder structure

Every component has a folder structure, I always create 3 different files to be able to manage all the cases needed for the different components.

So to bootstrap these folders create the following files if the module is called `<MODULE>`:

* `<MODULE>.css`: The stylesheet for our component, You define all your styles for that specific component here. Please stick to clear code rules and always start your class names with `<MODULE>` for consistency and to never repeat your classnames in other files.
* `<MODULE>.js`: This is the main file, here we will define the component and how it works.
* `package.json`: The package.json is included here but set private, this is so that we are able to require the component without having to require the specific file.

Resulting in the following structure:

```bash
- <MODULE>/
    - <MODULE>.css
    - <MODULE>.js
    - package.json
```

### \<MODULE\>.js example content

```js
import React, { PropTypes } from 'react';
import './<MODULE>.css';

class <MODULE> extends React.Component {
  constructor(props) {
    super(props);
  }

    render() {
        return (
            <div className="<MODULE>">
            </div>
        );
    }
}

export default <MODULE>;
```

### \<MODULE\>.css example content

```css
@import '../variables.css';

.<MODULE>-Active {

}
```

### package.json example content

```bash
{
  "name": "<MODULE>",
  "private": true,
  "version": "0.0.0",
  "main": "./<MODULE>.js"
}
```

## 6. The folder structure

Creating the folder structure is the backbone of our application, it should be dynamic to grow over time, but not to dynamic so that we can actually understand it. While creating a private project for myself I found out over time that the following directory structure is a basic one where I can work with.
Keep in mind that there might be several things that you will not understand yet. Do not worry, these things will all be explained in the following parts. We just define the folder structure here to be able to have the architecture set up already.

> Please note that this folder structure is purely personally, you can change this to your likings but I myself found it to be working well.

### Folder structure

```bash
- src/
    - actions/            # Actions will be called by components and they will
                          # adapt a store, everything
                          # that ends on Server received a response from the server
    - components/         # Contains the components of our application (Includes pages!)
        - App/            # Main component, available on every page!
        - elements/       # consists out of all the different elements 
                          # (drag and drop elements).
                          # Try to keep these storeless so that we can reuse them!
        - layouts/        # Different page layouts, example: Frontpage, Dashboard, 
                          # Settings, ...
        - pages/          # Collection of elements bundled together to form a page 
                          # (Settings, Team, ...)
        - variables.css   # Contains CSS variables such as colours
    - constants/          # Contains the constants such as the actionTypes
    - dispatchers/        # Dispatchers, we make a difference between Server and 
                          # View actions, more about this later
    - stores/             # The stores contain the state of a page as a whole,
                          # a nice example is a AuthStore, this will contain the details 
                          # about a user and it's logged in state
    - utils/              # Contains API files, Example: AuthAPIUtils, makes API calls
    - index.js            # Entry point for our app
    - routes.js           # The routes for our app, we use react-router for this
    - index.html
- .babelrc                # babel config, set on level 1
- .gitignore              # files not to be pushed to git
- package.json            # dependencies
- README.md
- webpack.config.js       # workflow configuration for fast development
```

## 7. End Note

Now that we have the folder structure we got the basic building blocks and architecture to start building our react app. The actual building of this app will be done in part 2 of this tutorial series. There we will create the code for the components and get it to load our page. After that part we will then create an API and interact with that API through the actions.
