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, 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.
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.
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 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, 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.
Top comments (0)