#2: Remove subheader links

SUMMARY.md

@@ -6,58 +6,12 @@
 
 * [Application structure](/docs/STRUCTURE.md)
 * [Common](/docs/COMMON.md)
-    * [Initialize](/docs/COMMON.md#initialize)
-    * [Configuring TypeScript](/docs/COMMON.md#configuring)
-    * [Start coding](/docs/COMMON.md#startcoding)
-    * [Linting](/docs/COMMON.md#linting)
-    * [Alternatives](/docs/COMMON.md#alternatives)
 * [Components](/docs/COMPONENTS.md)
-    * [Initialize](/docs/COMPONENTS.md#initialize)
-    * [Configuring for React](/docs/COMPONENTS.md#configuring)
-    * [Button](/docs/COMPONENTS.md#button)
-    * [TodoComponent](/docs/COMPONENTS.md#todocomponent)
-    * [Loader](/docs/COMPONENTS.md#loader)
-    * [Alternatives](/docs/COMPONENTS.md#alternatives)
 * [Redux](/docs/REDUX.md)
-    * [Initialize](/docs/REDUX.md#initialize)
-    * [Creating utilities](/docs/REDUX.md#utilities)
-    * [Reducer](/docs/REDUX.md#reducer)
-    * [Store](/docs/REDUX.md#store)
 * [Views](/docs/VIEWS.md)
-    * [IndexView](/docs/VIEWS.md#indexview)
-    * [Alternatives](/docs/VIEWS.md#alternatives)
 * [Reducers](/docs/REDUCERS.md)
-    * [IndexReducer](/docs/REDUCERS.md#indexreducer)
-    * [Connecting the reducer](/docs/REDUCERS.md#connecting)
 * [Containers](/docs/CONTAINERS.md)
-    * [Initialize](/docs/CONTAINERS.md#initialize)
-    * [IndexContainer](/docs/CONTAINERS.md#indexcontainer)
 * [Completing React](/docs/COMPLETING.md)
-    * [Initialize](/docs/COMPLETING.md#initialize)
-    * [App](/docs/COMPLETING.md#app)
-    * [Routes](/docs/COMPLETING.md#routes)
-    * [index](/docs/COMPLETING.md#index)
-    * [Index.html](/docs/COMPLETING.md#indexhtml)
-    * [Scripts](/docs/COMPLETING.md#scripts)
-    * [Alternatives](/docs/COMPLETING.md#alternatives)
 * [Styles](/docs/STYLES.md)
-    * [Initialize](/docs/STYLES.md#initialize)
-    * [Styles.scss](/docs/STYLES.md#stylesscss)
-    * [Variables](/docs/STYLES.md#variables)
-    * [Index](/docs/STYLES.md#index)
-    * [Button](/docs/STYLES.md#button)
-    * [TodoComponent](/docs/STYLES.md#todocomponent)
-    * [Loader](/docs/STYLES.md#loader)
-    * [Scripts](/docs/STYLES.md#scripts)
-    * [Alternatives](/docs/STYLES.md#alternatives)
 * [Testing](/docs/TESTING.md)
-    * [Initialize](/docs/TESTING.md#initialize)
-    * [Linting](/docs/TESTING.md#linting)
-    * [TS-Jest and enzyme-to-json](/docs/TESTING.md#tsjest)
-    * [Button](/docs/TESTING.md#button)
-    * [Loader](/docs/TESTING.md#loader)
-    * [TodoComponent](/docs/TESTING.md#todocomponent)
-    * [IndexView](/docs/TESTING.md#indexview)
-    * [IndexReducer](/docs/TESTING.md#indexreducer)
 * [Extras](/docs/EXTRAS.md)
-    * [Server-side rendering](/docs/EXTRAS.md#ssr)

docs/COMMON.md

@@ -17,7 +17,7 @@ yarn add -D typescript tslint
 3. Open your project in an editor like [Visual Studio Code](https://code.visualstudio.com/) or [Atom](https://atom.io/), though I recommend **Visual Studio Code** as it has [IntelliSense](https://en.wikipedia.org/wiki/Intelligent_code_completion).
 4. Create the file `Todo.ts` inside a folder called `common` which will in turn be inside `src` that is located at the root of your application.
 
-### <a name="configuring">Configuring TypeScript</a>
+### Configuring TypeScript
 
 Next we will configure **TypeScript** by creating a file in the root folder called [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html). `tsconfig.json` indicates to **TypeScript** that the folder is a **TypeScript** project. Start by writing the following content into your `tsconfig.json`:
 ```json
@@ -71,7 +71,7 @@ In this case we use a [glob pattern](https://en.wikipedia.org/wiki/Glob_(program
 ```
 This glob will match all files in the `src` folder (recursively) with the extension `.ts`.
 
-### <a name="startcoding">Start coding</a>
+### Start coding
 
 We will begin by creating a class that defines our Todo-items. A Todo should have an id (to differentiate between todos), a title (tha actual todo) and information on whether the todo has been completed or not. Here we see the benefit of using **TypeScript**, as it allows us to define the actual information contained in a Todo (in plain JavaScript and all other dynamically typed languages you as a developer have to keep track of such things). I'll first show you the class in its simplest form and then explain what each keyword means.
 
@@ -123,7 +123,7 @@ are otherwise the same as the first one, except the property `title` has a **typ
 
 Congratulations, you have now created your very first **TypeScript** `class`!
 
-### <a name="linting">Linting</a>
+### Linting
 
 It's time to start linting you code by using [TSLint](https://palantir.github.io/tslint/). Let's begin by creating a [Yarn script](https://yarnpkg.com/lang/en/docs/cli/run/) to run **TSLint**:
 ```json
@@ -155,7 +155,7 @@ The lint command can now be run with `yarn run lint:ts`. This will now run **TSL
 }
 ```
 
-### <a name="alternatives">Alternatives</a>
+### Alternatives
 
 Below you can find alternatives to TypeScript, if you don't fancy it as much as I:
 - [Flow](http://simplefocus.com/flowtype/)

docs/COMPLETING.md

@@ -2,7 +2,7 @@
 
 Now we finally get to build our **React**-application into something that can be run and will actually do something! Here we make the assumption that you are going to build a medium- to large-sized application and show how to do these things in a more modular way, but for smaller applications some of these parts can be merged with the `IndexView` and some can be left out completely.
 
-### <a name="initialize">Initialize</a>
+### Initialize
 
 We begin by installing new dependencies called [React Router](https://github.com/ReactTraining/react-router) and [ReactDOM](https://facebook.github.io/react/docs/react-dom.html)
 ```
@@ -16,7 +16,7 @@ yarn add -D @types/react-router @types/react-dom
 ```
 > If you want to include your **route-state** in **Redux** you might want to look at [react-router-redux](https://github.com/reactjs/react-router-redux)
 
-### <a name="app">App</a>
+### App
 
 We begin by writing an `App.ts` file into the `src/modules`-folder
 ```typescript
@@ -189,6 +189,6 @@ Now it's time to build our application to be hosted on the Internet, so add the
 ```
 which will first make sure that the folder `dist/js` is there and then build your application with **browserify**. For **browserify** we give as first argument the entry file, then a plugin (*again, **tsify** to use **TypeScript** with **browserify***) and finally after the `>` the output file name (*with it's relative path*). Apart from this script (*run by `yarn run build`*) you only need to copy your `index.html` file to the `dist`-folder and your application is complete!
 
-### <a name="alternatives">Alternatives</a>
+### Alternatives
 
 - An alternative for **browserify** is [webpack](https://webpack.github.io/), which is maybe a bit more popular these days, but I personally dislike the amount of configuration (*and the way the configuration is achieved*) it requires

docs/COMPONENTS.md

@@ -2,7 +2,7 @@
 
 Next we will start writing out our components. This will serve as a good introduction to [React](https://facebook.github.io/react/).
 
-### <a name="initialize">Initialize</a>
+### Initialize
 
 1. First we will add the needed dependencies for developing a **React** application:
 ```
@@ -14,7 +14,7 @@ yarn add -D @types/react tslint-react
 ```
 The package `@types/react` gives us type definitions for **React** and [tslint-react](https://github.com/palantir/tslint-react) allows us to use [TSLint](https://palantir.github.io/tslint/) to lint our **React** components.
 
-### <a name="configuring">Configuring for React</a>
+### Configuring for React
 
 First we will configure **TypeScript** to work with [JSX](https://facebook.github.io/react/docs/jsx-in-depth.html) by adding the following line to our [tsconfig.json](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html):
 ```json
@@ -42,7 +42,7 @@ To use **tslint-react** we add the following lines to the file `tslint.json`:
 }
 ```
 
-### <a name="button">Button</a>
+### Button
 
 We will start with the simplest component that utilizes all the tools we need for most components, a `Button`, so go ahead and create a file `Button.tsx` (*the extension defines the file as a TypeScript-file that has JSX in it*) in the folder `components`:
 
@@ -98,7 +98,7 @@ export default Button;
 ```
 we export our `Button` as the default export of the module.
 
-### <a name="todocomponent">TodoComponent</a>
+### TodoComponent
 
 Next we will define a component to visualize our `Todo`-class from the previous section, creating a file called `TodoComponent.tsx` in the `components`-folder:
 ```typescript
@@ -135,7 +135,7 @@ which imports our `Todo`-class using a relative path (*the compiler will look fo
 ```
 which defines a function called `setDone` that takes one argument, which is a `number`.
 
-### <a name="loader">Loader</a>
+### Loader
 
 Lastly we implement our third and simplest component, called a `Loader`, in a file called `Loader.tsx` in the `components`-directory
 ```typescript
@@ -151,7 +151,7 @@ export default Loader;
 ```
 which uses all previously introduced tools, except this time we have defined the **props** it receives as [undefined](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-0.html), meaning that it does not take any **props** at all.
 
-### <a name="alternatives">Alternatives</a>
+### Alternatives
 
 Below you can find alternatives to **React**, although I would suggest **React** unless you have specific needs, which other frameworks solve better, as it also allows for [mobile development with React Native](https://facebook.github.io/react-native/).
 - [AngularJS](https://angularjs.org/), possibly the most popular framework after [React](https://facebook.github.io/react/)

docs/CONTAINERS.md

@@ -2,7 +2,7 @@
 
 Next up we want to bind our [Views](/VIEWS.md) to our [Reducers](/REDUCERS.md), a.k.a. define how we get the **props** from our [state](http://redux.js.org/docs/basics/Reducers.html).
 
-### <a name="initialize">Initialize</a>
+### Initialize
 
 First up we need to add a new dependency, [react-redux](https://github.com/reactjs/react-redux) to connect our **React** views to our **state**
 ```
@@ -13,7 +13,7 @@ and the type definitions for it
 yarn add -D @types/react-redux
 ```
 
-### <a name="indexcontainer">IndexContainer</a>
+### IndexContainer
 
 We begin by creating a file called `IndexContainer.ts` inside our `index`-folder inside `src/modules`
 > All containers will have the same "prefix" as their accompanied **views**, a.k.a. `[Pagename]Container.ts`

docs/REDUCERS.md

@@ -2,7 +2,7 @@
 
 Now we build our business logic, also known as **reducers**. Stay calm, this will be a bit more complicated then anything before.
 
-### <a name="indexreducer">IndexReducer</a>
+### IndexReducer
 
 We begin by creating a file called `IndexReducer.ts` in the `src/modules/index`-folder
 > Our **reducers** follow the naming pattern of `[Foldername]Reducer`
@@ -302,7 +302,7 @@ Next we do the actual logic which all **reducers** are built upon
 which is a [`switch`](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/switch)-statement over the type-property of the incoming **action**. In each `case` we do something (*except the `default`-one, where you traditionally just return the incoming **state***) to add value to that **action**, such as setting the `title` to the `payload` in the **action** in case the **action** is a `SET_TITLE`-action. Notice how we are using the [spread syntax](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Operators/Spread_operator) to immutably create a new version of the state, thus holding true to the immutability of **reducers**.
 > Other options are to use [`Object.assign({}, ...)`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) or [Immutable](https://facebook.github.io/immutable-js/)
 
-### <a name="connecting">Connecting the reducer</a>
+### Connecting the reducer
 
 Remember our [root-reducer](/REDUX.md#reducer)? Now we connect our `IndexReducer` to it.
 

docs/REDUX.md

@@ -3,7 +3,7 @@
 Next we will setup [redux](http://redux.js.org/) to handle the state for our application (*redux allows us to keep our components pure, helping testing and predictability*).
 > You can think of **redux** as an implementation of the [Flux](https://facebook.github.io/flux/) pattern.
 
-### <a name="initialize">Initialize</a>
+### Initialize
 
 1. This time we will only need to add the necessary dependencies to allow development with **redux**:
 ```
@@ -12,7 +12,7 @@ yarn add redux redux-observable rxjs
 *This time we don't need to add type-packages, as all of the added dependencies are either built with [TypeScript](https://www.typescriptlang.org/) or contain type definitions for it.*
 > [Redux-observable](https://redux-observable.js.org/) is our choice for allowing side effects, such as [AJAX](https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started)-calls in **redux**. [RxJS](http://reactivex.io/) is a peer dependency for **redux-observable**. If you want something else you can check the [alternatives](#alternatives).
 
-### <a name="utils">Creating utilities</a>
+### Creating utilities
 
 We will begin by creating a file called `utils.js` inside the folder `redux` in `src`. This file will contain helpers for our **redux** functionalities and will serve as good introduction into one of its most basic building blocks. The file will initially look like this:
 ```typescript
@@ -21,7 +21,7 @@ export const DefaultAction: DefaultAction = { type: '' };
 ```
 [Actions](http://redux.js.org/docs/basics/Actions.html) are the only way to send new content to the **redux**-state, and are usually in the form of an object with the properties `type` (*a unique string*) and an optional `payload` (*something to pass to the state*). Here we have defined a `DefaultAction` which will allow our reducers to pass unnecessary actions forward [without losing type-safety](https://spin.atomicobject.com/2016/09/27/typed-redux-reducers-typescript-2-0/). The empty string as a `type` ensures that it doesn't intersect with any of our own actions.
 
-### <a name="reducer">Reducer</a>
+### Reducer
 
 Now we will define our root-reducer in a file called `reducer.ts` inside the folder `redux`:
 ```typescript
@@ -48,7 +48,7 @@ This file will allow us to export all of the following:
 - Our combined [epics](https://redux-observable.js.org/docs/basics/Epics.html) (*more about epics later*) made with [combineEpics](https://redux-observable.js.org/docs/api/combineEpics.html)
 - The type of all of our actions
 
-### <a name="store">Store</a>
+### Store
 
 Now we will define our store creator (*having it as a separate function helps us in doing [server-side rendering](https://github.com/reactjs/redux/blob/master/docs/recipes/ServerRendering.md), but if you don't want to do it you can define this function later*) in a file called `store.ts` inside the `redux`-folder:
 ```typescript
@@ -93,7 +93,7 @@ export default configureStore;
 
 Now we have everything set up to start doing the beef of the application, a.k.a. the views!
 
-### <a name="alternatives">Alternatives</a>
+### Alternatives
 
 If **redux** doesn't float your boat, you can always try [MobX](https://github.com/mobxjs/mobx), but **redux** is maybe the more used one at this point.
 

docs/STYLES.md

@@ -2,7 +2,7 @@
 
 Next up we are going to add styles to our not-so-fancy-yet application. We are going to use [Sass](http://sass-lang.com/) as it's perhaps the most widely used **CSS preprocessor** (*and you should use one, as it helps you with managing your styles*).
 
-### <a name="initialize">Initialize</a>
+### Initialize
 
 First we will again add some dependencies to our project
 ```
@@ -26,7 +26,7 @@ rules:
 ```
 from which the first command `merge-default-rules` indicates that I do not want to use the default rules as a basis, the second defines that for [BEM naming](http://getbem.com/naming/) the maximum depth is four, the third that I don't allow class names that start with an underscore and that they must follow `hyphenatedbem`-convention, the fourth that I want declarations to be before nesting and the last that extends must be bedore declarations.
 
-### <a name="stylesscss">Styles.scss</a>
+### Styles.scss
 
 All of our style-sheets will live inside a folder `src/styles` and the first will be the "main"-stylesheet, called `styles.scss` (*`scss` is the **Sass** file extension*)
 ```scss
@@ -47,7 +47,7 @@ and at this point it only [imports](http://sass-lang.com/guide) our other (*soon
 ```
 which will include the font from Google's CDN.
 
-### <a name="variables">Variables</a>
+### Variables
 
 Next we will define those things we call `variables` in **Sass** in their own file called `_variables.scss`
 ```scss
@@ -289,7 +289,7 @@ Now to get the `build`-script to also build our styles
 ```
 where we again rename our old `build`-script into `build:client` and then create a new script `build:sass`. Again we first make sure that the folder exists and then just build the **Sass**-files with **node-sass**'s default settings (*you can add compatibility and other plugins there as well*). The new `build`-script will simply first build the **Sass**-files and then the **TypeScript**-files.
 
-### <a name="alternatives">Alternatives</a>
+### Alternatives
 
 - [Less](http://lesscss.org/), another CSS preprocessor
 - [Stylus](http://stylus-lang.com/), the "third" CSS preprocessor (*Sass and Less are older*)