The begining
Tags: node, tailwindcss, typescript, react
Published: 2022-05-19 16:15:18

Was made available to us a layout in Figma, provided by _Ilana Mallak_, with all the colors, icons, images, hoovers and fonts we will use, including light and dark mode colors. That project will have the Mobile version and the Desktop version, so the responsiveness was thought to bring a better experience to the user. This project is simple, but it covers many Full-Stack technologies, so we can acquire the most knowledge. We will learn **React, React Native, Node, Tailwind CSS, Headless UI, TypeScript, Automated Tests, database** and much more.

First of all, we have to configure our _development environment_, installing **Node.js**, available [here](https://nodejs.org/en/), or a package manager, as _Homebrew_. Besides that, we will use VSCode.

A **SPA**, or _Single Page Application_ brings a better user experience through the feeling of navigating between pages much faster. SPA applications are always run on the client side – in this case, the browser. Back-end and Front-end are separate, so the back-end receive requisition and renders according to the device front-end. When new pages need to be loaded, there is no need for a new request to the server: these pages are loaded through JavaScript routines, eliminating the need for requests to the server to obtain the new content to be rendered: from the first load of the application, all interaction for loading content happens exclusively on the client side through JavaScript. As example of SPA we have _Twitter, Gmail, Google Maps and Trello._

![Image of SPA scheme, which uses separate backend and frontend](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7337if9y5vg7qds8zc6r.png)

**SSR**, or _Server Side Rendering_, reverses the rendering process, bringing some of the SPA application rendering effort to the server, similar to traditional loading. SSR can provide users with more efficient application loading as part of the rendering is done on the server. Back-end and Front-end stacks together. As example we have _Wordpress, Magenta, GitHub_ and others.

![Image of SPA scheme, which uses backend and frontend together](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1fhepiauv4vfgzamo58h.png)

**So lets start!**

In terminal we digit `npm create vite@latest`, choose name _web_ to the project, then choose the Framework that we will use, in case we select **React** and **React with TypeScript**. So, the project is created. Just run _code ._ to open VSCode.

_Vite_ is a tool that makes our browser understand the most modern JavaScript. After that, we run `npm install` to install the dependencies of our project. We made a clean in the files created in our directory, and run `npm run dev`.

Before we proceed, we have to know two things about _React_: **components and properties**. **Components** is a _function_ that returns _HTML_. It must have a _capital first letter_ capitalized, not to return a _HTML tag_. **Properties** is like a _atribute_ of the component.

After that, we will configure our app with **Tailwind CSS**. It is a utility-first CSS framework packed with classes like _flex, pt-4, text-center_ and _rotate-90_ that can be composed to build any design, directly in our markup. It  bring us a lot of productivity, and to install it enter in the official [site](https://tailwindcss.com/docs/installation) and install using _PostCSS_. It may be that our code doesn't look so pretty, but we gained a lot in productivity. But we can create classes in the tradicional way of the CSS too, Just put @apply and all properties of that class in the .css file.

We will begin making the mobile interface. This technique is called _Mobile first_. Mobile first is a project that creates web projects and websites first on mobile devices, and then adapts them to desktop and other platforms, and it brings some vantages like better ranking on Google, best user experience, increase in brand credibility, page loading optimization, among many others.

We create a folder in the _src folder_, named **components**, and then a _.tsx_ file named _Widget_. Export the function in the _App.tsx_ file. We will create a _Trigger Button_ for _Feedback_, and the icons can be found in [Phosphor icons](phosphoricons.com/), and they have direct integration with React, so we can install running `npm install phosphor-react` in the terminal of VSCode. That way we can **import directly** into our project using the icon as a _component_, with various _properties_, like weight, size among others.

Let's start by passing him a class. Its very important for our project to know about the concept of **rem units** in CSS, which is a relative sizing unit whit excellent browser support. **1rem** equals the font size of the _html_ element, which, for most browsers, has a default value of **16px**. Using rem can help ensure consistency of font size and spacing throughout our _user interface (UI)_. With that in mind, start to code the design of this button, and it is impressive the facilities that Tailwind brings us. With a few lines of code we finish the functionality of the first component. This button is used to _open/close_ something, so that thing will change with an _action_, and this is called **State in React**, which is a _variable_ like any other in JS, but React looks at this variable and **every time** it has its **value changed** it **will create** the **interface** of this component **again**, with this new value.

It is very important for our project to think about accessibility, and this is easier to think about from the beginning of the project, and it serves as an aid for websites, tools and technologies to be designed and developed so that people with or without disabilities can use, navigate, interact and understand the content, with autonomy. In our case, we can navigate the page using the keyboard, but it doesn't warn us when a new element appears on the screen. To fix this,
we can use the tags **ARIA**, _Accessible Rich Internet Applications_, that define ways to make web content and applications more accessible to people with disabilities. But we have several libraries in React that make our work easier, like **reakit**, made by a brazilian, which will be called **ariakit**; **radix-ui**, it is also an accessibility library, and **headlessui**, that we will use in our project, because she is designed to integrate beautifully with Tailwind CSS. Run `npm install @headlessui/react ` in terminal o install and import _Popover_ in our _Widget.tsx_. The coolest thing is that the popover controls all this part of state, so we don't need to define a function to speak when it's open/closed. Making the necessary modifications, as per the documentation, our project now has several ARIA accessibility.

And so we concluded the first class of this event, in which we learned to configure the **development environment**, how a **SPA** and an **SSR** work, important **concepts of React**, use and configure **Tailwind CSS**, **rem**, use **React States**, concepts of **accessibility**, use of **different libraries** and much more.