DEV Community: sajedsoliman

What is Babel used for?

sajedsoliman — Thu, 19 Aug 2021 12:49:46 +0000

Well, before we start talking about what Babel does, we need to figure out what the problem it solved. We know that Web Browsers have JS engines in them, and these engines are responsible for reading our JS code to make our apps functional.

But these engines understand only specific versions of JS and unfortunately, ES6 is not one of them. I think it is now clear what Babel came for, wait not? Ok, Babel takes new modern JS that is not supported or understandable by browsers and compile it into old versions of JS that are supported and understandable by browsers.

That way, we (developers) are happy since we can use new JS features, and browsers are also happy because they receive syntax they understand.

That it 🤷‍♂️ easy right ? I hope you guys enjoyed this short article 😃😃

Shortest & Usefullest React component you'll ever use

sajedsoliman — Sat, 27 Mar 2021 17:17:49 +0000

React (IF) component for conditional rendering.

Have you bothered writing that conditional rendering syntax and getting that curly braces shape, therefore getting chaos and messy code?.

You will never ever use it again with this 1 line of code.

// (elseChildren = null) because you won't always have else
statement.
export default IF(condition, children, elseChildren = null) {
      return condition ? children : elseChildren
}

And then you can use it anywhere.

import IF from "./IF"

function mustSleep({time}) {
    return (
        <h1>
            <IF condition={time >= 9} 
                elseChildren={Write Code.}>
                Go Sleep!
             </IF>
        </h1>  
    )
}

export default mustSleep

Don't hesitate to add this component to your project
and be clean with your code!

I genuinely hope that helped you devs!.
Inspiring by this article: A React "if component"