So, I have had the chance to work with a front-end project at my work which is based on React. I thought a short and concise introduction to React can be useful for those who are not familiar with it.

The idea for a website is that you write content in HTML, style via CSS and add logic to the website with Javascript code. So essentially you will need 3 types of files to have a proper website (not including other static assets like images). The problem with this set up is that you cannot easily re-use stuff.

For example, suppose that you have written a very nice HTML page that shows a progress bar representing how many days in the current month have passed. You probably have a HTML file with div and spans + CSS to add proper coloring and adjustments and maybe some Javascript code (for example to add some effects or tooltips). Now suppose that in another place of the project, you need a progress bar to show user's spend and their budget. So that they can have an idea about how much more budget they have till end of the month. Very similar to the first example, but guess what? You will have to either:

1. Write a new progress bar for this use case, or
2. Copy and paste the html/css/js from the first use case

Both are bad solutions because DRY.

Now, in my opinion, the biggest impact that React has is that it allows you to pack everything you have written for the first use case as a "Component". Let's call it ProgressBar. This component has some inputs (current and total) and the output is a bunch of html/css/js that will show a progress bar with those inputs.

Now, every time that you need a progress bar for day of month, user budget, ToDo list, ... you just need to write: <ProgressBar current={10} total={25} /> and it will be translated into proper html/css/js for you. Now this is not something that React does alone, it will need other frameworks like Webpack, but you get the idea.

Now, for the ProgressBar you have to write a Javascript file (or Typescript) with a function called with the same name. This function has two inputs: current and total. And the output is a HTML string but you don't need to write a string. You write JSX which is a combination of JS and HTML and a transpiler will do the conversion for you. So it will look something like this pseudo-code:

const ProgressBar = (current, total) => {
  return <div className='progressBar'>...</div>
}

You save this in a .jsx file and that's it. You can easily extend above code with more HTML (just add them in the return part), JS (you are writing JS so you can easily add more code or event handlers or ...) or CSS (You can import a CSS file just like JS and then use its class names to assign styling to your HTML).

This is the gist of how React can help Front-end developers re-use their code and make their life easier. Now there are some other important parts in the picture that I have not talked about: NPM/Yarn, Webpack and Babel but this is supposed to be a very short introduction :-)