DEV Community

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

Before starting React, I think you should ...

ChrisAchinga
I love documenting my progess as a self taught developer. I write technical articles and tutorials that are up to my understanding and also to test out my skills. My stacks are javaScript and Python
Updated on ・2 min read

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)

Forem Open with the Forem app