DEV Community

loading...
Cover image for Introduction to React.js ⚛ and the required JavaScript!

Introduction to React.js ⚛ and the required JavaScript!

KUMAR HARSH
The best way to learn is to teach. Programmer by Passion and Developer for Fun, and I love sharing my journey with everyone.
Updated on ・6 min read

React is a JavaScript library for building UI components. The ecosystem of React is really immense which eventually makes it one of the best front-end libraries

JavaScript is a huge language and not all of it is required, Knowledge of a few JavaScript concepts can make the process easier for you if you are planning to learn React.

Keep JavaScript aside for a moment, Knowledge of basic HTML and CSS is a must in my opinion.

React is all about building user interface so you'll be working with HTML and CSS as well. So start with these first.

Let's see some basic JavaScript modules that can help you 👇

1. Basic programming knowledge which is must

2. Functions

A JavaScript function is a block of code designed to perform a particular task. This is again pretty basic stuff.

jsfunc

3. Arrow functions syntax

Arrow function is a new ES6 feature that's been used almost widely in modern codebases because it keeps the code concise and readable. It allows a short syntax for writing function expressions.

arrow

4. Destructuring assignment

Destructuring is a convenient way of accessing multiple properties stored in objects and arrays.

Let's say:

eg

5. Array methods

You will use the Array method multiple times. So try to learn them before jumping onto React

Some commonly used functions are:

  • map
  • filter
  • reduce
  • find
  • findIndex

arraymethods

6. Special operators

Not mandatory but knowledge of these two can be useful. This is not a big concept or something. You can learn it literally in about a minute

7. Callback functions

A function passed as an argument to another function is called a callback if the function invokes the argument at a later time

You will use callbacks while working with hooks, forms, and other things. A quick example:

callback

8. Async, await and Promises

Async function is a function that returns some promise. A promise is a special JavaScript object that links the “producing code” and the “consuming code” together. Whereas await makes a function wait for a promise.

Now that we are done with JavaScript let's hop into React.

Why React?

  • Reusable components
  • Fast due to virtual DOM
  • Huge ecosystem

A typical React app contain many components. They are reusable and can interact with each other.

What is a component?

  • Component as a simple function that you can call with some input and they render some output

An image showing a typical React app with all different components. As you can see this entire webpage is nothing but the mixture of different components.

components

Components are of two types:

1️⃣ Class based components
2️⃣ Functional based components

Class-based components are defined using ES6 classes, whereas function components are basic JavaScript functions

Before diving deeper into it, let's talk a little bit about JSX

  • JSX stands for JavaScript XML. It's basically nothing but the extension of JavaScript which allow us to write HTML code in JavaScript file.

const element = <h1>Hello, world!</h1>;

Consider this variable declaration. It's neither JS nor HTML. This is the mixture of JavaScript + XML = JSX

Now we know JSX, let's move forward

  • Functional components are nothing but simply a JavaScript function which takes some parameter will return some JSX code

A typical function component:

funccomp

Virtual DOM

A very important concept in React

You might have heard the term "DOM", virtual DOM is kind of similar. It uses a strategy that updates the DOM without having to redraw all the webpage elements.

Every time the DOM changes, browser need to recalculate entire layout and then repaint the web page which makes a web app slow.

To overcome this we have virtual DOM

Every time the state of our application changes, the virtual DOM gets updated instead of the real DOM.

Whenever the new element is added to the UI, a new virtual DOM associated with that element is created. If state of this element changes, a second new virtual DOM is created which will be compared with the previous virtual DOM.

It then updates ONLY the object on the real DOM.

vdom

You can watch this YouTube video to help you understand it better.

React and the Virtual DOM

Moving on, setting up your first react project directory is quite confusing. Let's see how you can do it

I'm assuming you have node environment set up and up-to-date version of npm. If no, download it from here.

Next thing you need to install is create-react-app from npm, it is a tool helps you start building with React app. It set up all the tools that you need in order to get started.

There are a few different ways to install create-react-app.
You can either do it globally or locally. You can see the detailed guide to set it up here.

Now you have create-react-app installed in your machine, it's time to create your first React app

Command - create-react-app app-name

Depending upon your internet speed, this will take some minutes.

Once done, run "npm start"

Your default browser will launch automatically and you will see the default react app screen at localhost:3000

reactfront

And that's it. You just created your first react app. I tried my best to give a quick overview of how things work in React.

If you would also like to know how to host a react app on GitHub pages, read my other blog:

Here is a great introductory course on React by Bob Ziroll on freecodecamp.

I love React, it's my favorite JavaScript

If you liked my content consider following me on Twitterlibrary.

What is your favorite JavaScript framework/library and why ?

Do let me know in the comments.

I hope you found this article valuable. If yes do let me know in the comments 😊

This article was inspired by Pratham. Follow him on Twitter for more amazing content.

Also if you got any question feel free to ping me on Twitter.

Thank You!

Discussion (40)

Collapse
parnikagupta profile image
Parnika-Gupta

This was amazing, I actually like video lectures, because I feel I skim through reading things but this was so crisp and clear and gave me confidence as I knew so many of topics and grabbed so many more from your overview. Thank you so much.

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Glad you liked it Parnika.

Collapse
xeusteerapat profile image
Teerapat Prommarak

Great article! I suggest you add the Closure concept as well, it quite important when working with React Hooks.

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

I plan to write a separate blog on hooks.

Collapse
bigbott profile image
bigbott • Edited

And here why you should never use React for your own projects:

  1. React popularity based on lies.

    1.1. React is a library. Obvious scam. React is a framework and very complicated one (more about complicity below).

    1.2. Every app need Virtual DOM. Lie. Virtual DOM has its use cases, but 95% of applications will be better without it.

    1.3. Virtual DOM is very fast. Lie. It is fast enough in most cases, but it is not VERY
    fast and cannot be very fast as it is interpreted JavaScript after all.

  2. Completely redundant and not justified complicity. All what frameworks like React actually do is only organizing code. There are a lot more efficient and more simple solutions for it. If you not a corporation that can spend millions for teaching developers, you can easily find framework which does not require months for learning. Or spend several days and write your own.

  3. Performance issues. Javascript is cross-platform, React is not. React's diff algorithm became CPU and RAM greedy when application grows over the size of Hello World. It will not work on $70 smartphone with one GB of RAM (80 percent of Eart population use such smartphones). If you a a big corporation you can use React Native, but as indie developer you probably want your app be truly cross-platform, ie. use the same codebase everywhere. And you can easily achieve it: just don't use React.

  4. Indexation of content problem. Again, if you is a big corporation and create inner corporate app, indexation is not an issue. But if you want your content to be indexed by search engines React is not a solution. React is a SPA framework. Beauty of SPA that you send only tiny JSON over HTTP instead of fat HTML. But from all search engines only Google know how to index JavaScript rendered content and even Google does it slowly and without any guarantee of success. "Server side rendering" when whole SPA app taken to the server and executed there is not a solution. It is a madness. People who sell it as a solution lack basic morality. People who buy it as a solution lack basic intelligence. If you need your content to be indexed, any traditional multi page app (Java, Wordpress, Jango, Ruby on Rails, whatever) will be better than React (or any other SPA framework).

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Try criticizing based on some actual facts please, just random banter isn't going to cut it.

Collapse
vivekku36049297 profile image
Vivek kumar singh

Ek hi toh dil hai bhai aur kitne baar jitoge

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Until a princess comes along to steal this prince's heart 😉

Collapse
hellennamulinda profile image
Hellen Namulinda

😂😂😂

Collapse
vivekku36049297 profile image
Vivek kumar singh

🤣😹😹😹

Collapse
rash123 profile image
RASHMI VERMA

Great👌👌👌

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks.

Collapse
rohitk570 profile image
ROHIT KUMAR

Thanks for sharing 😊😊

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Sure.

Collapse
arunraj profile image
Arun

Amazing buddy!

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks, Arun.

Collapse
rohitk570 profile image
ROHIT KUMAR

Nice informative article 👍👍

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks a lot.

Collapse
snailthelazy profile image
snail

I like the handwritten notes very much and it is easy to understand.

By the way, I like Angular as it is the first front end framework I learnt in school and the structure is easy to understand.

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks, and I agree that Angular is great, infact every framework is amazing in it's own way.

Collapse
jay2983 profile image
Vamshree Siramdasu

Very Visual and Easy to understand.. Must read for newbies planning to Learn React.

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks.

Collapse
mukhusin profile image
Mukhusin Siraji

Thanks

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Welcome.

Collapse
mukhusin profile image
Mukhusin Siraji

Sir can you prepare with backed may be with laravel

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

I specialize in MERN stack so I have no idea about laravel, sorry.

Collapse
theshubhamdhage profile image
Shubham Dhage

Good one 👍

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks Shubham.

Collapse
coderduck profile image
duccanhole

react angular and vue are awesome, i love all

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Hell Yeah 🙌

Collapse
sakalpatil profile image
sakalpatil

Great article everyone should look once before going to learn the React.
Thanks Kumar

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks Sakal, glad you liked it.

Collapse
rash123 profile image
RASHMI VERMA

Great explaining

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Thanks a lot.

Collapse
hellennamulinda profile image
Hellen Namulinda

Great article,
Thanks

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Glad you liked it.

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

I will check it our for sure.

Collapse
daianefernandes profile image
Daiane Fernandes

Wow… Nice explanation and article!! 👏🏻
I really appreciate it

Collapse
cenacr007_harsh profile image
KUMAR HARSH Author

Glad you liked it 😊