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
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 provide a way to handle asynchronous code. Callbacks can do that too but Promises make the code a lot cleaner.
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.
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.
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.