Lynn

React & Typescript with Webpack – gitconnected

原文链接: levelup.gitconnected.com

Homepage gitconnected

跟上 Sign inGet started Go to the profile of Richard Oliver Bray

Richard Oliver BrayBlockedUnblockFollowFollowing

设计私人喷气式飞机产品@Stratajet事件组织者,发言人和拍照工作 http://richbray.me/ 1月10日


React & Typescript with Webpack

我花费了大量的时间用于Angular2 的学习并且乐于使用其中的Typescript语言。因此自从我下定决心去学习React的时候我发现它的思想是非常寻常的,没有类型定义,接口,枚举和其他所有Typescript中所具备的良好元素。我做过大量的实验并且发现如何更好的将Typescript嵌套到React项目中去,现在我将在接下来的文章中把我的发现分享给任何一个想实现此中功能的人。

我之前曾经写过一篇名为《moving from gulp to webpack(如何将gulp项目移植到webpack)》的文章,如果你曾经有阅读过的话,你可能会发现这两篇文章的某些相似之处。如果你没有阅读过这篇文章但是你又想对webpack的工作原理有更深的了解,我强烈建议你阅读一下这篇文章。

下面让我们开始吧。

在阅读这篇文章之前,你首先要具备如下条件:你的个人计算机上安装了版本8及以上的node工具,你对React的工作原理有一定的了解,知道如何使用终端命令行工具。

通过在你的终端中键入如下命令新建一个名为“react-typescript”的文件夹

$ mkdir react-typescript

在文件中再新建一个名为“src”的文件夹,然后回到终端;

$ touch webpack.config.js index.html
$ npm init -y

最后一个命令将会在默认文件夹中创建一个名为package.json的文件,如果你需要改变文件的位置当然也十分欢迎。这个文件包含了一些本工程的基本配置,现在让我们一起来编写这个文件。

打开你已经创建的webpack.config.js文件并在其中写一些简单的webpack初始化代码。

我已经在this article 这篇文章中提到过以上每个步骤都做了什么,但是他们中的大部分都是意思很明显的。

后面我们在src中新建一个名为index.tsx的入口文件,就像"./src/index/tsx"这样的结构。虽然我们还没有创建这个文件但是稍后会的。.tsx扩展表示这是一个Typescript的.jsx版本文件,就像.ts被用来代替.js。但是在这篇文章中我们暂时不会使用这种方式。当然啦,输出文件的话,我们会将所有的东西都放在一个名为build的文件中,它将通过path导出文件的根目录,将所有的js文件都合并到bundle.js文件中。

现在让我们在src文件夹中创建index.tsx文件并且将如下代码写入其中。

你也许会使用如下这种方式将react导入regular js文件中

import React from "react";

但是Typescript的话,你需要使用import all()代替React。这段代码使你只需要在一个非常小的React文件中进行黏贴,只是放一个container类的dom节点中写入‘hello’这个词。让我们来在根目录中创建一个名为index.html的文件中并写入这个节点。

现在我们需要通过npm安装所有之前提到的工具,首先安装react模块

$ npm i react react-dom

然后安装webpack作为项目依赖

$ npm i webpack webpack-dev-server@2.9.7 -D

你或许已经注意到我们指定了安装的webpack-dev-server的版本那是因为在2.10.0中有一个breaking bug。如果恰好这边有新的版本使你可跳过这个版本,那么也非常欢迎你去安装那个版本。

好啦,我们已经有了tyoescript文件,但是问题是现在webpack还不知道如何去解析它。现在让我们来赋予它这项功能。安装开发依赖awesome-typescript-loader

$ npm i typescript awesome-typescript-loader -D

你可以阅读here来知道为什么用这会比使用ts-loader更好。编辑webpack.config文件将相应的模块部分规则加入其中。

到这,我们在根目录创建一个名为tsconfig.json的文件,它将会告诉webpack在哪里去寻找到typescript文件。

现在我们需要再多安装几个模块依赖,默认的React的安装不会有关于包中用到的何种方法的信息,我们可以安装继承自React和React DOM的types。

$ npm i @types/react @types/react-dom -D

最后要做的编辑工作就是更新package.json文件将test替换为"start": "webpack-dev-server"

现在你可以通过在命令行中输入npm start(或者在yarn中键入yarn start)来启动服务器。在浏览器中输入localhost:8080,看,你可以看到h1样式的“Hello”

现在你可以通过在命令行中输入npm start(或者在yarn中键入yarn start)来启动服务器。在浏览器中输入localhost:8080,看,你可以看到h1样式的“Hello”。

那就对了现在我们已经安装了基本的typescript、webpack和React。一个基本的react项目的话,你可能还会有更复杂的组件,用来debugging的源码图,样式,有可能的话不需要在主页面的bundle.js中编写太复杂的代码。我们将会在next part of this tutorial本文章的下一部分中进行处理

一拍,两拍,三拍,四十?

通过这样一点点儿的打拍子,你可以通过这样方式给我们发出你也在坚持着学习的信号。

209

gitconnected我们社区发布有关于软件发展,设计和数据科学的沿革。gitconnected——开发者和软件工程师的专属社区https://gitconnected.com

不要错过来自于gitconnected的文章哦如果你想注册成为社区的用户learn more

获取最新的更新

.u-accentColor--borderLight {border-color: #6089BA !important;} 
.u-accentColor--borderNormal {border-color: #6089BA !important;} 
.u-accentColor--borderDark {border-color: #55769D !important;} 
.u-accentColor--iconLight .svgIcon,.u-accentColor--iconLight.svgIcon {fill: #6089BA !important;} 
.u-accentColor--iconNormal .svgIcon,.u-accentColor--iconNormal.svgIcon {fill: #6089BA !important;} 
.u-accentColor--iconDark .svgIcon,.u-accentColor--iconDark.svgIcon {fill: #55769D !important;} 
.u-accentColor--textNormal {color: #55769D !important;} 
.u-accentColor--hoverTextNormal:hover {color: #55769D !important;} 
.u-accentColor--textNormal.u-accentColor--textDarken:hover {color: #4F6C8E !important;} 
.u-accentColor--textDark {color: #4F6C8E !important;} 
.u-accentColor--backgroundLight {background-color: #6089BA !important;} 
.u-accentColor--backgroundNormal {background-color: #6089BA !important;} 
.u-accentColor--backgroundDark {background-color: #55769D !important;} 
.u-accentColor--buttonDark {border-color: #55769D !important; color: #4F6C8E !important;} 
.u-accentColor--buttonDark:hover {border-color: #4F6C8E !important;} 
.u-accentColor--buttonDark .icon:before,.u-accentColor--buttonDark .svgIcon{color: #55769D !important; fill: #55769D !important;} 
.u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: #6089BA !important; color: #55769D !important;} 
.u-accentColor--buttonNormal:hover {border-color: #55769D !important;} 
.u-accentColor--buttonNormal .icon:before,.u-accentColor--buttonNormal .svgIcon{color: #6089BA !important; fill: #6089BA !important;} 
.u-accentColor--buttonNormal.button--filled .icon:before,.u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-accentColor--buttonDark.button--filled,.u-accentColor--buttonDark.button--withChrome.is-active,.u-accentColor--fillWhenActive.is-active {background-color: #55769D !important; border-color: #55769D !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: #6089BA !important; border-color: #6089BA !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;}
.postArticle.is-withAccentColors .markup--user,.postArticle.is-withAccentColors .markup--query {color: #55769D !important;}
.u-tintBgColor {background-color: rgba(57, 98, 145, 1) !important;}
.u-tintBgColor .u-fadeLeft:before {background-image: linear-gradient(to right, rgba(57, 98, 145, 1) 0%, rgba(57, 98, 145, 0) 100%) !important;}
.u-tintBgColor .u-fadeRight:after {background-image: linear-gradient(to right, rgba(57, 98, 145, 0) 0%, rgba(57, 98, 145, 1) 100%) !important;} 
.u-tintSpectrum .u-baseColor--borderLight {border-color: #A0B7D4 !important;} 
.u-tintSpectrum .u-baseColor--borderNormal {border-color: #C5D5EB !important;} 
.u-tintSpectrum .u-baseColor--borderDark {border-color: #E8F2FF !important;} 
.u-tintSpectrum .u-baseColor--iconLight .svgIcon,.u-tintSpectrum .u-baseColor--iconLight.svgIcon {fill: #A0B7D4 !important;} 
.u-tintSpectrum .u-baseColor--iconNormal .svgIcon,.u-tintSpectrum .u-baseColor--iconNormal.svgIcon {fill: #C5D5EB !important;} 
.u-tintSpectrum .u-baseColor--iconDark .svgIcon,.u-tintSpectrum .u-baseColor--iconDark.svgIcon {fill: #E8F2FF !important;} 
.u-tintSpectrum .u-baseColor--textNormal {color: #C5D5EB !important;} .u-tintSpectrum .u-baseColor--textNormal.u-baseColor--textDarken:hover {color: #FAFFFF !important;} 
.u-tintSpectrum .u-baseColor--textDark {color: #FAFFFF !important;} .u-tintSpectrum .u-baseColor--textDarker {color: #FAFFFF !important;} 
.u-tintSpectrum .u-baseColor--backgroundLight {background-color: #A0B7D4 !important;} 
.u-tintSpectrum .u-baseColor--backgroundNormal {background-color: #C5D5EB !important;} 
.u-tintSpectrum .u-baseColor--backgroundDark {background-color: #E8F2FF !important;} 
.u-tintSpectrum .u-baseColor--buttonLight {border-color: #A0B7D4 !important; color: #A0B7D4 !important;} 
.u-tintSpectrum .u-baseColor--buttonLight:hover {border-color: #A0B7D4 !important;} 
.u-tintSpectrum .u-baseColor--buttonLight .icon:before,.u-tintSpectrum .u-baseColor--buttonLight .svgIcon {color: #A0B7D4 !important; fill: #A0B7D4 !important;} 
.u-tintSpectrum .u-baseColor--buttonDark {border-color: #E8F2FF !important; color: #FAFFFF !important;} 
.u-tintSpectrum .u-baseColor--buttonDark:hover {border-color: #FAFFFF !important;} 
.u-tintSpectrum .u-baseColor--buttonDark .icon:before,.u-tintSpectrum .u-baseColor--buttonDark .svgIcon {color: #E8F2FF !important; fill: #E8F2FF !important;} 
.u-tintSpectrum .u-baseColor--buttonNormal {border-color: #C5D5EB !important; color: #C5D5EB !important;} 
.u-tintSpectrum .u-baseColor--buttonNormal:hover {border-color: #E8F2FF !important;} 
.u-tintSpectrum .u-baseColor--buttonNormal .icon:before,.u-tintSpectrum .u-baseColor--buttonNormal .svgIcon {color: #C5D5EB !important; fill: #C5D5EB !important;} 
.u-tintSpectrum .u-baseColor--buttonDark.button--filled,.u-tintSpectrum .u-baseColor--buttonDark.button--withChrome.is-active {background-color: #E8F2FF !important; border-color: #E8F2FF !important; color: rgba(57, 98, 145, 1) !important; fill: rgba(57, 98, 145, 1) !important;} 
.u-tintSpectrum .u-baseColor--buttonNormal.button--filled,.u-tintSpectrum .u-baseColor--buttonNormal.button--withChrome.is-active {background-color: #C5D5EB !important; border-color: #C5D5EB !important; color: rgba(57, 98, 145, 1) !important; fill: rgba(57, 98, 145, 1) !important;} 
.u-tintSpectrum .u-baseColor--link {color: #C5D5EB !important;} 
.u-tintSpectrum .u-baseColor--link.link--darkenOnHover:hover {color: #FAFFFF !important;} 
.u-tintSpectrum .u-baseColor--link.link--darken:hover,.u-tintSpectrum .u-baseColor--link.link--darken:focus,.u-tintSpectrum .u-baseColor--link.link--darken:active {color: #FAFFFF !important;} 
.u-tintSpectrum .u-baseColor--link.link--dark {color: #FAFFFF !important;} 
.u-tintSpectrum .u-baseColor--link.link--dark.link--darken:hover,.u-tintSpectrum .u-baseColor--link.link--dark.link--darken:focus,.u-tintSpectrum .u-baseColor--link.link--dark.link--darken:active {color: #FAFFFF !important;} 
.u-tintSpectrum .u-baseColor--link.link--darker {color: #FAFFFF !important;} 
.u-tintSpectrum .u-baseColor--placeholderNormal ::-webkit-input-placeholder {color: #A0B7D4;} .u-tintSpectrum .u-baseColor--placeholderNormal ::-moz-placeholder {color: #A0B7D4;} 
.u-tintSpectrum .u-baseColor--placeholderNormal :-ms-input-placeholder {color: #A0B7D4;} 
.u-tintSpectrum .svgIcon--logoNew path:nth-child(1) {stroke: none !important; fill: #6586AE !important;} 
.u-tintSpectrum .svgIcon--logoNew path:nth-child(2) {stroke: none !important; fill: #7A97BB !important;} 
.u-tintSpectrum .svgIcon--logoNew path:nth-child(3) {stroke: none !important; fill: #A0B7D4 !important;} 
.u-tintSpectrum .svgIcon--logoNew path:nth-child(4) {stroke: none !important; fill: #C5D5EB !important;} 
.u-tintSpectrum .svgIcon--logoWordmark {stroke: none !important; fill: #FAFFFF !important;} 
.u-tintSpectrum .svgIcon--logoMonogram {stroke: none !important; fill: #FAFFFF !important;} 
.u-tintSpectrum .ui-h1,.u-tintSpectrum .ui-h2,.u-tintSpectrum .ui-h3,.u-tintSpectrum .ui-h4,.u-tintSpectrum .ui-brand1,.u-tintSpectrum .ui-brand2,.u-tintSpectrum .ui-captionStrong {color: #FAFFFF !important; fill: #FAFFFF !important;} 
.u-tintSpectrum .ui-body,.u-tintSpectrum .ui-caps {color: #FAFFFF !important; fill: #FAFFFF !important;} 
.u-tintSpectrum .ui-summary,.u-tintSpectrum .ui-caption {color: #A0B7D4 !important; fill: #A0B7D4 !important;} 
.u-tintSpectrum .u-accentColor--borderLight {border-color: #A0B7D4 !important;} 
.u-tintSpectrum .u-accentColor--borderNormal {border-color: #C5D5EB !important;} .u-tintSpectrum .u-accentColor--borderDark {border-color: #E8F2FF !important;} 
.u-tintSpectrum .u-accentColor--iconLight .svgIcon,.u-tintSpectrum .u-accentColor--iconLight.svgIcon {fill: #A0B7D4 !important;} 
.u-tintSpectrum .u-accentColor--iconNormal .svgIcon,.u-tintSpectrum .u-accentColor--iconNormal.svgIcon {fill: #C5D5EB !important;} 
.u-tintSpectrum .u-accentColor--iconDark .svgIcon,.u-tintSpectrum .u-accentColor--iconDark.svgIcon {fill: #E8F2FF !important;} 
.u-tintSpectrum .u-accentColor--textNormal {color: #C5D5EB !important;} 
.u-tintSpectrum .u-accentColor--hoverTextNormal:hover {color: #C5D5EB !important;} 
.u-tintSpectrum .u-accentColor--textNormal.u-accentColor--textDarken:hover {color: #FAFFFF !important;} 
.u-tintSpectrum .u-accentColor--textDark {color: #FAFFFF !important;} 
.u-tintSpectrum .u-accentColor--backgroundLight {background-color: #A0B7D4 !important;} 
.u-tintSpectrum .u-accentColor--backgroundNormal {background-color: #C5D5EB !important;} 
.u-tintSpectrum .u-accentColor--backgroundDark {background-color: #E8F2FF !important;} 
.u-tintSpectrum .u-accentColor--buttonDark {border-color: #E8F2FF !important; color: #FAFFFF !important;} 
.u-tintSpectrum .u-accentColor--buttonDark:hover {border-color: #FAFFFF !important;} 
.u-tintSpectrum .u-accentColor--buttonDark .icon:before,.u-tintSpectrum .u-accentColor--buttonDark .svgIcon{color: #E8F2FF !important; fill: #E8F2FF !important;} 
.u-tintSpectrum .u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: #C5D5EB !important; color: #C5D5EB !important;} 
.u-tintSpectrum .u-accentColor--buttonNormal:hover {border-color: #E8F2FF !important;} 
.u-tintSpectrum .u-accentColor--buttonNormal .icon:before,.u-tintSpectrum .u-accentColor--buttonNormal .svgIcon{color: #C5D5EB !important; fill: #C5D5EB !important;} 
.u-tintSpectrum .u-accentColor--buttonNormal.button--filled .icon:before,.u-tintSpectrum .u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(57, 98, 145, 1) !important; fill: rgba(57, 98, 145, 1) !important;} 
.u-tintSpectrum .u-accentColor--buttonDark.button--filled,.u-tintSpectrum .u-accentColor--buttonDark.button--withChrome.is-active,.u-tintSpectrum .u-accentColor--fillWhenActive.is-active {background-color: #E8F2FF !important; border-color: #E8F2FF !important; color: rgba(57, 98, 145, 1) !important; fill: rgba(57, 98, 145, 1) !important;} 
.u-tintSpectrum .u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-tintSpectrum .u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: #C5D5EB !important; border-color: #C5D5EB !important; color: rgba(57, 98, 145, 1) !important; fill: rgba(57, 98, 145, 1) !important;} 
.u-tintSpectrum .postArticle.is-withAccentColors .markup--user,.u-tintSpectrum .postArticle.is-withAccentColors .markup--query {color: #C5D5EB !important;} 
.u-accentColor--highlightFaint {background-color: rgba(232, 242, 255, 1) !important;} 
.u-accentColor--highlightStrong.is-active .svgIcon {fill: rgba(196, 228, 255, 1) !important;} 
.postArticle.is-withAccentColors .markup--quote.is-other {background-color: rgba(232, 242, 255, 1) !important;} 
body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-other {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(232, 242, 255, 1), rgba(232, 242, 255, 1));} .postArticle.is-withAccentColors .markup--quote.is-me {background-color: rgba(212, 234, 255, 1) !important;} 
body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-me {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(212, 234, 255, 1), rgba(212, 234, 255, 1));} .postArticle.is-withAccentColors .markup--quote.is-targeted {background-color: rgba(196, 228, 255, 1) !important;} 
body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-targeted {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(196, 228, 255, 1), rgba(196, 228, 255, 1));} .postArticle.is-withAccentColors .markup--quote.is-selected {background-color: rgba(196, 228, 255, 1) !important;} 
body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--quote.is-selected {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(196, 228, 255, 1), rgba(196, 228, 255, 1));} 
.postArticle.is-withAccentColors .markup--highlight {background-color: rgba(196, 228, 255, 1) !important;} 
body.is-withMagicUnderlines .postArticle.is-withAccentColors .markup--highlight {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(196, 228, 255, 1), rgba(196, 228, 255, 1));}
.u-baseColor--iconNormal.avatar-halo {fill: rgba(0, 0, 0, 0.4980392156862745) !important;}
.u-imageBgColor {background-color: rgba(0, 0, 0, 0.24705882352941178);} 
.u-imageSpectrum .u-baseColor--borderLight {border-color: rgba(255, 255, 255, 0.6980392156862745) !important;} 
.u-imageSpectrum .u-baseColor--borderNormal {border-color: rgba(255, 255, 255, 0.8980392156862745) !important;} 
.u-imageSpectrum .u-baseColor--borderDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-baseColor--iconLight .svgIcon,.u-imageSpectrum .u-baseColor--iconLight.svgIcon {fill: rgba(255, 255, 255, 0.8) !important;} 
.u-imageSpectrum .u-baseColor--iconNormal .svgIcon,.u-imageSpectrum .u-baseColor--iconNormal.svgIcon {fill: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-baseColor--iconDark .svgIcon,.u-imageSpectrum .u-baseColor--iconDark.svgIcon {fill: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--textNormal {color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-baseColor--textNormal.u-baseColor--textDarken:hover {color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--textDark {color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--textDarker {color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--backgroundLight {background-color: rgba(255, 255, 255, 0.8980392156862745) !important;} 
.u-imageSpectrum .u-baseColor--backgroundNormal {background-color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-baseColor--backgroundDark {background-color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--buttonLight {border-color: rgba(255, 255, 255, 0.6980392156862745) !important; color: rgba(255, 255, 255, 0.8) !important;} 
.u-imageSpectrum .u-baseColor--buttonLight:hover {border-color: rgba(255, 255, 255, 0.6980392156862745) !important;} 
.u-imageSpectrum .u-baseColor--buttonLight .icon:before,.u-imageSpectrum .u-baseColor--buttonLight .svgIcon {color: rgba(255, 255, 255, 0.8) !important; fill: rgba(255, 255, 255, 0.8) !important;} 
.u-imageSpectrum .u-baseColor--buttonDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--buttonDark:hover {border-color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--buttonDark .icon:before,.u-imageSpectrum .u-baseColor--buttonDark .svgIcon {color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--buttonNormal {border-color: rgba(255, 255, 255, 0.8980392156862745) !important; color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-baseColor--buttonNormal:hover {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-baseColor--buttonNormal .icon:before,.u-imageSpectrum .u-baseColor--buttonNormal .svgIcon {color: rgba(255, 255, 255, 0.9490196078431372) !important; fill: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-baseColor--buttonDark.button--filled,.u-imageSpectrum .u-baseColor--buttonDark.button--withChrome.is-active {background-color: rgba(255, 255, 255, 1) !important; border-color: rgba(255, 255, 255, 1) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} 
.u-imageSpectrum .u-baseColor--buttonNormal.button--filled,.u-imageSpectrum .u-baseColor--buttonNormal.button--withChrome.is-active {background-color: rgba(255, 255, 255, 0.9490196078431372) !important; border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} 
.u-imageSpectrum .u-baseColor--link {color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-baseColor--link.link--darkenOnHover:hover {color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--link.link--darken:hover,.u-imageSpectrum .u-baseColor--link.link--darken:focus,.u-imageSpectrum .u-baseColor--link.link--darken:active {color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--link.link--dark {color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--link.link--dark.link--darken:hover,.u-imageSpectrum .u-baseColor--link.link--dark.link--darken:focus,.u-imageSpectrum .u-baseColor--link.link--dark.link--darken:active {color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--link.link--darker {color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-baseColor--placeholderNormal ::-webkit-input-placeholder {color: rgba(255, 255, 255, 0.8);} 
.u-imageSpectrum .u-baseColor--placeholderNormal ::-moz-placeholder {color: rgba(255, 255, 255, 0.8);} .u-imageSpectrum .u-baseColor--placeholderNormal :-ms-input-placeholder {color: rgba(255, 255, 255, 0.8);} 
.u-imageSpectrum .svgIcon--logoNew path:nth-child(1) {stroke: none !important; fill: rgba(255, 255, 255, 0.4) !important;} 
.u-imageSpectrum .svgIcon--logoNew path:nth-child(2) {stroke: none !important; fill: rgba(255, 255, 255, 0.4980392156862745) !important;} 
.u-imageSpectrum .svgIcon--logoNew path:nth-child(3) {stroke: none !important; fill: rgba(255, 255, 255, 0.6980392156862745) !important;} 
.u-imageSpectrum .svgIcon--logoNew path:nth-child(4) {stroke: none !important; fill: rgba(255, 255, 255, 0.8980392156862745) !important;} 
.u-imageSpectrum .svgIcon--logoWordmark {stroke: none !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .svgIcon--logoMonogram {stroke: none !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .ui-h1,.u-imageSpectrum .ui-h2,.u-imageSpectrum .ui-h3,.u-imageSpectrum .ui-h4,.u-imageSpectrum .ui-brand1,.u-imageSpectrum .ui-brand2,.u-imageSpectrum .ui-captionStrong {color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .ui-body,.u-imageSpectrum .ui-caps {color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .ui-summary,.u-imageSpectrum .ui-caption {color: rgba(255, 255, 255, 0.8) !important; fill: rgba(255, 255, 255, 0.8) !important;} 
.u-imageSpectrum .u-accentColor--borderLight {border-color: rgba(255, 255, 255, 0.6980392156862745) !important;} 
.u-imageSpectrum .u-accentColor--borderNormal {border-color: rgba(255, 255, 255, 0.8980392156862745) !important;} 
.u-imageSpectrum .u-accentColor--borderDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-accentColor--iconLight .svgIcon,.u-imageSpectrum .u-accentColor--iconLight.svgIcon {fill: rgba(255, 255, 255, 0.8) !important;} 
.u-imageSpectrum .u-accentColor--iconNormal .svgIcon,.u-imageSpectrum .u-accentColor--iconNormal.svgIcon {fill: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-accentColor--iconDark .svgIcon,.u-imageSpectrum .u-accentColor--iconDark.svgIcon {fill: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-accentColor--textNormal {color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-accentColor--hoverTextNormal:hover {color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-accentColor--textNormal.u-accentColor--textDarken:hover {color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-accentColor--textDark {color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-accentColor--backgroundLight {background-color: rgba(255, 255, 255, 0.8980392156862745) !important;} 
.u-imageSpectrum .u-accentColor--backgroundNormal {background-color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-accentColor--backgroundDark {background-color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-accentColor--buttonDark {border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-accentColor--buttonDark:hover {border-color: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-accentColor--buttonDark .icon:before,.u-imageSpectrum .u-accentColor--buttonDark .svgIcon{color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-imageSpectrum .u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: rgba(255, 255, 255, 0.8980392156862745) !important; color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-accentColor--buttonNormal:hover {border-color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-accentColor--buttonNormal .icon:before,.u-imageSpectrum .u-accentColor--buttonNormal .svgIcon{color: rgba(255, 255, 255, 0.9490196078431372) !important; fill: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-accentColor--buttonNormal.button--filled .icon:before,.u-imageSpectrum .u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} 
.u-imageSpectrum .u-accentColor--buttonDark.button--filled,.u-imageSpectrum .u-accentColor--buttonDark.button--withChrome.is-active,.u-imageSpectrum .u-accentColor--fillWhenActive.is-active {background-color: rgba(255, 255, 255, 1) !important; border-color: rgba(255, 255, 255, 1) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} 
.u-imageSpectrum .u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-imageSpectrum .u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: rgba(255, 255, 255, 0.9490196078431372) !important; border-color: rgba(255, 255, 255, 0.9490196078431372) !important; color: rgba(0, 0, 0, 0.24705882352941178) !important; fill: rgba(0, 0, 0, 0.24705882352941178) !important;} 
.u-imageSpectrum .postArticle.is-withAccentColors .markup--user,.u-imageSpectrum .postArticle.is-withAccentColors .markup--query {color: rgba(255, 255, 255, 0.9490196078431372) !important;} 
.u-imageSpectrum .u-accentColor--highlightFaint {background-color: rgba(255, 255, 255, 0.2) !important;} 
.u-imageSpectrum .u-accentColor--highlightStrong.is-active .svgIcon {fill: rgba(255, 255, 255, 0.6) !important;} 
.postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-other {background-color: rgba(255, 255, 255, 0.2) !important;} 
body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-other {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.2));} 
.postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-me {background-color: rgba(255, 255, 255, 0.4) !important;} 
body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-me {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.4));} 
.postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-targeted {background-color: rgba(255, 255, 255, 0.6)!important;} 
body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-targeted {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));} 
.postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-selected {background-color: rgba(255, 255, 255, 0.6) !important;} 
body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--quote.is-selected {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));} 
.postArticle.is-withAccentColors .u-imageSpectrum .markup--highlight {background-color: rgba(255, 255, 255, 0.6) !important;} 
body.is-withMagicUnderlines .postArticle.is-withAccentColors .u-imageSpectrum .markup--highlight {background-color: transparent !important; background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.6));}
.u-resetSpectrum .u-tintBgColor {background-color: rgba(255, 255, 255, 1) !important;}
.u-resetSpectrum .u-tintBgColor .u-fadeLeft:before {background-image: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%) !important;}
.u-resetSpectrum .u-tintBgColor .u-fadeRight:after {background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%) !important;} 
.u-resetSpectrum .u-baseColor--borderLight {border-color: rgba(0, 0, 0, 0.2980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--borderNormal {border-color: rgba(0, 0, 0, 0.4980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--borderDark {border-color: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .u-baseColor--iconLight .svgIcon,.u-resetSpectrum .u-baseColor--iconLight.svgIcon {fill: rgba(0, 0, 0, 0.2980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--iconNormal .svgIcon,.u-resetSpectrum .u-baseColor--iconNormal.svgIcon {fill: rgba(0, 0, 0, 0.4980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--iconDark .svgIcon,.u-resetSpectrum .u-baseColor--iconDark.svgIcon {fill: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .u-baseColor--textNormal {color: rgba(0, 0, 0, 0.4980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--textNormal.u-baseColor--textDarken:hover {color: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .u-baseColor--textDark {color: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .u-baseColor--textDarker {color: rgba(0, 0, 0, 0.8) !important;} 
.u-resetSpectrum .u-baseColor--backgroundLight {background-color: rgba(0, 0, 0, 0.09803921568627451) !important;} 
.u-resetSpectrum .u-baseColor--backgroundNormal {background-color: rgba(0, 0, 0, 0.2) !important;} 
.u-resetSpectrum .u-baseColor--backgroundDark {background-color: rgba(0, 0, 0, 0.2980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--buttonLight {border-color: rgba(0, 0, 0, 0.2980392156862745) !important; color: rgba(0, 0, 0, 0.2980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--buttonLight:hover {border-color: rgba(0, 0, 0, 0.2980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--buttonLight .icon:before,.u-resetSpectrum .u-baseColor--buttonLight .svgIcon {color: rgba(0, 0, 0, 0.2980392156862745) !important; fill: rgba(0, 0, 0, 0.2980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--buttonDark {border-color: rgba(0, 0, 0, 0.6) !important; color: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .u-baseColor--buttonDark:hover {border-color: rgba(0, 0, 0, 0.8) !important;} 
.u-resetSpectrum .u-baseColor--buttonDark .icon:before,.u-resetSpectrum .u-baseColor--buttonDark .svgIcon {color: rgba(0, 0, 0, 0.6) !important; fill: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .u-baseColor--buttonNormal {border-color: rgba(0, 0, 0, 0.4980392156862745) !important; color: rgba(0, 0, 0, 0.4980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--buttonNormal:hover {border-color: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .u-baseColor--buttonNormal .icon:before,.u-resetSpectrum .u-baseColor--buttonNormal .svgIcon {color: rgba(0, 0, 0, 0.4980392156862745) !important; fill: rgba(0, 0, 0, 0.4980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--buttonDark.button--filled,.u-resetSpectrum .u-baseColor--buttonDark.button--withChrome.is-active {background-color: rgba(0, 0, 0, 0.2980392156862745) !important; border-color: rgba(0, 0, 0, 0.2980392156862745) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-resetSpectrum .u-baseColor--buttonNormal.button--filled,.u-resetSpectrum .u-baseColor--buttonNormal.button--withChrome.is-active {background-color: rgba(0, 0, 0, 0.2) !important; border-color: rgba(0, 0, 0, 0.2) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-resetSpectrum .u-baseColor--link {color: rgba(0, 0, 0, 0.4980392156862745) !important;} 
.u-resetSpectrum .u-baseColor--link.link--darkenOnHover:hover {color: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .u-baseColor--link.link--darken:hover,.u-resetSpectrum .u-baseColor--link.link--darken:focus,.u-resetSpectrum .u-baseColor--link.link--darken:active {color: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .u-baseColor--link.link--dark {color: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .u-baseColor--link.link--dark.link--darken:hover,.u-resetSpectrum .u-baseColor--link.link--dark.link--darken:focus,.u-resetSpectrum .u-baseColor--link.link--dark.link--darken:active {color: rgba(0, 0, 0, 0.8) !important;} 
.u-resetSpectrum .u-baseColor--link.link--darker {color: rgba(0, 0, 0, 0.8) !important;} 
.u-resetSpectrum .u-baseColor--placeholderNormal ::-webkit-input-placeholder {color: rgba(0, 0, 0, 0.2980392156862745);} .u-resetSpectrum .u-baseColor--placeholderNormal ::-moz-placeholder {color: rgba(0, 0, 0, 0.2980392156862745);} 
.u-resetSpectrum .u-baseColor--placeholderNormal :-ms-input-placeholder {color: rgba(0, 0, 0, 0.2980392156862745);} 
.u-resetSpectrum .svgIcon--logoNew path:nth-child(1) {stroke: none !important; fill: rgba(0, 0, 0, 0.2) !important;} 
.u-resetSpectrum .svgIcon--logoNew path:nth-child(2) {stroke: none !important; fill: rgba(0, 0, 0, 0.2980392156862745) !important;} 
.u-resetSpectrum .svgIcon--logoNew path:nth-child(3) {stroke: none !important; fill: rgba(0, 0, 0, 0.4) !important;} 
.u-resetSpectrum .svgIcon--logoNew path:nth-child(4) {stroke: none !important; fill: rgba(0, 0, 0, 0.4980392156862745) !important;} 
.u-resetSpectrum .svgIcon--logoWordmark {stroke: none !important; fill: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .svgIcon--logoMonogram {stroke: none !important; fill: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .ui-h1,.u-resetSpectrum .ui-h2,.u-resetSpectrum .ui-h3,.u-resetSpectrum .ui-h4,.u-resetSpectrum .ui-brand1,.u-resetSpectrum .ui-brand2,.u-resetSpectrum .ui-captionStrong {color: rgba(0, 0, 0, 0.8) !important; fill: rgba(0, 0, 0, 0.8) !important;} 
.u-resetSpectrum .ui-body,.u-resetSpectrum .ui-caps {color: rgba(0, 0, 0, 0.6) !important; fill: rgba(0, 0, 0, 0.6) !important;} 
.u-resetSpectrum .ui-summary,.u-resetSpectrum .ui-caption {color: rgba(0, 0, 0, 0.2980392156862745) !important; fill: rgba(0, 0, 0, 0.2980392156862745) !important;} 
.u-resetSpectrum .u-accentColor--borderLight {border-color: rgba(2, 184, 117, 1) !important;} 
.u-resetSpectrum .u-accentColor--borderNormal {border-color: rgba(2, 184, 117, 1) !important;} 
.u-resetSpectrum .u-accentColor--borderDark {border-color: rgba(0, 171, 107, 1) !important;} 
.u-resetSpectrum .u-accentColor--iconLight .svgIcon,.u-resetSpectrum .u-accentColor--iconLight.svgIcon {fill: rgba(2, 184, 117, 1) !important;} 
.u-resetSpectrum .u-accentColor--iconNormal .svgIcon,.u-resetSpectrum .u-accentColor--iconNormal.svgIcon {fill: rgba(0, 171, 107, 1) !important;} 
.u-resetSpectrum .u-accentColor--iconDark .svgIcon,.u-resetSpectrum .u-accentColor--iconDark.svgIcon {fill: rgba(28, 153, 99, 1) !important;} 
.u-resetSpectrum .u-accentColor--textNormal {color: rgba(0, 171, 107, 1) !important;} 
.u-resetSpectrum .u-accentColor--hoverTextNormal:hover {color: rgba(0, 171, 107, 1) !important;} 
.u-resetSpectrum .u-accentColor--textNormal.u-accentColor--textDarken:hover {color: rgba(28, 153, 99, 1) !important;} 
.u-resetSpectrum .u-accentColor--textDark {color: rgba(28, 153, 99, 1) !important;} 
.u-resetSpectrum .u-accentColor--backgroundLight {background-color: rgba(2, 184, 117, 1) !important;} 
.u-resetSpectrum .u-accentColor--backgroundNormal {background-color: rgba(0, 171, 107, 1) !important;} 
.u-resetSpectrum .u-accentColor--backgroundDark {background-color: rgba(28, 153, 99, 1) !important;} 
.u-resetSpectrum .u-accentColor--buttonDark {border-color: rgba(0, 171, 107, 1) !important; color: rgba(28, 153, 99, 1) !important;} 
.u-resetSpectrum .u-accentColor--buttonDark:hover {border-color: rgba(28, 153, 99, 1) !important;} 
.u-resetSpectrum .u-accentColor--buttonDark .icon:before,.u-resetSpectrum .u-accentColor--buttonDark .svgIcon{color: rgba(28, 153, 99, 1) !important; fill: rgba(28, 153, 99, 1) !important;} 
.u-resetSpectrum .u-accentColor--buttonNormal:not(.clapButton--largePill) {border-color: rgba(2, 184, 117, 1) !important; color: rgba(0, 171, 107, 1) !important;} 
.u-resetSpectrum .u-accentColor--buttonNormal:hover {border-color: rgba(0, 171, 107, 1) !important;} 
.u-resetSpectrum .u-accentColor--buttonNormal .icon:before,.u-resetSpectrum .u-accentColor--buttonNormal .svgIcon{color: rgba(0, 171, 107, 1) !important; fill: rgba(0, 171, 107, 1) !important;} 
.u-resetSpectrum .u-accentColor--buttonNormal.button--filled .icon:before,.u-resetSpectrum .u-accentColor--buttonNormal.button--filled .svgIcon{color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-resetSpectrum .u-accentColor--buttonDark.button--filled,.u-resetSpectrum .u-accentColor--buttonDark.button--withChrome.is-active,.u-resetSpectrum .u-accentColor--fillWhenActive.is-active {background-color: rgba(28, 153, 99, 1) !important; border-color: rgba(28, 153, 99, 1) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-resetSpectrum .u-accentColor--buttonNormal.button--filled:not(.clapButton--largePill),.u-resetSpectrum .u-accentColor--buttonNormal.button--withChrome.is-active:not(.clapButton--largePill) {background-color: rgba(0, 171, 107, 1) !important; border-color: rgba(0, 171, 107, 1) !important; color: rgba(255, 255, 255, 1) !important; fill: rgba(255, 255, 255, 1) !important;} 
.u-resetSpectrum .postArticle.is-withAccentColors .markup--user,.u-resetSpectrum .postArticle.is-withAccentColors .markup--query {color: rgba(0, 171, 107, 1) !important;}

// <!\[CDATA\[ window\["obvInit"\] = function (opt\_embedded) {window\["obvInit"\]\["embedded"\] = opt\_embedded; window\["obvInit"\]\["ready"\] = true;} // \]\]>// <!\[CDATA\
[ var GLOBALS = {"audioUrl":"https://d1fcbxp97j4nb2.cloudfront.net","baseUrl":"https://levelup.gitconnected.com","buildLabel":"32186-3d58009","currentUser":{"userId":"lo\_oWk5hyBn3sEP","isVerified":false,"subscriberEmail":"","hasPastMemberships":false,"isEnrolledInHightower":false,"isEligibleForHightower":false,"hightowerLastLockedAt":0},"currentUserHasUnverifiedEmail":false,"isAuthenticated":false,"isCurrentUserVerified":false,"mediumTwitterScreenName":"medium","miroUrl":"https://cdn-images-1.medium.com",
"moduleUrls":{"base":"https://cdn-static-1.medium.com/\_/fp/gen-js/main-base.bundle.Gy6PdjVuTCIft7ova\_WDfw.js","common-async":"https://cdn-static-1.medium.com/\_/fp/gen-js/main-common-async.bundle.IlHACqjPkxpGqs9\_pAxXfw.js",
"home-screens":"https://cdn-static-1.medium.com/\_/fp/gen-js/main-home-screens.bundle.xTD4-k9ixFlOPqIOA56GbA.js","misc-screens":"https://cdn-static-1.medium.com/_/fp/gen-js/main-misc-screens.bundle.wlAsNFEQF8T6h\_\_XNKzDbA.js",
"notes":"https://cdn-static-1.medium.com/\_/fp/gen-js/main-notes.bundle.9trLv1ULaoOqI1YfdK9pOQ.js",
"payments":"https://cdn-static-1.medium.com/_/fp/gen-js/main-payments.bundle.bqcfaXaEvKWsMBgvvg4Jrw.js",
"posters":"https://cdn-static-1.medium.com/_/fp/gen-js/main-posters.bundle.ILtAAjXQFaUJ1kJkzSk2IA.js",
"pubs":"https://cdn-static-1.medium.com/_/fp/gen-js/main-pubs.bundle.pyaf8xodVzZ37jWN-FECgA.js",
"stats":"https://cdn-static-1.medium.com/_/fp/gen-js/main-stats.bundle.wZKJkAAwnEnN87HuNF2XvQ.js"},
"previewConfig{"weightThreshold":1,
"weightImageParagraph":0.51,
"weightIframeParagraph":0.8,
"weightTextParagraph":0.08,
"weightEmptyParagraph":0,
"weightP":0.003,
"weightH":0.005,
"weightBq":0.003,
"minPTextLength":60,
"truncateBoundaryChars":20,
"detectTitle":true,
"detectTitleLevThreshold":0.15},
"productName":"Medium",
"supportsEdit":true,
"termsUrl":"//medium.com/policy/9db0094a1e0f",
"textshotHost":"textshot.medium.com",
"transactionId":"1516081701954:1c438281591a",
"useragent{"browser":"chrome","family":"chrome","os":"mac","version":51,
"supportsDesktopEdit":true,"supportsInteract":true,"supportsView":true,"isMobile":false,"isTablet":false,"isNative":false,"supportsFileAPI":true,"isTier1":true,"clientVersion":"","unknownParagraphsBad":false,"clientChannel":"","supportsRealScrollEvents":true,"supportsVhUnits":true,"ruinsViewportSections":false,"supportsHtml5Video":true,"supportsMagicUnderlines":true,"isWebView":false,"isFacebookWebView":false,"supportsProgressiveMedia":true,"supportsPromotedPosts":true,"isBot":false,"isNativeIphone":false,"supportsCssVariables":true,"supportsVideoSections":false,"emojiSupportLevel":3,"isSearchBot":false,"supportsScrollableMetabar":true},"variants":{"allow\_access":true,"allow\_signup":true,"allow\_test\_auth":"disallow","signin\_services":"twitter,facebook,google,email,google-fastidv","signup\_services":"twitter,facebook,google,email,google-fastidv","android\_rating\_prompt\_recommend\_threshold":5,"google\_sign\_in\_android":true,"reengagement\_notification\_duration":3,"browsable\_stream\_config\_bucket":"universal-nav-bar","enable\_series\_creation":true,"enable\_your\_series\_pages":true,"enable\_productionized\_series":true,"enable\_dedicated\_series\_tab\_api\_ios":true,"enable\_clap\_milestone\_notifications":true,"enable\_series\_stats\_page":true,"enable\_post\_import":true,"enable\_sponsored\_post\_labelling":true,"enable\_logged\_in\_follow\_on\_collection\_post":true,"enable\_export\_members":true,"enable\_series\_card\_background\_creation":true,"available\_monthly\_plan":"60e220181034","available\_annual\_plan":"2c754bcc2995","enable\_sms":true,"is\_not\_medium\_subscriber":true,"disable\_followed\_tag\_fan\_out":true,"enable\_emoji\_in\_editor":true,"enable\_glyph":true,"glyph\_font\_set":"m2","enable\_branding":true,"enable\_branding\_fonts":true,"enable\_branding\_buttons":true,"enable\_sequence\_carousel":true,"enable\_multirecommends":true,"enable\_user\_post\_metering":true,"enable\_login\_modal\_for\_all":true,"max\_premium\_content\_per\_user\_under\_metering":3,"enable\_topic\_writer\_onboarding":true,"enable\_algolia\_search\_reporting":true,"enable\_strong\_graph\_chp\_reorder":true,"enable\_top\_stories\_for\_you":true,"enable\_ios\_member\_post\_labeling":true,"enable\_featured\_hero":true,"enable\_li\_search\_collection":true,"enable\_revamped\_nav\_bar":true,"enable\_gosocial\_aurora\_shadow\_reads":true,"enable\_audio\_playlists":true,"enable\_platform\_934\_daily\_digest":true,"enable\_standalone\_profile\_edit\_page":true,"enable\_standalone\_user\_follow\_pages":true,"enable\_post\_footer\_copy":true,"app\_download\_email\_template":"control"},"xsrfToken":"","iosAppId":"828256236","supportEmail":"yourfriends@medium.com","fp":{"/icons/monogram-mask.svg":"https://cdn-static-1.medium.com/_/fp/icons/monogram-mask.KPLCSFEZviQN0jQ7veN2RQ.svg","/icons/favicon-dev-editor.ico":"https://cdn-static-1.medium.com/_/fp/icons/favicon-dev-editor.YKKRxBO8EMvIqhyCwIiJeQ.ico","/icons/favicon-hatch-editor.ico":"https://cdn-static-1.medium.com/_/fp/icons/favicon-hatch-editor.BuEyHIqlyh2s\_XEk4Rl32Q.ico","/icons/favicon-medium-editor.ico":"https://cdn-static-1.medium.com/\_/fp/icons/favicon-medium-editor.PiakrZWB7Yb80quUVQWM6g.ico"},"authBaseUrl":"https://medium.com","imageUploadSizeMb":25,"isAuthDomainRequest":false,"domainCollectionSlug":"gitconnected","algoliaApiEndpoint":"https://MQ57UUUQZ2-dsn.algolia.net","algoliaAppId":"MQ57UUUQZ2","algoliaSearchOnlyApiKey":"394474ced050e3911ae2249ecc774921","iosAppStoreUrl":"https://itunes.apple.com/app/medium-everyones-stories/id828256236?pt=698524&mt=8","iosAppLinkBaseUrl":"medium:","algoliaIndexPrefix":"medium_","androidPlayStoreUrl":"https://play.google.com/store/apps/details?id=com.medium.reader","googleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","androidPackage":"com.medium.reader","androidPlayStoreMarketScheme":"market://details?id=com.medium.reader","googleAuthUri":"https://accounts.google.com/o/oauth2/auth","androidScheme":"medium","layoutData":{"useDynamicScripts":false,"googleAnalyticsTrackingCode":"UA-24232453-2","jsShivUrl":"https://cdn-static-1.medium.com/_/fp/js/shiv.RI2ePTZ5gFmMgLzG5bEVAA.js","useDynamicCss":false,"faviconUrl":"https://cdn-static-1.medium.com/_/fp/icons/favicon-rebrand-medium.3Y6xpZ-0FSdWDnPM3hSBIA.ico","faviconImageId":"1*8I-HPL0bfoIzGied-dzOvA.png","fontSets":\[{"id":8,"url":"https://glyph.medium.com/css/e/sr/latin/e/ssr/latin/e/ssb/latin/m2.css"},{"id":9,"url":"https://glyph.medium.com/css/mkt.css"}\],"editorFaviconUrl":"https://cdn-static-1.medium.com/_/fp/icons/favicon-rebrand-medium-editor.3Y6xpZ-0FSdWDnPM3hSBIA.ico","glyphUrl":"https://glyph.medium.com"},"authBaseUrlRev":"moc.muidem//:sptth","isDnt":false,"stripePublishableKey":"pk\_live\_7FReX44VnNIInZwrIIx6ghjl","archiveUploadSizeMb":100,"paymentData":{"currencies":{"1":{"label":"US Dollar","external":"usd"}},"countries":{"1":{"label":"United States of America","external":"US"}},"accountTypes":{"1":{"label":"Individual","external":"individual"},"2":{"label":"Company","external":"company"}}},"previewConfig2":{"weightThreshold":1,"weightImageParagraph":0.05,"raiseImage":true,"enforceHeaderHierarchy":true,"isImageInsetRight":true},"isAmp":false,"iosScheme":"medium","isSwBoot":false,"lightstep":{"accessToken":"ce5be895bef60919541332990ac9fef2","carrier":"{\\"ot-tracer-spanid\\":\\"177812f92c2edbad\\",\\"ot-tracer-traceid\\":\\"18a1a4a9451865ea\\",\\"ot-tracer-sampled\\":\\"true\\"}","host":"collector-medium.lightstep.com"},"facebook":{"key":"542599432471018","namespace":"medium-com","scope":{"default":\["public\_profile","email","user\_friends"\],"connect":\["public\_profile","email","user\_friends"\],"login":\["public\_profile","email","user\_friends"\],"share":\["public\_profile","email","user\_friends","publish_actions"\]}},"mailingListArchiveUploadSizeMb":2,"editorsPicksTopicId":"3985d2a191c5","popularOnMediumTopicId":"9d34e48ecf94","memberContentTopicId":"13d7efd82fb2","audioContentTopicId":"3792abbd134","brandedSequenceId":"7d337ddf1941","isDoNotAuth":false,"goldfinchUrl":"https://goldfinch.medium.com","buggle":{"url":"https://buggle.medium.com","videoUrl":"https://cdn-videos-1.medium.com","audioUrl":"https://cdn-audio-1.medium.com"},"referrerType":3,"isMeteredOut":false,"meterConfig":{"maxUnlockCount":3,"windowLength":"MONTHLY"},"partnerProgramEmail":"partnerprogram@medium.com","userResearchPrompts":\[\]} // \]\]>// <!\[CDATA\[ window\["obvInit"\]({"value":{"id":"2fceebb8faf","versionId":"1c69ce2a2d2a","creatorId":"9f1198c40e60","creator":{"userId":"9f1198c40e60","name":"Richard Oliver Bray","username":"richbray","createdAt":1402044872805,"lastPostCreatedAt":1515586759035,"imageId":"0\*1oP1YJMUZexeIa4D.jpeg","backgroundImageId":"","bio":"Designing products for private jets @Stratajet. Event organiser, speaker and taker of pictures. http://richbray.me/","twitterScreenName":"Ceiga","socialStats":{"userId":"9f1198c40e60","usersFollowedCount":528,"usersFollowedByCount":521,"type":"SocialStats"},"social":{"userId":"lo\_oWk5hyBn3sEP","targetUserId":"9f1198c40e60","type":"Social"},"facebookAccountId":"","allowNotes":1,"type":"User"},"homeCollection":{"id":"5517fd7b58a6","name":"gitconnected","slug":"gitconnected","tags":\["CODING","OPEN SOURCE","STARTUP","JAVASCRIPT","REACT"\],"creatorId":"47e700e59e44","description":"Our community publishes stories about software development, design, and data science. gitconnected — The community for developers and software engineers https://gitconnected.com","shortDescription":"Our community publishes stories about software development…","image":{"imageId":"1\*5D9oYBd58pyjMkV\_5-zXXQ.jpeg","filter":"","backgroundSize":"","originalWidth":400,"originalHeight":400,"strategy":"resample","height":0,"width":0},"metadata":{"followerCount":2102,"activeAt":1516037037008},"virtuals":{"permissions":{"canPublish":false,"canPublishAll":false,"canRepublish":false,"canRemove":false,"canManageAll":false,"canSubmit":false,"canEditPosts":false,"canAddWriters":false,"canViewStats":false,"canSendNewsletter":false,"canViewLockedPosts":false,"canViewCloaked":false,"canEditOwnPosts":false,"canBeAssignedAuthor":false,"canEnrollInHightower":false,"canLockPostsForMediumMembers":false},"isSubscribed":false,"isNewsletterSubscribed":false,"memberOfMembershipPlanId":"","isEnrolledInHightower":false,"isEligibleForHightower":false},"logo":{"imageId":"1\*qQ3VnTs2Amfz029mzWBj\_g.png","filter":"","backgroundSize":"","originalWidth":800,"originalHeight":118,"strategy":"resample","height":0,"width":0},"twitterUsername":"gitconnected","facebookPageName":"gitconnectednetwork","publicEmail":"submit@gitconnected.com","collectionMastheadId":"15b7b454ec61","domain":"levelup.gitconnected.com","sections":\[{"type":2,"collectionHeaderMetadata":{"backgroundImage":{"id":"1\*UE0BnYeGMWK3dYApMCKdBQ.png","originalWidth":2000,"originalHeight":761},"logoImage":{},"alignment":2,"layout":6}},{"type":1,"postListMetadata":{"source":1,"layout":7,"number":7,"postIds":\[\]}},{"type":1,"postListMetadata":{"source":3,"layout":4,"number":8,"postIds":\["9562efa23d18","7072ce99e727","671d706b7a19","2cee6c55940c","da0c37537a79","ab1f09be2c82","bfb0c51f6149","90c556aff1c5"\]}},{"type":3,"promoMetadata":{"sectionHeader":"","promoId":"e5c86c91328"}},{"type":1,"postListMetadata":{"source":1,"layout":6,"number":25,"postIds":\[\],"sectionHeader":"Latest"}}\],"tintColor":"#FF396291","lightText":false,"favicon":{"imageId":"1\*MMpkJtmeCME-6BmGNH5l8A.png","filter":"","backgroundSize":"","originalWidth":256,"originalHeight":256,"strategy":"resample","height":0,"width":0},"colorPalette":{"defaultBackgroundSpectrum":{"colorPoints":\[{"color":"#FF6089BA","point":0},{"color":"#FF5B80AC","point":0.1},{"color":"#FF55769D","point":0.2},{"color":"#FF4F6C8E","point":0.3},{"color":"#FF49617F","point":0.4},{"color":"#FF425770","point":0.5},{"color":"#FF3B4C61","point":0.6},{"color":"#FF334152","point":0.7},{"color":"#FF2A3542","point":0.8},{"color":"#FF202832","point":0.9},{"color":"#FF151B22","point":1}\],"backgroundColor":"#FFFFFFFF"},"tintBackgroundSpectrum":{"colorPoints":\[{"color":"#FF396291","point":0},{"color":"#FF5075A0","point":0.1},{"color":"#FF6586AE","point":0.2},{"color":"#FF7A97BB","point":0.3},{"color":"#FF8DA7C8","point":0.4},{"color":"#FFA0B7D4","point":0.5},{"color":"#FFB3C6DF","point":0.6},{"color":"#FFC5D5EB","point":0.7},{"color":"#FFD7E4F6","point":0.8},{"color":"#FFE8F2FF","point":0.9},{"color":"#FFFAFFFF","point":1}\],"backgroundColor":"#FF396291"},"highlightSpectrum":{"colorPoints":\[{"color":"#FFEBF4FF","point":0},{"color":"#FFE8F2FF","point":0.1},{"color":"#FFE4F1FF","point":0.2},{"color":"#FFE0EFFF","point":0.3},{"color":"#FFDCEEFF","point":0.4},{"color":"#FFD8ECFF","point":0.5},{"color":"#FFD4EAFF","point":0.6},{"color":"#FFD0E9FF","point":0.7},{"color":"#FFCCE7FF","point":0.8},{"color":"#FFC8E6FF","point":0.9},{"color":"#FFC4E4FF","point":1}\],"backgroundColor":"#FFFFFFFF"}},"navItems":\[\],"colorBehavior":1,"instantArticlesState":0,"acceleratedMobilePagesState":0,"googleAnalyticsId":"UA-110153932-1","ampLogo":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"header":{"backgroundImage":{"id":"1\*UE0BnYeGMWK3dYApMCKdBQ.png","originalWidth":2000,"originalHeight":761},"logoImage":{},"alignment":2,"layout":6},"type":"Collection"},"homeCollectionId":"5517fd7b58a6","title":"React & Typescript with Webpack","detectedLanguage":"en","latestVersion":"1c69ce2a2d2a","latestPublishedVersion":"1c69ce2a2d2a","hasUnpublishedEdits":false,"latestRev":540,"createdAt":1515502420604,"updatedAt":1516068972241,"acceptedAt":0,"firstPublishedAt":1515586424382,"latestPublishedAt":1515686983531,"vote":false,"experimentalCss":"","displayAuthor":"","content":{"subtitle":"I’ve spent a lot of my time in Angular 2 and loved using Typescirpt with that. So since I made the decision to learn React I found it odd…","bodyModel":{"paragraphs":\[{"name":"5b3e","type":4,"text":"","markups":\[\],"layout":1,"metadata":{"id":"1\*x6EnTlBhjcyu605VPDysZQ.jpeg","originalWidth":800,"originalHeight":600}},{"name":"12ef","type":3,"text":"React & Typescript with Webpack","markups":\[\]},{"name":"6ca2","type":1,"text":"I’ve spent a lot of my time in Angular 2 and loved using Typescirpt with that. So since I made the decision to learn React I found it odd to write ‘vanilla’ Javascript without type definition, interfaces, enums and all the other good stuff that comes with Typescript. I did some research and figured out how to incorporate Typescript into a React project from scratch and thought I’d share my findings in this post for anyone else who wants to do the same.","markups":\[\]},{"name":"a3dc","type":1,"text":"I have written a post about moving from Gulp to Webpack which if you’ve read will see some things form there in here. If you haven’t read it and want to get a better understanding of how webpack works, I highly recommend you doing so.","markups":\[{"type":3,"start":28,"end":55,"href":"https://medium.com/stratajet-tech/moving-from-gulp-to-webpack-9064b6cf2e08","title":"","rel":"","anchorType":0}\]},{"name":"ac7f","type":3,"text":"Let’s get started","markups":\[\]},{"name":"2297","type":6,"text":"This tutorial assumes you have Node version 8 or above installed on your machine, you have some knowledge of how React works, and know a bit about the terminal.","markups":\[\]},{"name":"b04a","type":1,"text":"Create a folder called called react-typescript by typing in your terminal.","markups":\[{"type":1,"start":30,"end":46}\]},{"name":"38fe","type":8,"text":"$ mkdir react-typescript","markups":\[\]},{"name":"aacf","type":1,"text":"Create a folder in react-typescript called src. Then in your terminal type;","markups":\[{"type":1,"start":43,"end":47}\]},{"name":"2395","type":8,"text":"$ touch webpack.config.js index.html","markups":\[\]},{"name":"c5b5","type":8,"text":"$ npm init -y","markups":\[\]},{"name":"4e42","type":1,"text":"The last command creates a package.json file with the default settings/ You’re welcome to change the file if you need to. This concludes the basic setup of the project, now let’s start editing files.","markups":\[{"type":1,"start":27,"end":39}\]},{"name":"3d40","type":1,"text":"Open the webpack.config.js file you created and place some simple webpack starter code in it.","markups":\[{"type":1,"start":9,"end":26}\]},{"name":"b546","type":11,"text":"","markups":\[\],"layout":1,"iframe":{"mediaResourceId":"a6929a7546f14f544d683895f9a32060"}},{"name":"0cf9","type":1,"text":"I’ve spoken about what each thing does in this article, but a lot of them are self explanatory.","markups":\[{"type":3,"start":42,"end":54,"href":"https://medium.com/stratajet-tech/moving-from-gulp-to-webpack-9064b6cf2e08","title":"","rel":"","anchorType":0}\]},{"name":"e412","type":1,"text":"Let’s add a file to entry called index.tsx from the src folder like so ‘./src/index.tsx’. We haven’t yet created this file but we will do it later. The .tsx extension is the Typescript version of .jsx similarly .ts is used instead of .js, but we won’t be using any of those in this tutorial. Also in the output, let’s put everything in a folder called build which will export on the root of the project using path, and collect all the amalgamated js files into a bundle.js.","markups":\[{"type":1,"start":20,"end":25},{"type":1,"start":33,"end":42},{"type":1,"start":52,"end":55},{"type":1,"start":72,"end":87},{"type":1,"start":152,"end":156},{"type":1,"start":196,"end":200},{"type":1,"start":211,"end":214},{"type":1,"start":234,"end":238},{"type":1,"start":304,"end":311},{"type":1,"start":352,"end":357},{"type":1,"start":409,"end":413},{"type":1,"start":463,"end":473}\]},{"name":"cdb8","type":11,"text":"","markups":\[\],"layout":1,"iframe":{"mediaResourceId":"ee54d398cbe14acef1af070eb9cb8424"}},{"name":"fd04","type":1,"text":"Not let’s create an index.tsx file in the src folder and add this code.","markups":\[{"type":1,"start":20,"end":29}\]},{"name":"f81e","type":11,"text":"","markups":\[\],"layout":1,"iframe":{"mediaResourceId":"0043c14db0530a0e3a69e5f2c0c4d4c7"}},{"name":"aed7","type":1,"text":"You may be used to importing react in regular js files like this;","markups":\[\]},{"name":"ec61","type":8,"text":"import React from \\"react\\";","markups":\[\]},{"name":"94be","type":1,"text":"But for Typescript you have to import all (\*) as React. The code snipped you pasted is a pretty simple React file that just puts the word ‘Hello’ in a DOM node with the class ‘container’. Let’s create this node in a file called index.html at the root of the project.","markups":\[{"type":1,"start":176,"end":186},{"type":1,"start":228,"end":238}\]},{"name":"f1a5","type":11,"text":"","markups":\[\],"layout":1,"iframe":{"mediaResourceId":"16ff93c0092f5f1f0120118ca5eb282a"}},{"name":"931a","type":1,"text":"Now we need to install all the npms we’ve referenced. First let’s install the react modules.","markups":\[\]},{"name":"ba53","type":8,"text":"$ npm i react react-dom","markups":\[\]},{"name":"1175","type":1,"text":"Then the webpack libraries as dev dependencies.","markups":\[\]},{"name":"3f78","type":8,"text":"$ npm i webpack webpack-dev-server@2.9.7 -D","markups":\[\]},{"name":"e142","type":1,"text":"You’ll notice we’ve installed a specific version of webpack-dev-server because there is a breaking bug with version 2.10.0. If you happen to be going through this when there is a newer version beyond the broken one, you’re more than welcome to try that instead.","markups":\[{"type":3,"start":90,"end":102,"href":"https://github.com/webpack/webpack-dev-server/issues/1259","title":"","rel":"noopener","anchorType":0}\]},{"name":"9c9b","type":1,"text":"Okay–we have a typescript file, but webpack doesn’t know how to read it. Let’s give it the ability to do that. Install awesome-typescript-loader as a dev dependency.","markups":\[{"type":1,"start":119,"end":144}\]},{"name":"4b02","type":8,"text":"$ npm i typescript awesome-typescript-loader -D","markups":\[\]},{"name":"5b6b","type":1,"text":"You can read here why it’s better than using ts-loader. Edit the webpack.config file accordingly by adding a rule to the module section.","markups":\[{"type":3,"start":13,"end":17,"href":"https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader","title":"","rel":"noopener","anchorType":0},{"type":3,"start":45,"end":54,"href":"https://github.com/TypeStrong/ts-loader","title":"","rel":"noopener","anchorType":0},{"type":1,"start":45,"end":54},{"type":1,"start":65,"end":79}\]},{"name":"0c7f","type":11,"text":"","markups":\[\],"layout":1,"iframe":{"mediaResourceId":"8796e193dde980519e7f9df752bfed4a"}},{"name":"574e","type":1,"text":"We’re almost there. Create a file in the root called tsconfig.json which, amongst other things, tells webpack where to direct its search for typescript files.","markups":\[{"type":1,"start":53,"end":66}\]},{"name":"ae74","type":11,"text":"","markups":\[\],"layout":1,"iframe":{"mediaResourceId":"c1be2fca53a542e36fb472c506f589d6"}},{"name":"45c1","type":1,"text":"Now we only have a few more dev dependencies to install. By default our React installations don’t have information about what types the methods are in the packages. We can install packages to generate the types for React and React DOM.","markups":\[\]},{"name":"2ec8","type":8,"text":"$ npm i @types/react @types/react-dom -D","markups":\[{"type":3,"start":8,"end":20,"href":"http://twitter.com/types/react","title":"Twitter profile for @types/react","rel":"","anchorType":0},{"type":3,"start":21,"end":37,"href":"http://twitter.com/types/react-dom","title":"Twitter profile for @types/react-dom","rel":"","anchorType":0}\]},{"name":"3f9a","type":1,"text":"The final edit needed is to update the package.json file by replacing test in scripts with this line;","markups":\[{"type":1,"start":39,"end":51}\]},{"name":"a742","type":8,"text":"\\"start\\": \\"webpack-dev-server\\"","markups":\[\]},{"name":"16a2","type":1,"text":"Now if you hit npm start (or yarn start if you have Yarn) in the terminal to start the server. Navigate to localhost:8080 and voila, you should see ‘Hello’ in a h1 tag.","markups":\[{"type":3,"start":52,"end":56,"href":"https://yarnpkg.com/en/","title":"","rel":"noopener","anchorType":0},{"type":1,"start":15,"end":24},{"type":1,"start":29,"end":39},{"type":1,"start":107,"end":121},{"type":1,"start":161,"end":163}\]},{"name":"946c","type":1,"text":"And that’s it! You have a basic Typescirpt, webpack ,and React setup. For the average react project, you’ll probably want to have multiple component files, source maps for debugging, styles, and possibly the ability not to have the bundle.js file hard coded in the index. We’ll deal with that in the next part of this tutorial.","markups":\[{"type":3,"start":300,"end":326,"href":"https://medium.com/@richbray/react-typescript-with-webpack-part-2-aa02d150c59b","title":"","rel":"","anchorType":0}\]}\],"sections":\[{"name":"da65","startIndex":0}\]},"postDisplay":{"coverless":true}},"virtuals":{"statusForCollection":"APPROVED","allowNotes":true,"previewImage":{"imageId":"1\*x6EnTlBhjcyu605VPDysZQ.jpeg","filter":"","backgroundSize":"","originalWidth":800,"originalHeight":600,"strategy":"resample","height":0,"width":0},"wordCount":766,"imageCount":1,"readingTime":3.090566037735849,"subtitle":"I’ve spent a lot of my time in Angular 2 and loved using Typescirpt with that. So since I made the decision to learn React I found it odd…","publishedInCount":1,"usersBySocialRecommends":\[\],"recommends":18,"socialRecommends":\[\],"isBookmarked":false,"tags":\[{"slug":"javascript","name":"JavaScript","postCount":53907,"virtuals":{"isFollowing":false},"metadata":{"followerCount":41147,"postCount":53907,"coverImage":{"id":"1\*41XiwBL9NXDfGtIXbc3UsQ.jpeg","originalWidth":3000,"originalHeight":2000,"isFeatured":true}},"type":"Tag"},{"slug":"react","name":"React","postCount":12360,"virtuals":{"isFollowing":false},"metadata":{"followerCount":18062,"postCount":12360,"coverImage":{"id":"1\*8ITf\_jyAEhKNKb7KWgGylA.png","originalWidth":1920,"originalHeight":1280}},"type":"Tag"},{"slug":"typescript","name":"Typescript","postCount":1765,"virtuals":{"isFollowing":false},"metadata":{"followerCount":2194,"postCount":1765,"coverImage":{"id":"1\*8ITf\_jyAEhKNKb7KWgGylA.png","originalWidth":1920,"originalHeight":1280}},"type":"Tag"},{"slug":"webpack","name":"Webpack","postCount":1417,"virtuals":{"isFollowing":false},"metadata":{"followerCount":2694,"postCount":1417,"coverImage":{"id":"1\*H8PH-HaV43gZyBJz0mJHxA.png","originalWidth":1498,"originalHeight":974}},"type":"Tag"},{"slug":"tech","name":"Tech","postCount":112000,"virtuals":{"isFollowing":false},"metadata":{"followerCount":1071093,"postCount":112000,"coverImage":{"id":"1\*5pa7-lgBJW1DQpFC68biuA.png","originalWidth":1344,"originalHeight":1288}},"type":"Tag"}\],"socialRecommendsCount":0,"responsesCreatedCount":0,"links":{"entries":\[{"url":"https://yarnpkg.com/en/","alts":\[\],"httpStatus":200},{"url":"http://twitter.com/types/react-dom","alts":\[\],"httpStatus":404},{"url":"http://twitter.com/types/react","alts":\[\],"httpStatus":404},{"url":"https://medium.com/stratajet-tech/moving-from-gulp-to-webpack-9064b6cf2e08","alts":\[{"type":2,"url":"medium://p/9064b6cf2e08"},{"type":3,"url":"medium://p/9064b6cf2e08"}\],"httpStatus":200},{"url":"https://medium.com/@richbray/react-typescript-with-webpack-part-2-aa02d150c59b","alts":\[{"type":3,"url":"medium://p/aa02d150c59b"},{"type":2,"url":"medium://p/aa02d150c59b"}\],"httpStatus":200},{"url":"https://github.com/s-panferov/awesome-typescript-loader#differences-between-ts-loader","alts":\[\],"httpStatus":200},{"url":"https://github.com/TypeStrong/ts-loader","alts":\[\],"httpStatus":200},{"url":"https://github.com/webpack/webpack-dev-server/issues/1259","alts":\[\],"httpStatus":200}\],"version":"0.3","generatedAt":1515686987910},"isLockedPreviewOnly":false,"takeoverId":"","metaDescription":"","totalClapCount":209,"sectionCount":1,"readingList":0},"coverless":true,"slug":"react-typescript-with-webpack","translationSourcePostId":"","translationSourceCreatorId":"","isApprovedTranslation":false,"inResponseToPostId":"","inResponseToRemovedAt":0,"isTitleSynthesized":true,"allowResponses":true,"importedUrl":"","importedPublishedAt":0,"visibility":0,"uniqueSlug":"react-typescript-with-webpack-2fceebb8faf","previewContent":{"bodyModel":{"paragraphs":\[{"name":"5b3e","type":4,"text":"","markups":\[\],"layout":9,"metadata":{"id":"1\*x6EnTlBhjcyu605VPDysZQ.jpeg","originalWidth":800,"originalHeight":600}},{"name":"12ef","type":3,"text":"React & Typescript with Webpack","markups":\[\],"alignment":1},{"name":"6ca2","type":1,"text":"I’ve spent a lot of my time in Angular 2 and loved using Typescirpt with that. So since I made the…","markups":\[\],"alignment":1}\],"sections":\[{"startIndex":0}\]},"isFullContent":false},"license":0,"inResponseToMediaResourceId":"","canonicalUrl":"https://levelup.gitconnected.com/react-typescript-with-webpack-2fceebb8faf","approvedHomeCollectionId":"5517fd7b58a6","approvedHomeCollection":{"id":"5517fd7b58a6","name":"gitconnected","slug":"gitconnected","tags":\["CODING","OPEN SOURCE","STARTUP","JAVASCRIPT","REACT"\],"creatorId":"47e700e59e44","description":"Our community publishes stories about software development, design, and data science. gitconnected — The community for developers and software engineers https://gitconnected.com","shortDescription":"Our community publishes stories about software development…","image":{"imageId":"1\*5D9oYBd58pyjMkV\_5-zXXQ.jpeg","filter":"","backgroundSize":"","originalWidth":400,"originalHeight":400,"strategy":"resample","height":0,"width":0},"metadata":{"followerCount":2102,"activeAt":1516037037008},"virtuals":{"permissions":{"canPublish":false,"canPublishAll":false,"canRepublish":false,"canRemove":false,"canManageAll":false,"canSubmit":false,"canEditPosts":false,"canAddWriters":false,"canViewStats":false,"canSendNewsletter":false,"canViewLockedPosts":false,"canViewCloaked":false,"canEditOwnPosts":false,"canBeAssignedAuthor":false,"canEnrollInHightower":false,"canLockPostsForMediumMembers":false},"isSubscribed":false,"isNewsletterSubscribed":false,"memberOfMembershipPlanId":"","isEnrolledInHightower":false,"isEligibleForHightower":false},"logo":{"imageId":"1\*qQ3VnTs2Amfz029mzWBj\_g.png","filter":"","backgroundSize":"","originalWidth":800,"originalHeight":118,"strategy":"resample","height":0,"width":0},"twitterUsername":"gitconnected","facebookPageName":"gitconnectednetwork","publicEmail":"submit@gitconnected.com","collectionMastheadId":"15b7b454ec61","domain":"levelup.gitconnected.com","sections":\[{"type":2,"collectionHeaderMetadata":{"backgroundImage":{"id":"1\*UE0BnYeGMWK3dYApMCKdBQ.png","originalWidth":2000,"originalHeight":761},"logoImage":{},"alignment":2,"layout":6}},{"type":1,"postListMetadata":{"source":1,"layout":7,"number":7,"postIds":\[\]}},{"type":1,"postListMetadata":{"source":3,"layout":4,"number":8,"postIds":\["9562efa23d18","7072ce99e727","671d706b7a19","2cee6c55940c","da0c37537a79","ab1f09be2c82","bfb0c51f6149","90c556aff1c5"\]}},{"type":3,"promoMetadata":{"sectionHeader":"","promoId":"e5c86c91328"}},{"type":1,"postListMetadata":{"source":1,"layout":6,"number":25,"postIds":\[\],"sectionHeader":"Latest"}}\],"tintColor":"#FF396291","lightText":false,"favicon":{"imageId":"1\*MMpkJtmeCME-6BmGNH5l8A.png","filter":"","backgroundSize":"","originalWidth":256,"originalHeight":256,"strategy":"resample","height":0,"width":0},"colorPalette":{"defaultBackgroundSpectrum":{"colorPoints":\[{"color":"#FF6089BA","point":0},{"color":"#FF5B80AC","point":0.1},{"color":"#FF55769D","point":0.2},{"color":"#FF4F6C8E","point":0.3},{"color":"#FF49617F","point":0.4},{"color":"#FF425770","point":0.5},{"color":"#FF3B4C61","point":0.6},{"color":"#FF334152","point":0.7},{"color":"#FF2A3542","point":0.8},{"color":"#FF202832","point":0.9},{"color":"#FF151B22","point":1}\],"backgroundColor":"#FFFFFFFF"},"tintBackgroundSpectrum":{"colorPoints":\[{"color":"#FF396291","point":0},{"color":"#FF5075A0","point":0.1},{"color":"#FF6586AE","point":0.2},{"color":"#FF7A97BB","point":0.3},{"color":"#FF8DA7C8","point":0.4},{"color":"#FFA0B7D4","point":0.5},{"color":"#FFB3C6DF","point":0.6},{"color":"#FFC5D5EB","point":0.7},{"color":"#FFD7E4F6","point":0.8},{"color":"#FFE8F2FF","point":0.9},{"color":"#FFFAFFFF","point":1}\],"backgroundColor":"#FF396291"},"highlightSpectrum":{"colorPoints":\[{"color":"#FFEBF4FF","point":0},{"color":"#FFE8F2FF","point":0.1},{"color":"#FFE4F1FF","point":0.2},{"color":"#FFE0EFFF","point":0.3},{"color":"#FFDCEEFF","point":0.4},{"color":"#FFD8ECFF","point":0.5},{"color":"#FFD4EAFF","point":0.6},{"color":"#FFD0E9FF","point":0.7},{"color":"#FFCCE7FF","point":0.8},{"color":"#FFC8E6FF","point":0.9},{"color":"#FFC4E4FF","point":1}\],"backgroundColor":"#FFFFFFFF"}},"navItems":\[\],"colorBehavior":1,"instantArticlesState":0,"acceleratedMobilePagesState":0,"googleAnalyticsId":"UA-110153932-1","ampLogo":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},"header":{"backgroundImage":{"id":"1\*UE0BnYeGMWK3dYApMCKdBQ.png","originalWidth":2000,"originalHeight":761},"logoImage":{},"alignment":2,"layout":6},"type":"Collection"},"newsletterId":"","webCanonicalUrl":"https://levelup.gitconnected.com/react-typescript-with-webpack-2fceebb8faf","mediumUrl":"https://levelup.gitconnected.com/react-typescript-with-webpack-2fceebb8faf","migrationId":"","notifyFollowers":true,"notifyTwitter":false,"isSponsored":false,"isRequestToPubDisabled":false,"notifyFacebook":false,"responseHiddenOnParentPostAt":0,"isSeries":false,"isSubscriptionLocked":false,"seriesLastAppendedAt":0,"audioVersionDurationSec":0,"sequenceId":"","isNsfw":false,"isEligibleForRevenue":false,"isBlockedFromHightower":false,"deletedAt":0,"lockedPostSource":0,"hightowerMinimumGuaranteeStartsAt":0,"hightowerMinimumGuaranteeEndsAt":0,"type":"Post"},"mentionedUsers":\[\],"collaborators":\[\],"membershipPlans":\[\],"collectionUserRelations":\[\],"mode":null,"references":{"User":{"9f1198c40e60":{"userId":"9f1198c40e60","name":"Richard Oliver Bray","username":"richbray","createdAt":1402044872805,"lastPostCreatedAt":1515586759035,"imageId":"0\*1oP1YJMUZexeIa4D.jpeg","backgroundImageId":"","bio":"Designing products for private jets @Stratajet. Event organiser, speaker and taker of pictures. http://richbray.me/","twitterScreenName":"Ceiga","socialStats":{"userId":"9f1198c40e60","usersFollowedCount":528,"usersFollowedByCount":521,"type":"SocialStats"},"social":{"userId":"lo\_oWk5hyBn3sEP","targetUserId":"9f1198c40e60","type":"Social"},
"facebookAccountId":"","allowNotes":1,"type":"User"}},
"Collection":{"5517fd7b58a6":{"id":"5517fd7b58a6","name":"gitconnected","slug":"gitconnected","tags":\["CODING","OPEN SOURCE","STARTUP","JAVASCRIPT","REACT"\],"creatorId":"47e700e59e44","description":"Our community publishes stories about software development, design, and data science. gitconnected — The community for developers and software engineers https://gitconnected.com","shortDescription":"Our community publishes stories about software development…","image":{"imageId":"1\*5D9oYBd58pyjMkV\_5-zXXQ.jpeg","filter":"","backgroundSize":"","originalWidth":400,"originalHeight":400,"strategy":"resample","height":0,"width":0},"metadata":{"followerCount":2102,"activeAt":1516037037008},
"virtuals":{"permissions":{"canPublish":false,"canPublishAll":false,"canRepublish":false,"canRemove":false,"canManageAll":false,"canSubmit":false,"canEditPosts":false,"canAddWriters":false,"canViewStats":false,"canSendNewsletter":false,"canViewLockedPosts":false,"canViewCloaked":false,"canEditOwnPosts":false,"canBeAssignedAuthor":false,"canEnrollInHightower":false,"canLockPostsForMediumMembers":false},
"isSubscribed":false,"isNewsletterSubscribed":false,"memberOfMembershipPlanId":"","isEnrolledInHightower":false,"isEligibleForHightower":false},"logo":{"imageId":"1\*qQ3VnTs2Amfz029mzWBj\_g.png","filter":"","backgroundSize":"","originalWidth":800,"originalHeight":118,"strategy":"resample","height":0,"width":0},"twitterUsername":"gitconnected","facebookPageName":"gitconnectednetwork","publicEmail":"submit@gitconnected.com","collectionMastheadId":"15b7b454ec61","domain":"levelup.gitconnected.com","sections":\[{"type":2,"collectionHeaderMetadata":{"backgroundImage":{"id":"1\*UE0BnYeGMWK3dYApMCKdBQ.png","originalWidth":2000,"originalHeight":761},"logoImage":{},"alignment":2,"layout":6}},
{"type":1,"postListMetadata":{"source":1,"layout":7,"number":7,"postIds":\[\]}},{"type":1,"postListMetadata":{"source":3,"layout":4,"number":8,"postIds":\["9562efa23d18","7072ce99e727","671d706b7a19","2cee6c55940c","da0c37537a79","ab1f09be2c82","bfb0c51f6149","90c556aff1c5"\]}},{"type":3,"promoMetadata":{"sectionHeader":"","promoId":"e5c86c91328"}},{"type":1,"postListMetadata":{"source":1,"layout":6,"number":25,"postIds":\[\],"sectionHeader":"Latest"}}\],"tintColor":"#FF396291","lightText":false,"favicon":{"imageId":"1\*MMpkJtmeCME-6BmGNH5l8A.png","filter":"","backgroundSize":"","originalWidth":256,"originalHeight":256,"strategy":"resample","height":0,"width":0},
"colorPalette":{"defaultBackgroundSpectrum":{"colorPoints":\[{"color":"#FF6089BA","point":0},
{"color":"#FF5B80AC","point":0.1},
{"color":"#FF55769D","point":0.2},
{"color":"#FF4F6C8E","point":0.3},
{"color":"#FF49617F","point":0.4},
{"color":"#FF425770","point":0.5},
{"color":"#FF3B4C61","point":0.6},
{"color":"#FF334152","point":0.7},
{"color":"#FF2A3542","point":0.8},
{"color":"#FF202832","point":0.9},
{"color":"#FF151B22","point":1}\],
"backgroundColor":"#FFFFFFFF"},
"tintBackgroundSpectrum":{"colorPoints":\[
{"color":"#FF396291","point":0},
{"color":"#FF5075A0","point":0.1},
{"color":"#FF6586AE","point":0.2},
{"color":"#FF7A97BB","point":0.3},
{"color":"#FF8DA7C8","point":0.4},
{"color":"#FFA0B7D4","point":0.5},
{"color":"#FFB3C6DF","point":0.6},
{"color":"#FFC5D5EB","point":0.7},
{"color":"#FFD7E4F6","point":0.8},
{"color":"#FFE8F2FF","point":0.9},
{"color":"#FFFAFFFF","point":1}\],
"backgroundColor":"#FF396291"},
"highlightSpectrum":{"colorPoints":\[{"color":"#FFEBF4FF","point":0},{"color":"#FFE8F2FF","point":0.1},
{"color":"#FFE4F1FF","point":0.2},
{"color":"#FFE0EFFF","point":0.3},
{"color":"#FFDCEEFF","point":0.4},
{"color":"#FFD8ECFF","point":0.5},
{"color":"#FFD4EAFF","point":0.6},
{"color":"#FFD0E9FF","point":0.7},
{"color":"#FFCCE7FF","point":0.8},
{"color":"#FFC8E6FF","point":0.9},{"color":"#FFC4E4FF","point":1}\],"backgroundColor":"#FFFFFFFF"}},
"navItems":\[\],"colorBehavior":1,"instantArticlesState":0,"acceleratedMobilePagesState":0,"googleAnalyticsId":"UA-110153932-1","ampLogo":{"imageId":"","filter":"","backgroundSize":"","originalWidth":0,"originalHeight":0,"strategy":"resample","height":0,"width":0},
"header":{"backgroundImage":{"id":"1\*UE0BnYeGMWK3dYApMCKdBQ.png","originalWidth":2000,"originalHeight":761},"logoImage":{},"alignment":2,"layout":6},"type":"Collection"}},
"Social":{"9f1198c40e60":{"userId":"lo_oWk5hyBn3sEP","targetUserId":"9f1198c40e60","type":"Social"}},
"SocialStats":{"9f1198c40e60":{"userId":"9f1198c40e60","usersFollowedCount":528,"usersFollowedByCount":521,"type":"SocialStats"}}}}) // \]\]>