DEV Community: Titouan Sola

I tried Svelte

Titouan Sola — Sat, 30 May 2020 10:15:44 +0000

Welcome to the first article of a series I named "I tried ..."!
My purpose here is to manipulate multiple technologies (new or older) and give my opinion over it! I'll try to write in a small amount of time, so I won't loose it procrastinating! Thank you for reading, let's go! ;)

What is Svelte ?

Svelte is a component oriented framework for the web, helping you building reactive applications. It introduces a new file extension .svelte as it brings its own compiler. According to Svelte landing page :

Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

So it remains fast in the browser (and we like it).

Write components

To write Svelte components, you'll have to mix JavaScript, CSS and HTML within the same .svelte file using tags. This singular approach looks like this :

<script>
    let count = 0;

    function increment() {
        count += 1;
    }
</script>

<p>Hello World!</p>
<div>
    count : { count }
</div>
<button on:click={increment}>Increment</button>

<style>
    p {
        color: blue;
    }
</style>

As you can see in this short example, you don't have to manipulate DOM element with JavaScript, but write some kind of JSX like you will do with React, as it's really close to HTML syntax but mixed up with JavaScript inside, using brackets.

Directives

Pay attention to the way we implemented mouse click event handler. The on:eventName directive is here to tell Svelte you want to run a function when event 'eventName' is triggered. Svelte lets you the flexibility to create your own events with createEventDispatcher API, so you're not constraint by native ones.

There are several useful directives like this one. Most used will be bind:something of course, as it lets you bind variables you declared in your component script, so you can make re-render the element on changes (like <input bind:value={value} />).

Component life cycle

All component oriented frameworks come with utilities to manage components life cycle, and Svelte is no exception! There are four : onMount, onDestroy, beforeUpdate and afterUpdate. Just read their names to understand what they do! You just have to provide them a callback, and they will execute it during the right cycle.

State management

In case you want to build a store to manage your application states properly (as you'd do with Redux, RxJS, MobX or whatsoever) Svelte provides a full utility tools panel! Don't need to smash another external library, just focus on your code!
You are able to create two kind of stores : writable or readable.
The main difference is that writable are mutable by 'outside' using their set method. To get their value, you'll have to subscribe to them, then unsubscribe (same thing with readable stores, of course) :

import { writable } from 'svelte/store';

const count = writable(0, () => {
    console.log('Subscribed!');
    return () => console.log('Unsubscribed!');
});

const unsubscribe = count.subscribe(value => {
    console.log(value);
}); // logs '0'

count.set(1); // logs '1'

count.update(n => n + 1); // logs '2'

unsubscribe();

Nothing new for you if you're used to observable!

Things I liked about it

There are so much things I love with Svelte, I don't know where to begin!
Svelte file structure is probably the solution I expected for my frustration using React or Angular. None of this two fully satisfies me on component construction (structure, style and behavior).
Here, I have the power to assemble every part of a component in a single file, with no harm to keep control over them.

I also really like state management simplicity, I found it really understandable, no black magic behind.

If you read my article 'A quick comparison: React / Angular' you may have noticed that Svelte is in top position of smallest bundle size, where React, Angular and even Vue are way behind (from 4 to 20 times heavier!). As developers, we should always worried about this, as it will impact final users.

Things I did not like about it

Actually, there is no really aspect of Svelte that I really disagree with, but I found points that can be improve to make him the best framework.

Whether hot-reload is available with Svelte compiler, I found some weird behaviors sometimes, I had to destroy the entire bundle, and recompile everything again to see my changes be effective, but it was rare.

Svelte community is great, and even if they are working on their communication over job opportunities, the industry is slow, and jobs evolution still push same tools (React, Angular, Java SpringBoot, .Net...). I hope in the future that we'll see more Svelte jobs opportunities ! If you're looking for one, you can follow this Twitter account.

Conclusion

Svelte is a wonderful framework, full of potential, and I'll be watching really close its development. Concurrency is rude, but I think Svelte has everything to raise in the top web-client frameworks of this decade.
Even more when you know all the ecosystem dev team is building around it!

If you want to learn more about Svelte, check their documentation and start a little project to make your own opinion!

That's all folks! Hope you liked it! Stay safe, drink water, and happy hacking!

You made NO joke really ?
Sorry no time catch up later bye ++ ciao
Am I a joke to you ?
:)

About the author

Follow me on my socials!
Twitter : https://twitter.com/TitouanSola

Devto : https://dev.to/titouansola

Website: https://titouansola.dev

A quick comparison: React / Angular

Titouan Sola — Thu, 14 May 2020 13:31:46 +0000

Yes, I know, this topic has been debated many times, and will be, for so long. I'm not the first to try to explain differences between those well known entities, and neither the last. My purpose here is to bring my vision over it, and give comparison methodologies to new developers, such as students, interns or juniors.

Well, let's get into it!

Philosophies

There's no tool in this world which serve no purpose. Especially in tech industry! Currently, developers never used as many tools as before (and maybe a return of minimalism because of it) and choosing them hasn't been this difficult over the past years. Out of this frameworks ocean, there are two (three actually) of them which have demonstrated their efficiency : ReactJS, and Angular (and Vue.js but I won't talk about it as I don't know it well).

React

According to React landing page :

"React is a JavaScript library for building user interfaces."

"React makes it painless to create interactive UIs."

"Declarative views make your code more predictable and easier to debug."

"We don’t make assumptions about the rest of your technology stack, so you can develop new features in React without rewriting existing code."

It was published for the first time in 2013 by Facebook. Jordan Walke, his father, was influenced by XHP, a PHP library based on HTML component which was also developed by Facebook, released by 2010.
The major innovation was the implementation of JSX (JavaScript XML) as an extension to JavaScript.
JSX gives the ability to declare HTML tags as JavaScript variables, and use scripts inside the XML architecture.
As it probably seems a little blurry, I will give you an example :

class App extends React.Component {
    render() {
        const meal = 'pasta';
        return (
            <p>The best meal in the universe is {meal}. No doubt.</p>
        );
    }
}

Angular

According to Angular landing page :

"One framework. Mobile & desktop."

"Learn one way to build applications with Angular and reuse your code and abilities to build apps for any deployment target."

"Build features quickly with simple, declarative templates."

Angular (known today as Angular 2+) is a rewrite of AngularJS. from JavaScript to TypeScript, leaving behind jQuery, Angular is quite different from its 2009 predecessor, and will be published only in 2016. As the new version is pretty young, many companies haven't made the upgrade yet, and you can still find jobs using it.

So, Angular is a framework based on TypeScript, providing now a multitude of core APIs, as it's meant to be used (almost) alone for building client side application. It uses MVC pattern, as you write HTML template and a controller for each of your components, and declare data model with the help of RxJS.

Now that we know the different philosophies, it's time to code! Let's see how we build a minimal application with both frameworks.

Hello World!

If it's your first time with these two, be sure to have Node.js installed on your computer!

React

React needs only two dependencies, you can install them with this command :
npm install react react-dom --save

We'll start with a simple HTML file :

<!DOCTYPE html>
<html>
    <head>
        <title>Hello World!</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js"></script>
    </body>
</html>

next to it, create an index.js file, which contains :

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
    render() {
         return (
             <div>
                 Hello World!
             </div>
         );
    }
}

ReactDOM.render(<App/>, document.getElementById('root'));

What's happening here ? Once the script is injected, all the magic is in this call :
ReactDOM.render(<App/>, document.getElementById('root'));

We are rendering a React element into the DOM. The container 'root' is selected through document, the JavaScript object representing the DOM.

Is it that simple ?

Yes! Now we want to see our app, we need to bundle and serve it. You can use Parcel for this purpose :
npm install parcel-bundler --save-dev
Then :
parcel index.html
Open a browser and go to localhost:1234, you must see your app saying 'Hello World!'

Angular

Angular requires to use a CLI to build yourself a usable project, I recommend you to install it globally :
npm install -g @angular/cli

Then, we will initiate our project with :
ng new my-angular-app

Now you have a whole project ready to run with npm start.
In a way to render 'Hello World!', I invite you to just write this in src/app/app.component.html :

<div>Hello World!</div>

Open a browser, and go to localhost:4200.

So, as you can see in your index.html, there's a strange tag in your body : <app-root></app-root>. In fact, this tag refers to your component selector, as you can see in src/app/app.component.ts, as a parameter of Component decorator. The mechanic of component encapsulation is base on referring to a selector as a tag, in your templates.

Well, although it seems more complicated to use Angular, actually the CLI brings useful features, like component, module or directive generation. React may be only a library, create-react-app is a useful CLI package to quickly build a React project, you should give it a try if you're a beginner!

Architecture

React

According to React paradigm, there's no mandatory architecture! It gives you freedom of settling your folders the way you want, or adapted them to a specific use case. Besides, I advise you to separate wisely your different types of file, like services / components / containers / pages...
If you're a Yarn user, don't hesitate to use packages!

Angular

Previously, when we used the ng new command to create a workspace. As it's described in this guide, workspaces may contain multiple projects, but by default, the 'new' command generate also an application, which follows a specific structure.

But there's a hint. Angular CLI offers you the ability to generate components, and create for you a folder with 4 files inside :

A TypeScript file, which is your component controller;
An HTML file, which is your component template;
A style file (CSS/SASS/SCSS, whether which one you have chosen);
An other TypeScript file (ending in spec.ts) which is a testing file for your component.

This folder is created in your src/app directory, as the 'root' directory for Angular components. Whether it seems to be enjoyable using such commands, what happens in a real world project, with twenty, fifty, a hundred components, services, models... ?
Thankfully, you can provide a path to your component when you're naming it, by adding slashes. For example, ng g c components/todo/todo-list will create a folder todo-list in src/app/components/todo. as I told you, src/app will be the 'root', so it's up to you to arrange your directories the way you want!

What's the point of this section then ?
To show you that both frameworks let you organize your project the way you want, at the exception that Angular provide a quicker way to add and import a component to your codebase, but you have to tell him where you want to generate it, and it makes your app.module.ts bigger and bigger over time...

Bundle size

When your project has to be the tiniest, the choice between the technologies you will be using is really important, as they don't bundle their sources the same weight. Many studies confronted the most popular frameworks on their bundle size for a comparable 'real world' project. That being said, with the earliest version of Angular and React, numbers changed a bit, but you can be assured that rankings stayed quite in place.

According to this article from freecodecamp, there are thee result for frameworks bundle sizes, in kB :

Wait... Why React and Angular appear multiple time ?

Because in a real world project, you will probably not use Angular neither React alone, so it's important to mention the most used side kicks!

Like Robin for Batman ?
Absolutely!

Ok but what this chart tells us ?
Basically, React has the potential to be lighter than Angular, depending on the dependencies you choose.

Depending on the dependencies ?
Isn't that poetic ?

Not really.
I hate you.

Integrated APIs

By definition, each framework comes with many utilities that make them autonomous, or not. Let's see what tools React and Angular provide!

React

Besides make DOM manipulations easier, there's no other features React gives to us. That being said, after version 16, and the apparition of Hooks, the community raised new functionalities very useful and time saving. But is that really 'React' ? Well, as the project is open source, and considering it is only a library (so not reeeeeally a framework), we can consider at least those new packages are come from the 'React Universe' as Hooks is a specific to React. I'm tempted to say that this extended universe is the real React, but it's just my opinion!

Angular

HTTP requests, Forms, animations... Angular is full of services, sometimes easy to use, sometimes... Well, I'm not giving my view on this right now! But it is certain that Angular stands by itself, and can be used relatively quickly, with unique documentation.

What's important to know here is that if you choose React, you will have to find other libraries to build your features, but there are plenty wonderful packages out there so it won't be a problem if you like them. In the other, Angular is provided with almost every tools you need, but you have to get used with Angular documentation.

So you're saying Angular doc is awful ?
No, just saying you have to get used with it. No opinion here!

Community and job opportunities

Here again, I will need charts, and what can be better than StackOverflow to provide them ?

StackOverflow made a survey early 2019, and near 90 000 software developers answered! Find all the results here.

Let's focus first on developers feelings, by observing the 'Most Loved Web Frameworks' charts :

Near 20% space between React and the pair Angular/Angular.js, that's quite impressive. But, we have to put back in context. If Angular was coupled with Angular.js, it may explain those numbers. See, the first version of the framework is in decline for many years, and most of developers do not want to touch it again. Version 2 is very young, so there's still a big part of developers who work with Angular.js, because their project hasn't made the switch. I think Angular might be at least à 60-65% on this chart if it would be on its one, but I'm not convinced it can reach React.

And that, again, it's your opinion.
I'm aware of that, Mr. Im-always-against-you!

Focusing on the job offers, this article summed up in a chart gathering the most popular job board on the internet :

(Angular: Red / React: Blue / Vue.js: Green)

This one gives confidence in Angular developers! Yes there are jobs for you! As you can see, both offer quite the same amount of jobs around the globe, and are really far away from their third concurrent, Vue.js.

Conclusion

So who wins ?
Nobody wins, cause it's not a fight!

After this cheesy pre-conclusion, you probably want me to give my verdict. But first, I want you, student, young developer, to know that the best technologies in the world are the technologies you are the most comfortable with. You will never build your entire career on only one framework, neither one language. You must make your own opinion over new released technology by trying them! This is how you will slowly become a confirmed developer.

My point of view

I am a React lover. I admit that if I had to choose, I'll go React every time. Because React fits me very well, even more now, with the Hooks. The feelings I got by coding with this library have no equivalent. But, I'll not throw Angular to trash. In my opinion, Angular is a good choice for two use cases :

You're a student, you never built a web application before, you barely know your basics on HTML CSS and JS, Angular is a perfect choice for you to enter this world.
You're a big company, you have big and strong process, Angular will help you to maintain your structure.

The reason I don't particularly like Angular, is because of its documentation, and sometimes, the difficulty to implement what I found really basic with React (like forms). To be honest, React documentation is not the best, but it does the job.

That's it for me! I hope you enjoyed reading this article, it's my first time as a tech comparator. Don't hesitate to nicely comment which one you prefer between both frameworks, or give me the ones you want me to talk about!

Stay safe, drink water, and happy hacking!

How to rock your computer science internship

Titouan Sola — Sat, 09 May 2020 08:43:16 +0000

Internships are great first footsteps in the industry, after have been sitting to class, exams, student projects.
Even if teachers tried to explain you the basics of corporate life (which is by the way, an 'How to live in society' like), you are feared by the unknown, as you have probably never been into those kind of strange places named opened space.

I graduated last year (2019) from an engineering school, after spent my two internships in a startup from South of France. Since, I've worked for few clients, and I have now the fresh experience in mind to tell you, students, how to rock an internship, and what to expect from this world.

1. Motivation

Nothing comes without motivation. You are the only one who could make knowledge flowing into your head. Nobody can do it for you. You, and only you, have the responsibilities for your progression, whether at school, work and even in life. So the first question you have to ask to yourself is :

Do I really want to step up ?

If the answer is no, you can close this tab, and let your boss using your time to do boring stuff.

If the answer is yes, get prepared to overcome your own abilities, and be boosted by positive energy! You don't 'solve problems', you come with solutions. You don't fail, you're learning. You don't 'ask for help', you need experience, knowledge, you're no more a student, you're an engineer.

Have you ever wonder what it feels like to build a tool people actually use ? You should be excited by this idea :
Somebody out there, will get to his device, open a new tab, write something in Google, get redirected to an interface, and start using features you implemented. You have to feel the enjoyment of the user, to be in his head, at every moment of his passage through your tool. You should ask yourself : Why does he clicks on this button ? How many steps does it requires to do this action ? Is it a pain to achieve that ?

You won't always be guided by an UX/UI design team who answer these questions before, sometimes, you will have to take a step back of what you're doing, and think about it.

How I'm supposed to anticipate the user behaviour ?

OK, I see you want some concrete actions to do, first day.

2. Learn to learn

On your first day, be on time, and let your tutor guide you. You may receive a professional computer, or any stuff required to your job. If you don't already know the job they gave to you, they will finally talk about it. Be aware, this is the moment you have to be really focus. Capture any details. And, please,

TAKE NOTES.

WITH A PEN.

Write down the five W :

Who are the stakeholders ?

Every person or entities around the project. From users to developers, subcontractors, project manager, VCs...

What is the project ?

Is that a web application ? A software ? A plugin ? A bread toaster ? Which technologies are required ?

Where will it be used ?

Think about context here, and what it implies to your tool. At home (Understand probably peaceful environment) ? At a restaurant (No computer then, think mobile, lightness, smooth) ? At a party (Fun, network, jokes...) ? At work (performance, resilience, speed...) ?

When will it be release ?

Time is important, you can easily measure the scope size by the time planned to work on it. Years projects are mostly to become business software, whereas 1-2 months might be just a quick use tool, implemented over another software (like a plugin).

And finally, most important, why is this project alive ?

This is where you have to know every details. Why ? Why do anybody need this tool ? Why will they choose this over that ?

Once you are able to answer those questions, it's time to open yourself to your new environment. I hope your manager will present to you the team, their job, they are your main assets during this journey.

What about me ?

You don't know yet what you have to do ? Ask your manager ! You need access to code repository ? Ask your lead developer ! You are hungry ? Why didn't you eat this morning ?

3. From tests to complete feature

Don't expect your internship mission to be 'Land this rocket on the Moon'. First, because you're not at NASA (And if you are, why are you even reading this ?) and second, because your company knows you're just a student. They don't want you to be a senior developer, they want you to dive into their process, and shape your mind for their needs. If you provide a good value, they'll give you a job, because they don't want raising talents for their concurrents.

In this context, there's 2 possibilities :

You applied to a startup, and they'll probably give you some small responsibilities, so they can scale over you. Not a bad thing if you're a hard worker, and like learning things by yourself. You may be ending your period being an essential piece of the system. As startups needs to grow fast, with few incomes, don't expect a big salary.
You applied to big company, and you will be running tests. At least at beginning. It's now in your hand to show what you are capable of, and free yourself, to finally have rights to push your first merge request. Understand that you will not have any responsibilities, as projects cost millions of dollars (I don't overestimate this), and will certainly not bet on you.

2 bis. You applied to big company, but they placed you on a 'dedicated to interns' project. Those projects are sold for a minimal budget to clients, as they accept it will be run (almost) only by juniors. In this particular case, you will feel like in a startup environment, but with larger process, and much more people. If you are here, refer to case #1, more then #2.

As you imagine, both cases have their ups and downs. Inertia of big companies leads to employees often formatted by process, but knowing where they have to go. Startups philosophy is driven by their values, more than academic consensual rules.

Personal thoughts over this choice
In my opinion, I'll choose startups if I need better/new skills, and big structures if I want to build a career path, especially if I wanted to divorce with tech, and go to management, commercial, human resources...

So, basically, if you're stuck into tests running, don't panic, and show you can code.

I want to do it, but they won't let me, what shall I do ?

Make suggestions. Propose some improvements where you think it will be good. By making those tests, you'll start to know, step by step, the entire codebase, how parts are related, and then you'll be able to propose yourself to write code, even if it's just refactoring it. By refactoring, your colleagues will see you can handle complexity, until finally, build your first feature. Don't forget to use the same methodologies as you commit your code!

4. Make mistakes, ask for help

Of course, not on purpose! You will make mistakes by trying new concepts, then fix it. I always keep this phrase in my head when I start a new project :

A mistake once is finding out, twice is improvement, there's no third.

This is 'learning by failure', and it's not a bad thing. It will show to your superiors your abilities to memorize, and keep a progression.

Again, don't forget to take notes. Write down every issues you have faced, and how you resolved it. If you encounter it again, you have the knowledge to overcome. In the end, your head will be full of tricks, that make you a better developer.

Sometimes, an issue is too complicated for you. And it's ok, you are not supposed to know everything! Ask for help. But first, have you tried to Google it ? There are several rules you should respect in order to make a good request to a senior. When you're facing a bug :

Log everything you can to spot the error (or use a debugger)
Google it if you don't understand it
Do not copy paste anything from Stack Overflow, PLEASE, it shows.
Ask your siblings (another intern, or a junior dev) Have you experienced this error before ? Is it project specific ?
Ask to a senior, and tell him/her you have done those steps. They hate to be disturb by a guy who can't Google something, like everybody else.

Some manager ask, during a daily meeting, for any issues blocking your progression. Do not wait for daily meeting to talk about it! You can't spend a day just waiting because you're stuck, you are waisting time, money and energy (managers don't like it, and honestly, who can blame them ?). In a contrary, tell them you've faced it, and resolved it, or that you have solutions in mind to try before declaring you stuck.

Conclusion

Don't worry, even if I portrayed a kind of dark world, companies don't make people, people make companies. People with fears, expectations, insecurities, rules, just like you. You will not become a "2.0 slave". You ever have freedom to quit your job if you don't feel well about it, and opportunities to grow up, just the way you want. There's a plenty of really great companies out there, you just have to find the one which fits you the most. And if you don't have corporate mind, go freelance like me! Maybe I'll write another article on that topic.

Concerning your expectations, yes you will learn things, and probably much more than during your scholarship. Just because you won't become a great baker by watching YouTube tutorials. Talk to people, learn their story, their universe, and build yourself a network.

I hope you know now how to prepare yourself to beat this like a rockstar, because this is what I want you to be! Yeah!

Stay safe folks, hydrate yourself, and happy coding!

React Style : 4 ways to apply style to components

Titouan Sola — Sat, 02 May 2020 17:38:06 +0000

What's the matter with styling React components ?

React, as you may already know, is a JavaScript library used to build complex web applications by a component architecture. Its paradigm is to provide a total freedom of structure, without requirement nor unique way to achieve something.

Beside this liberty, React offers a wide land of potential mistakes and hard to maintain features if you let yourself fall into laziness of non-testing your code, don't clarify your own folders, or miss opportunities to write reusable code.

And then comes style. Some coders like me use to have nightmares just thinking of CSS, and sadly, React don't show up with a dedicated solution. Well, in fact, there's one, and we will find out!

Basic styling with React

If you ain't new to React, you're probably used to style components like this :

const Pastas = () => {
    return <div style={{ backgroundColor: 'yellow', marginLeft: 15 }}>
        Best meal ever. Don't @ me.
    </div>
};

And you are not wrong! This is the way React gives us to style component. And now, you may have so much questions like : 'Okay but how about conditional style like mouse hover or focus ?' 'Should I really use magic numbers EVERYWHERE ?' 'What sauce does he use with his pastas ?'
And I can't blame you for that, because, it's not possible, without escaping good ol CSS. You just have to pass a POJO to the style property of any HTML tag, React applies it (kind of magic isn't it ?)

Can you get to your point ?
YES i'll do it.

As React lets you to use any package through the Node universe, I identified for you 4 ways to style properly your components, with reusable, customizable and clean code.

The 4 ways to the apocalypse

(because you rock)

1. Pretending to be Angular

Oh really ? Why not using Angular then ?
That's an other subject, I may discuss within an other article! But for now, it's time to benchmark!

Angular 2+ creates a shadow DOM for every nodes within its structure, so you'll be able to style your component one by one, using a CSS / SCSS file for each of them.

That's not a Node package
Can't you just be nice with me for once ?

Basically, you just have to import your stylesheet directly into your component file, and use class or even id, like this :

.pastas {
    background-color: yellow;
    margin-right: 15px;
}

And then :

import './pastas.css';

const Pastas = () => {
    return <div className="pastas">
        I use tomato, mushrooms and garlic on it.
    </div>
}

Surprisingly easy, but efficient. You retrieve full power of CSS (yes I swear, it is) applied to your now wonderful component.

Warning! Mocking Angular doesn't make a shadow DOM to appear by sorcery. You'll have to be sure you don't override some classes in an other file!

To prevent that, give you a strict class naming (the same you've been doing with your variables, huh ?) and build a sweet panel of reusable classes, in your root folder (In styles/ for example) for buttons, inputs, tables... whatsoever.

2. The big three : Material, Bootstrap, Tailwind CSS

I'm too lazy to write my own CSS framework
Me too, and that's why some nice gentlemen, pour what we call...

Some salt on your pastas ?
CSS Frameworks. Please be focus.

There is A LOT of them out there, for different use cases, different paradigms, and different levels of liberty. I selected those I consider to be the big three, mainly used in the industry. If you're curious, check this CSS census.

Material

Instigated by Google designers, Material has its own React package, providing plenty of already designed and reactive components, such as cards, modals, popovers, bread crumbs... Of course, it follows the Material Design guidelines for yourself, and you just have to focus on placing your UI elements together.

Bootstrap

You may know Bootstrap if you have a Twitter account. Bootstrap main particularity is the use of a grid to place and size elements on screen.
Divided in twelve columns, any component can place its children wherever you want.
You may want to stack elements vertically, and Bootstrap rows are here for that.
There's also a React library to use Bootstrap component.

Tailwind CSS

At this point, I never have used Tailwind CSS, but I will surely give it a try, as it seems to be a convenient way to use classes advantage, without being stuck behind a strong framework, hardly customizable.

To keep it simple, Tailwind CSS use a configuration file, and a classname based syntax to provide style to component. As it is framework agnostic, you don't have to worry, and learn once for all the syntax. I let you visit their website to see what's going on!

3. Stylesheets in JS (Styled-components, Emotion, Aphrodite)

OK cool but my components don't fit with anticipated use cases of CSS Frameworks, what should I do ?

CSS Frameworks may be too restrictive on their styles, and you might want your app doesn't look the same as every other ones.

Alternatively, you can find Node packages such as style-components, aphrodite or even emotion that I particularly like.

Each of those API are different, but are known as CSS in JS (kind of) solutions. You can see them as an improvement of React API, as they simply create Component for you, or just use className property.

Again, I can't advise you more to write reusable code, by implementing atomic components, so you can add them where they're needed, and by updated at one place. for example, using emotion :

// Button.js
import styled from '@emotion/styled';

export default styled.button({
   backgroundColor: 'yellow'
});

// Component.js
import Button from './Button';

const Component = () => {
    return <Button>Buy Pastas</Button>
};

4. Context ?

Great! What's the forth one ?
There's no forth one.
What ? Are you a liar ?
No, let me get this straight.

What happens if I suddenly want to implement light and dark mode on my application ? How I'm supposed to implement my UI Components with that constraint ?
You can use React Context.

What is React Context ?
React Context is an amazing API to help developers to avoid props digging hell. If you have already written some components, you might have noticed that 3, 4, 5 or even 10 nested components is a pain when you want to pass a property from the original parent to the last child. That's props digging hell.

Fortunately, React developers take care of their users, and implement Context API.

Because this one is off-topic, I'll let you read the documentation.

Can you provide a link at least ?
There you go.

So, I want to implement a light/dark mode, I'll build it over my previous example :

// AppContext.js
import { createContext, useContext } from 'react';

export const AppContext = createContext({ darkMode: false; });

export function useAppContext() {
    return useContext(Appcontext);
}

// App.js
import { AppContext } from './AppContext';
import Component from './Component';

export default () => {
    return <AppContext.Provider>
        <Component/>
    </AppContext.Provider>
}

// Component.js
import Button from './Button';

export default () => {
    return <Button>Buy Pastas</Button>
}

// Button.js
import { useAppContext } from './AppContext';
import styled from '@emotion/styled';

const StyledButton = styled.button({}, ({ darkMode }) => (
    {
        backgroundColor: darkMode ? 'black' : 'white';
        color: darkMode ? 'white' : 'black';
    }
);

export default ({ children }) => {
    const context = useAppContext(); // = { darkMode }

    return <StyledButton {...context}>
        { children }
    </StyledButton>

It will demand you to alter context values with some actions, but this is another story ;)

Although I used emotion in my example, the point here is that you are totally free to use any of the three first methods or packages combined with React Context!

Conclusion, and personal thoughts

Before concluding, I hope you enjoyed this article, it's my first one on tech, first one in english, and first of a long dynasty of interesting articles, dedicated for students, self taught programmers or curious!

My point with this article is to show that React styles can be complicated to maintain, if you don't take it seriously, but so it is with databases, naming your variables, Angular...

First method is the closest one to the old way of building websites, with only HTML, CSS and JS. Easy to maintain (especially with SCSS constants!) But not really suitable for React.

CSS Frameworks are good, if you don't want to spend time or money on your design, and focus on programming. I don't recommend them if you already have a mock-up, mostly if it doesn't look the same. Because some of them don't really let you customize shapes, colors, themes, it can be more time consuming implement one than do it yourself, from scratch.

CSS in JS packages are a good solution for this, but, you'll have to relearn them every time, as their API quite diverge.

So keep in mind this table :

Profile	solutions
Boomers	CSS / SCSS files
Noobs / Lazy devs	CSS Frameworks
Designer born	CSS in JS

Thank you for reading me, it has been a pleasure to write this down!

Stay safe, enjoy life, and happy coding!