Search for a command to run...
Hands-on technology leader with 10+ years building scalable, mission-critical systems at Goldman Sachs, Brevan Howard and fast-growing fintechs. Expert in cloud-native architectures, distributed data pipelines and high-throughput systems; experienced in migrating legacy platforms and designing AI-enabled services. Proven track record delivering reliable platforms that process millions of transactions daily.
No comments yet. Be the first to comment.
It’s an Exoskeleton, and That Changes Everything Most people are thinking about AI the wrong way. They imagine it as a coworker:Something you assign tasks to… wait for… and hope it delivers. Sounds re
I didn’t wake up one day and decide, “AI will change everything.”My journey into AI was slower, messier, and honestly… a bit reluctant at first. If you’re a builder, engineer, or curious technologist,
Imagine a programming language designed not just for humans but also for AI.Not adapted for AI. Not retrofitted. Built from scratch so AI can read and write it easily. That’s exactly what NanoLang is. It’s a tiny, experimental language created by vet...
Most PostgreSQL optimization guides feel like laundry lists of settings and indexes. But real performance gains often come from clever ideas, not just the usual tricks. Let’s unpack a few of those ideas in ways that actually make sense for you. These...
Remember when we defeated pop-up ads? Yeah, they're back. And this time, nobody's fighting them. The Good Old Days (Of Terrible Ads) Back around 2000, the internet was a warzone. Visit any website and BAM!!! random windows would explode onto your scr...
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:
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 :-)