DEV Community

Cover image for Before starting React, I think you should ...
Chris Achinga
Chris Achinga

Posted on • Updated on

Before starting React, I think you should ...

React is a front-end JavaScript library. So you probably want to know the basics of JavaScript before diving into react, otherwise you will end up having a rough journey which isn't good for your productivity.

I wouldn't advice you to fully rely on my article, I had a quite rough journey and after I finally understood React, I better document it for a future me.

In this article, I'll highlight the essentials and most important things to learn and provide a link to the resources as we gear up to creating your first React application.

In This Article

What is React

React is an open-source JavaScript library for building user interfaces or UI components. 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 or mobile applications

Laying The Foundation

Since React is a JavaScript library, it is essential to understand the basic and important features of JavaScript. Not everything in JavaScript, just the essentials:

JavaScript

If you have been into web development for sometime now, you've probably heard of or seen JavaScript somewhere.

Well, JavaScript is a programming language used in client side scripting and also in the backend - Just a heads up

There are plenty of free and paid courses and tutorials for JavaScript. I advice you to get the hard way, "Google It"
To view a list of repositories on GitHub, go to: https://github.com/search?q=javascript+resources

Other curated resources are:
https://developer.mozilla.org/en-US/docs/Web/JavaScript
https://javascript30.com/

Arrow Functions

Arrow functions are an alternative to the traditional function expressions. They utilize a new token, => that looks like arrow hence the name.

function() {
    //code block
}
Enter fullscreen mode Exit fullscreen mode

An Arrow function would look like:

() => {
  //code block
};
Enter fullscreen mode Exit fullscreen mode

To learn more on Arrow functions; https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Classes

JavaScript classes are more like special function

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

ES6 Features

React uses latest JavaAcript es6 features. So it's a good idea to go through them.

Below is a link to the resources:

https://developer.mozilla.org/en-US/docs/Archive/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla

https://catalins.tech/javascript-es2020-the-features-you-should-know

Once your are done going through the basics, you'll be more than ready to learn and use React in your next project.

My Profile

Discussion (0)