Hey DR! I am a pretty inexperienced programmer who's learning about JS. When I was writing vanilla JS to do some simple DOM manipulation, JS seems like a pretty familiar language. However, when I start to learn about different frameworks (React, Express), the way that they code stuff (IDK how to pinpoint specific examples, it's just an overall impression) becomes very different from my experience with other programming language. I am wondering if anyone have any suggestions, have felt the same way, or know how to overcome this phase.

ps This is a general question. Please don't be pissed for lack of technical detail....

It is, React use jsx, Angular us TS, Vue use web component. So if you want the easiest one, Vue might fit you

@devTea This is a newbie question. If I get this correctly, vanilla JS does have jsx as part of its syntax. However, you can work with it in React. Did react change the JS syntax somehow? How did they sort of insert a mini JSX syntax within JS?

As a noobie myself my suggestion is to be at the confident in the programming langange before learning a framework. Made that mistake with Laravel only learned the basics of php and then tried to laravel. Then took an advanced php course which focused on orient oriented programming and it was so much easier. Not saying you can’t do it it just might be super frustrating.

@Donglin JSX gets translated to JavaScript the same way Typescript gets translated to JavaScript. It's like a super-cool macro.

1. Take:
const element = ( <h1 className="greeting"> Hello, world! </h1> );

2. Run it through the JSX-to-JS-thingy

3. You get:
const element = React.createElement( 'h1', {className: 'greeting'}, 'Hello, world!' );

This happens in the background so you can think about things in JSX-terms and pass around JSX stuff and do interesting things without having to know what the generated JavaScript looks like.

If you want to get technical, this process is called transpilation - JSX is transpiled to JS. It's like compiling, but from one language to another.

It's because these frameworks address a problem that you don't have in many other domains. If you have a small page, you don't need any framework at all. It's that easy.

However, then you need to manipulate the DOM directly. Easy for little stuff, but you will notice how intermingled your HTML, CSS and JS get.

Now imagine you're Facebook with huge amount of stuff, and things get added all the time, and your smiley state depends on the weather in San Jose. Whenever you add a new control, tons of existing things need to be touched, too. That becomes unmaintainable.

So that's what frameworks do for you. You don't manipulate the DOM anymore and instead tell the framework which objects depend on which other objects, and which action shall be taken upon which event. This is intrinsically declarative, not imperative or object oriented, that's why it looks so different.

@ihatecomputers Thank you so much. That makes a lot of sense.

@Fast-Nop Thanks for the explanation!

Hey my dude, my suggestion would be to learn js from vanilla to es5+ deeply which you can do here:

https://youtube.com/playlist/...

Pro tip, check out The Net Ninja on Youtube for React and similar:

https://youtube.com/channel/...

They both have a really good teaching style, expecially the Net Ninja for React 💫