Search for a command to run...
No comments yet. Be the first to comment.
A quick analysis of the top 25 CWEs in the last 5 years show a repeating pattern
JavaScript is a scripting language, therefore you can write scripts to automate your workflow with JavaScript. The background of the snippet I created a node script recently to automate one workflow that I do repeatedly. Every time I create a new Jav...
In this article, you will learn to build a Markdown parser which compiles into HTML with JavaScript and Regular Expression Markdown is a markup language like HTML. It is quite popular among developers to write blogs, readme files, and documentation. ...
Handling error in express applications can be more challenging than building web applications and APIs Building web applications or APIs with express.js is not difficult in my opinion. I think it is more difficult to handle errors, error status codes...
This blog is a follow-up to my last blog in which I talked about promises. If you are unfamiliar with promises in JavaScript, please read that article before reading this one. Also, some familiarity with exception handling would be useful. Async Awai...
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 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
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.
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 provides a simpler way to interact with promises. They make asynchronous code look synchronous and yet, the working is still asynchronous.
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.
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.