Find out how to Setup a React App with TypeScript, Storybook by Aman Mittal

In case you are constructing internet purposes with ReactJS, you might need heard or used TypeScript. They are saying TypeScript is the lacking half from JavaScript’s ecosystem. I need to say, I didn’t take pleasure in writing React apps in TypeScript at first. However over time, I’ve realized this priceless lesson that if you wish to proceed a challenge that has a targeted improvement course of, TypeScript must be the best way to go. Together with sorts and constructions like interfaces as an extension of JavaScript assist to make the event course of extra predictable and safer. TypeScript presents different advantages within the type of code options in a workspace and highlights errors as early as potential too.

On this tutorial, we’re going to try the right way to setup a React app that makes use of TypeScript together with Storybook. It’s focused in direction of
builders who’re wish to study these two vital instruments of ReactJS improvement. It may be a little bit of a problem to setup a TypeScript and Storybook collectively in a single challenge however this tutorial will stroll you thru a easy course of and can showcase you that it isn’t a problem in any respect.

Tld;

• Necessities
• Creating a brand new React app
• Including Storybook
• Including Storybook configuration
• First Storybook Part
• Connecting Crowdbotics assist to Your Github Repo
• Conclusion

🔗

With a purpose to observe this tutorial, you could have:

• NodeJS v8.x.x or larger put in together with npm/yarn
• create-react-app put in globally to in your native dev machine generate a brand new React challenge

Bonus: It’s also possible to, use npx to generate a brand new React challenge with out putting in create-react-app.

🔗

To get began with a React challenge, generate one by operating the under command in a terminal window

create-react-app hello-tsx-storybook
--scripts-version=react-scripts-ts

This command will take a number of moments to execute utterly. As soon as the React + TypeScript challenge is generated you’re going to get the next file construction. Discover how there a few of the information within the root listing are TypeScript’s configuration information and in src listing, the place the magic occurs, has part information (corresponding to App.tsx) with an extension of tsx on the finish of file identify slightly a .js. This means that the part file now helps TypeScript.

To run the app within the present state, open command line interface, traverse contained in the challenge root and run npm begin. As soon as the webpack dev server begins, you’ll be directed to the URL http://localhost:3000/ in a default internet browser window with the next display screen like under.

🔗

Storybook is a person interface improvement atmosphere for UI elements. In case you are constructing a UI and also you wish to showcase all or a few of the functionalities of the person elements however completely remoted from the present app’s lifecycle and dependencies.

Storybook is on the market for a lot of front-end frameworks and libraries corresponding to ReactJS, Angular, and React Native.

To put in Storybook as dev dependency for React, run the next command.

yarn add --dev @storybook/react @sorts/storybook__react

Why set up it as devDependency? We cannot require storybook and its use within the manufacturing construct, ever. So it’s higher to keep it up within the improvement atmosphere solely. One this dependency is put in, you must set up a few of the peer dependencies which can be required. Two of them are react and react-dom which we have already got put in. The remainder of them may be put in utilizing the under command.

yarn add --dev babel-loader @babel/core

Lastly, there three extra dependencies which can be required simply to compile TypeScript.

yarn add --dev awesome-typescript-loader react-docgen-typescript-loader react-docgen-typescript-webpack-plugin

🔗

Earlier than we will make Storybook work, we have to add a number of extra issues. Allow us to begin by creating a brand new listing .storybook within the root listing.

Inside this folder, there are a number of information which can be required to be created.

cd .storybook
contact addons.js config.js tsconfig.json webpack.config.js

The output of the above command goes to be:

For a primary Storybook configuration, the one factor you could do is inform Storybook the place to seek out tales and embody the trail inside .storybook/config.js. In our present state of affairs, we’re going to tales contained in the src/elements listing (only a private choice).

1import { configure } from '@storybook/react';
2
3const req = require.context('../src/elements', true, /.tales.tsx$/);
4perform loadStories() {
5  req.keys().forEach(req);
6}
7
8configure(loadStories, module);

Notice, that, previous to this step, elements listing inside src didn’t exist. You’ll have to create that manually. The above snippet of code is to create a sample such that each one the tales match a selected glob. code is Subsequent file that must be configured is tsconfig.json contained in the storybook listing. This file goes to be accountable to compile tales from TypeScript to JavaScript. Add the next to this file.

1{
2  "compilerOptions": {
3    "baseUrl": "./",
4    "allowSyntheticDefaultImports": true,
5    "module": "es2015",
6    "goal": "es5",
7    "lib": ["es6", "dom"],
8    "sourceMap": true,
9    "allowJs": false,
10    "jsx": "react",
11    "moduleResolution": "node",
12    "rootDir": "../",
13    "outDir": "dist",
14    "noImplicitReturns": true,
15    "noImplicitThis": true,
16    "noImplicitAny": true,
17    "strictNullChecks": true,
18    "declaration": true
19  },
20  "embody": ["src/**/*"],
21  "exclude": [
22    "node_modules",
23    "build",
24    "dist",
25    "scripts",
26    "acceptance-tests",
27    "webpack",
28    "jest",
29    "src/setupTests.ts",
30    "**/*/*.test.ts",
31    "examples"
32  ]
33}

Lastly, add the next code contained in the file .storybook/webpack.config.js.

1module.exports = ({ config }) => {
2  config.module.guidelines.push({
3    take a look at: /.(ts|tsx)$/,
4    use: [
5      {
6        loader: require.resolve('awesome-typescript-loader'),
7        options: {
8          presets: [['react-app', { flow: false, typescript: true }]],
9          configFileName: './.storybook/tsconfig.json'
10        }
11      },
12      {
13        loader: require.resolve('react-docgen-typescript-loader')
14      }
15    ]
16  });
17  config.resolve.extensions.push('.ts', '.tsx');
18  return config;
19};

To finish the setup, open package deal.json file and add the script to run the storybook interface.

1"storybook": "start-storybook -p 4000 -c .storybook"

🔗

With a purpose to proceed and take a look at our present setup to work as anticipated, allow us to write a brand new part and its story. Create a brand new file known as Button.tsx inside elements listing with the next code for the part itself.

1import * as React from 'react';
2
3export interface IButtonProps {
4  kids?: React.ReactNode;
5  onClick?: (e: any) => void;
6}
7
8const types = {
9  border: '1px strong #eee',
10  borderRadius: 3,
11  backgroundColor: '#FFFFFF',
12  cursor: 'pointer',
13  fontSize: 15,
14  padding: '3px 10px',
15  margin: 10
16};
17
18const Button: React.SFC<IButtonProps> = props => (
19  <button onClick={props.onClick} type={types} kind="button">
20    {props.kids}
21  </button>
22);
23
24Button.defaultProps = {
25  kids: null,
26  onClick: () => {}
27};
28export default Button;

The above part is a stateless part (aka useful part). Now, whereas being inside the identical listing, create one other file button.tales.tsx with the next snippet of code.

1import * as React from 'react';
2import { storiesOf } from '@storybook/react';
3import Button from './Button';
4
5storiesOf('Button', module)
6  .add('with textual content', () => <Button>Hiya Button</Button>)
7  .add('with some emoji', () => <Button>😀 😎 👍 💯</Button>);

Go to the terminal window and run the script yarn run storybook. This can open a brand new window in your default internet browser at URL: http://localhost:4000/?path=/story/button--with-text with the next consequence.

🔗

Kudos to you if have reached up to now. You have got configured Storybook work with TypeScript and wrote a narrative for a customized Button part utilizing the TypeScript. This tutorial was simply an introduction. To dive deep contained in the world of storybooks, I’d suggest you to undergo their official docs right here.

Initially revealed at Crowdbotics