Why Typescript?
- TSLint styleguide
- Interfaces
- Code Editor Integration (VSCode, Sublime, Atom)
- Able to validate our code without leaving the editor
- ES6 Features
Workflow
Work
Type
Test
Git Hooks
TSLint styleguide based on our rules & prettier, before you even commit
Commitizen
Standardize commits to show what does the commits has, currently checking:
Feature? breaking change? Fix? Refactor? Docs? Styleguide? Test?
Jest + Enzyme + Sinon
Testing functions, props, state & life cycle methods in React Components
Storybook
UI Testing (this is the only thing in this repo that is not mandatory, but you should definitely use the server we setup!)
Code Coverage
Checks percentage of code covered by tests based on Jest configuration in package.json
DangerJS
- Changes to package.json, but not yarn.lock
- PRs with more than 600 lines of code
- Assign someone to PR
- Checks for new dependencies
Continuous Integration
Git Review
After CI has completed its tasks, we need repo owners to registry a review on the code to allow merging to master
Semantic Release
Releases right version BASED ON COMMITIZEN to Github & NPM
I Know
Workflow
Commit
TSLint
Review
New
Release
Semantic Release
How does it determine to which version should it update? Based on x.y.z fundamentals
Example #1
import React from 'react';
class Example extends React.Component {
render() {
return (
<div>
Hello World!
</div>
)
}
}
export default Example;import React from 'react';
class Example extends React.Component {
render(): React.ReactNode {
return (
<div>
Hello World!
</div>
)
}
}
export default Example;Example #2
import React from 'react';
interface IProps {
message?: string;
}
class Example extends React.Component<IProps> {
render(): React.ReactNode {
return (
<div>
{this.props.message}
</div>
)
}
}
export default Example;import React from 'react';
class Example extends React.Component {
render() {
return (
<div>
{this.props.message}
</div>
)
}
}
export default Example;Example #3
import React from 'react';
interface IProps {
message?: string;
}
interface IState {
title: Date;
}
class Example
extends React.Component<IProps, IState> {
render(): React.ReactNode {
return (
<div>
{this.state.title}
{this.props.message}
</div>
)
}
}
export default Example;import React from 'react';
class Example extends React.Component {
render() {
return (
<div>
{this.props.message}
</div>
)
}
}
export default Example;Questions?
@santospatrick
React Typescript CDK
By Patrick Santos
