Introduction
We were presented with a different Kata from the ones we had already done. This Kata consisted of doing an application with React + TypeScript step by step as a group so that everyone understands the virtues of using a framework like React and all the possibilities it offers us. The first thing we did was create the project in a simple way:
npm create-react-app blackjack_powah --template typescript
The important thing here is the EmotionJS library, which will allow us to paint components in a different way. As an example, a HelloWorld component is used which will have another component called Greetings inside.
Components
HelloWorld
App.tsx
And HelloWorld contains a normal greeting:
HelloWorld.tsx
This shows us a normal greeting on screen with the name received through props. In the case of TypeScript it’s a bit more controlled than with JavaScript because we have implemented an interface that controls the data type (Which will give fewer errors in the future and with more complex cases where a variable type can mutate)
Great, but now we’re going to encapsulate the greeting in a new component that we’ll call Greeting
Greeting
Greeting.tsx
Simple component that only contains a greeting (the ”?” indicator after a variable indicates that its use is optional, if it doesn’t receive anything through props it won’t use it). Good so far? Perfect, now since we’ve extracted content from HelloWorld.tsx to another component, we’ll have to make a call to that component from HelloWorld.tsx :
Helloworld.tsx
We import the component and call it with its corresponding props. This will do the same as before but it’s more separated. So why do you do it? because it’s great for me to explain how to implement EmotionJS and give styles directly to a component:
Style
After having installed the library, we make a simple component to add color to the sentence
style.ts
Unlike the Greeting component we saw previously, this one doesn’t receive anything from props nor is it a functional component, it only has style. Now it will allow me to paint in “lightcoral” color any sentence that is inside that component:
HellloWorld.tsx
This way I avoid passing the Greeting component a name that I already received from App.tsx going around with the data and thus I make sure that whatever happens to it through props will give style to everything written inside the component
Diagram to explain the different ways we have to do it
STORYBOOK
This part is super interesting. A Storybook allows you to run your project with an assistant in the browser that shows you a breakdown of all components. In pure essence it’s what made me understand what Atomic Design was.
Atomic design
Components → Project atoms
Molecules → Set of atoms (A form composed of buttons and text fields)
Organisms → The navigation bar of the website or the Footer of my page, for example
Templates → The skeleton of your website and the ordered distribution of the different parts
Pages → Your entire website in general
Well, we install Storybook super easy:
Project structure after installing Storybook
Generally without touching anything it works with JS but since we’re working with TS we’ll have to modify in the .storybook folder the extension of the file that appears as .js to .tsx
Due to the folder structure we have in our directory, it’s advisable that each element inside /Components is in turn inside another folder with the name of the component in question. What do we achieve with this? Having everything very well organized in the component folders (Component, storybook, style…)
What good is creating a story? It’s the way the extension has to understand how your project works from the smallest element. For now we have only been able to make a couple of stories but it’s very similar to how a test works. Let me explain: in a test you check the expected functionality of a specific component knowing how it’s going to behave. A story “simulates” the component so that we can see how it would behave on the website. When creating the file we’ll call it [ComponentName].stories.tsx such that:
Greeting.stories.tsx
And our Storybook will pick it up without any problem:
In the images you can easily see that there are 2 components, 1 I’ve styled with EmotionJS and the other I haven’t, but I have both components with stories and I can see them even if I don’t have them implemented at the same time.
The project is only started, there’s still a lot to do, but I hope that with this brief summary of the first session I can help you understand a bit better I just have to thank Rubén Zamora for offering to teach us these super interesting tools.
Comments