A framework or library is just a set of tools that are created to solve a recurring problem more efficiently. Hence, there’s nothing that vanilla JS can’t solve which can be solved by using a framework like React, Angular or Vue. Most of the people jump into learning frameworks before learning enough JavaScript. It is not totally wrong but there’s just one problem. If one doesn’t have enough experience learning core JavaScript, he doesn’t know the benefits the particular framework/library provides nor the problem it tries to solve. So developers/programmers need to have a clear idea about what the framework is trying to provide and what is available in the language itself. Also, it is always a good thing to know what problems might have arisen if we had tried to solve the same problem with the basic language itself.
React JS
In this article, I will try to list out some of the core concepts that are necessary for learning a JavaScript library such as React.
Object-oriented programming and ES6 class keyword
Object-oriented programming principles play a vital role in react. Prior to React 16.08, all stateful components in React were created using class-based components and functional components were called stateless functional components. The newer addition of hooks allows us to create a state on functional components, but as it is a new feature added in the library, it might take time for adoption of this feature. Therefore it is important for the learners to learn about Object-oriented programming and the class keyword added in 2015 in the language. It is also necessary for people to know about prototypal inheritance, constructor functions and many more concepts such as inheritance and composition.
Code like this shouldn’t get you banging head trying to understand what each line means
All sorts of different methods available
You should also be able to use different kinds of default methods available for data types like strings and arrays. You’ll have to sort, filter, map through a list of items more often than you imagine while building these kinds of applications. Therefore I recommend you learning at least some of the methods available on JavaScript.
The ones that I recommend are map, filter, reduce, sort, include etc for arrays, split, join, reverse etc for strings. You’ll explore more as you learn more stuff in react.
Promises, callbacks and asynchronous JavaScript
Asynchronous JavaScript is super important in Single Page Applications. You have to make network calls asynchronously and for that, the knowledge of asynchronous JS and the ways to handle AJAX requests becomes a necessity.
Promises provide a way to handle asynchronous code. Callbacks can do that too but Promises make the code a lot cleaner.
Async Await
Async-await provides a simpler way to interact with promises. They make asynchronous code look synchronous and yet, the working is still asynchronous.
Modules, import, export, babel
When working with React, you isolate your components on separate files. You export some component from a file and import in the another.
Facebook provides a tool called create-react-app that helps users to initialize a react project in a convenient fashion.
create-react-app comes with all these settings and configurations pre-built so you don’t have to do these manually but it is super important for you to understand how these things are happening behind the scenes.
Babel is a tool that compiles modern JavaScript to JavaScript version supported by all popular browsers. You can also explore how those work and try experimenting what the code you’re used to writing compiles to in the older versions.
The above list explained the concepts that you must be familiar before jumping to react. There’s one other thing that I would like to recommend and it is to build projects using Vanilla JS. To appreciate the full beauty of React or other frameworks, you should try building a project without using a framework or a library. That will help you to know and understand the complexity without the existence of that particular library.
A “to-do list” is kind of a standard and in my opinion, it is the project you should do too. A “to-do list” application should contain a form to add to-dos. There should also exist a button to delete the particular to-do and also mark them if they are completed or not.
Implementation of to-do with these features would be enough for you to understand how react works and the important concepts such as states, components, lifecycle, state change etc.
Conclusion
Thank you for reading the article. If you like it and want to read more of my blogs you can check my website https://bigomega.dev.