Can someone explain React framework to me?

Hello,

Im still working on understanding Javascript. Im taking my time with it because I really want a good foundation in what I understand as far as how vanilla Javascript works. In fact, right now im learning about objects, object constructors and how to utilize an array of objects. Really great stuff.

But ever since Ive started learning Javascript, of course Ive heard about these frameworks that can make writing Javascript easier and Im very interested in how this works. In what ways does React for example, make Javascript writing easier? Does writing with React take on a new syntax, or just add to the existing syntax of the language??? How is it different from regular vanilla javascript in practice?

I know that I could go about looking this up on YouTube and seeing what coding in React looks like, but as im still learning Javascript, I really don’t want to confuse myself by basically starting to learn React. I really just would rather have a conversation about it rather than start learning about it through a instructional video format.

If anyone wants to take the time to talk to me about React please feel free. Im very interested.

Thank you.

1 Like

React doesn’t make JavaScript easier. It makes web pages easier to build. It uses the same exact JavaScript that you are learning.

What React does (and things like it like Angular, Vue, and to a lesser extent jQuery) do? It makes it a lot easier to break your large web site into smaller, more manageable chunks. These chunks also become reusable. I find the apps easier/faster to build and maintain. Libraries like these are very popular for that reason.

3 Likes

Re libraries/frameworks in general, no, they do not make writing JS easier I’m afraid, that’s not the point of them. You are likely to need to write less JS, and that JS might not be as complicated, but that will be because you are using chunks of code that someone else has written rather than code you’ve written yourself. Someone has some need, and they write a set of functions or classes or whatever that deal with that need, then you can use that in your code rather than writing it yourself.

In React’s case, the need was an efficient way [for Facebook, because the existing solutions weren’t great] to render and rerender HTML dynamically based on data passed into the functions the library provides, which in turn allows for browser apps that, for users, work much more like desktop apps than normal websites do. Ditto Angular (initially built as a library at Google for making it easier to write JS-powered HTML forms), ditto Svelte (solution to needs of New York Times for interactive sections in articles, written by someone who built the same sort of thing previously, Ractive, for The Guardian), ditto Vue.

3 Likes

Wow that’s fascinating. I kinda get it.

So when Ive heard people say React or other frameworks makes Javascript easier, they are really referring to the fact that it allows them to reuse code and components of the application is a more efficient way? That makes sense.

I was kinda hoping that React would help me make things that otherwise be too complicated with regular Javascript. Is this what it does in a sense? Does React help you build larger and more interesting websites?

For example, I know that engineers at Facebook developed React. So does React primary assist developers in building Facebook or Twitter- like applications or is it also useful in the context of personal and individual websites and web applications that don’t resemble a social media applications at all?

Im also interested in a framework that will assist in animations. Will react help in that area? If not, where would I look for a framework that can help make interesting button and page animations. Or would that just be plain CSS?

Yes, sure. It will allow you to build pretty complicated stuff easier than you could otherwise, that is definitely the aim. I do need to stress that it is regular JavaScript though, with the caveat that it does use an extra syntax called JSX. This lets you write something that looks like HTML inside your JS files, but downside of that is you have more to learn and the tooling (what you need to make the apps) becomes more complicated.

Yes and also yes, turns out that the way it’s built is generally useful and relatively pleasant to work with for developers of both large or small applications. It scales fairly well; the complexity does not increase drastically as the size of the application codebase increases as long as you’re careful.

Because of the way it works, no. There are additional libraries for React that help. Plain CSS is very good at this, for more complex stuff there are good JS libraries

1 Like

Excellent responses. That really broke it down for me. Thanks a ton. :+1:

So when Ive heard people say React or other frameworks makes Javascript easier, they are really referring to the fact that it allows them to reuse code and components of the application is a more efficient way? That makes sense.

Sure.

I don’t know why anyone would say that React makes JS easier. It doesn’t do that. It uses the exact same JavaScript. There is nothing inherently different about JS in React .

I was kinda hoping that React would help me make things that otherwise be too complicated with regular Javascript.

I would say that it would help you make things that otherwise be increasingly complicated with regular HTML, CSS, and Javascript.

So does React primary assist developers in building Facebook or Twitter- like applications …

No, not at all. It is made by the people at FB, but it does not create a “FB-like” app.

Im also interested in a framework that will assist in animations. Will react help in that area?

There are built in animations and React libraries that can help too. One of Reacts great assets are the wealth of supporting libraries that you can use.

1 Like

Ok gotcha! This is making a lot of sense.

I think that I really had the wrong impressions about React, which is why I thought it be a good idea to ask. Now Im trying to think of ways I would use React in my own workflow. Im just at the beginning of my coding journey and many of my projects are small and very simple.

I guess I’ll just need to learn React and see how it would benefit my process when the time comes…

Im actually more exited about creating animations and graphics for websites and applications, and was hoping that React would help in that department. Although Im really exited about learning React, I also want to learn how to do unique and clean animations.

Ive seen some animated buttons, switches and scroll events on Codepen recently that blew my mind. I guess now I have more questions about how things like that are created, if not using React. I don’t even know where to start when it comes to things like this

https://codepen.io/coopergoeke/pen/wvaYMbJ

https://codepen.io/rafaelavlucas/pen/NWWQNjZ

https://codepen.io/nocni_sovac/pen/rNjYOyr

I mean, I can tell that in the links above all of them are using Sass… :face_with_monocle:

React is an open-source, front end, JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page applications (SPAs) or mobile applications. Also take a look at official docs of reactjs too.

1 Like

React is basically a library of tools that help in web development. It uses a syntax called jsx which is a hybrid of js and html. It does not work outside browsers and has nothing to do with programming unless web development is not concerned.
So if u are learning js as a programming language and primarily for problem solving, u need not learn react right now. But if you are thinking of getting into web dev react will be a handy tool.

1 Like

If you are interested in animations and styling web pages then i think it will be a good idea to learn css very well
Sass will also do
U also need to know a little about photoshop and figma or adobe xd
Javascript is also required and i believe u already are learning it.

1 Like

Gotcha! That makes a ton of sense. Great breakdown. Im interested in both disciplines. But I really want to focus on understanding the programing aspects of vanilla JS so that I can become a better web developer. Does that make sense? I was under the impression that programing and web development go hand and hand. Like you can’t have one without the other.
Am I mistaken? :face_with_monocle:

I want to be a good programer, so that I can be a good web developer. :sweat_smile:

Yeah Im very good and comfortable using Photoshop. Ive been using that for all sorts of stuff for years now. Its second nature to me. I really want to get Sass down, but im still learning how to write DRY code and I can see how messy code in CSS can quickly get out of control :triumph:

So yeah, after sharpening my CSS ill move into Sass for sure. :+1:

I read the discussion on React here! Even I am a beginner at JavaScript and would like to learn more about frameworks and libraries.
I was just wondering what would be a good stage to start learning React? I mean how much basic knowledge do we need to have about JavaScript?

1 Like

if you follow the freeCodeCamp curriculum, React is taught in the Front Wnd Libraries and Frameworks certification

1 Like

Sure! Will check it out.

1 Like

Solid advise. I will be getting this cert for sure.

Thanks. :+1:

So basically if u know how to hook up html css and javascript together and also know the basic syntax of js and are comfortable with arrays, functions, async await, for loops and callbacks, you are good to go.
Having said that I learnt React even before i really understood the above concepts very clearly. In the process of learning React i started to understand these things even better. So even if you learn React and you dont know some things, you will eventually get to know many things more clearly as you spend time.
I should also mention that before i learnt react or js i had a sound knowledge of java as it was a part of our school curriculum and maybe that helped me in my react journey.

1 Like

Thanks for the insight! Just a doubt though -

Even I have Java in my syllabus, but I wonder how you can relate that to React or Javascript :thinking: :thinking: