10 Things You Need To Learn About Before Starting ReactJS

Millions of developers use ReactJS. If you are new to React development or willing to start it, this article might help you. Here are my top 10 things you should know definitely about react.

1. Is React a library or framework?

It's a common question among newbies. Rather I have seen some people working with react who think it's a framework.

For the record, It's a library. A framework is theoretically a larger thing comparing to a library. A library is more flexible when it is compared to a framework. You have more control over it.

React is comparatively small than frameworks like Angular, Vue, Laravel, or Django.

2. What is ReactJS actually?

It's an open-source javascript library for frontend development. It was created and developed by Facebook. ReacrtJS is extremely popular nowadays for creating single-page web applications.

3. Why React?

React provides better performance and better user experience compared to other frameworks. It uses reusable components that reduce a lot of pain for frontend developers. It's fast and SEO-friendly. ReactJS guarantees quicker rendering. It's also easy to learn.

Another exciting thing is you can use React for both Android and ios app development by using React-Native. Before heading to ReactJS I was passionate about android app development. This feature excited me the most to learn ReactJS.

4. JSX

React introduces us to JSX. JSX is a syntax extension of Javascript. You can write HTML inside your Javascript code using JSX.

const element = <h1>ROXANNE</h1>;

Instead of writing markups and logic in separate files, react introduces us to JSX. Browsers don't understand JSX, to translate JSX with browser understandable JS we need a transpiler. For example Babel and Transcripts.

To know more about it read the article below
https://reactjs.org/docs/introducing-jsx.html

5. The Virtual DOM

You may hear the word DOM (Document Object Model) if you have some previous frontend developing experience. DOM treats HTML as a tree structure. We can modify the DOM using JS. If you modify anything in the DOM the whole tree structures get updated. It can consume a decent amount of time if you are working with a large application.

You can learn more about DOM if you are interested from [here]{http://taligarsiel.com/Projects/howbrowserswork1.htm#Parsing_general}

React introduces us to the Virtual Dom. Whenever any changes occur in V DOM it does not update the whole DOM. It rather compares the change with the previous version of DOM using Diffing algorithm. Then it applies the reconciliation process to update the UI. It's one of the coolest features of ReactJS in my opinion. You can learn more about this from the URL below:
https://medium.com/@gethylgeorge/how-virtual-dom-and-diffing-works-in-react-6fc805f9f84e

6. Components

A react application is all about components in my eyes. You can create reusable components which can be used as an HTML element wherever you need it. You can use two types of components in ReactJS. Functional and Class-based.

Class-based components are slightly out of date. If you want to learn reactJS now I'll suggest you learn functional components first.

function Welcome() {
  return <h1>Hello, How you doin?</h1>;
}

function App() {
  return (
    <div>
      <Welcome/>
      <Welcome/>
      <Welcome/>
    </div>
  );
}

Here Welcome is a component that has been used three times. You can divide your react application into a lot of components like this. You can get a clear idea about this from the link below:
https://reactjs.org/docs/components-and-props.html

7. Props

HTML elements can have some properties like title, placeholder, etc. You can also use this type of thing in react. It's called the props. You can pass some data while declaring your component just like you declare HTML properties. For example:

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function App() {
  return (
    <div>
      <Welcome name="Michael" />
      <Welcome name="Dwight" />
      <Welcome name="Jim" />
    </div>
  );
}

Here we are passing different names for each Welcome component like we are passing HTML property. Using props we can send different data to components to build UI.

to learn more about props follow this URL https://reactjs.org/docs/components-and-props.html

9. Hooks

A Hook is a special function that lets you “hook into” React features. For example, useEffect, useState, useRef, useContext, useReducer etc. If you want to use functional components to develop ReactJS applications hook is something you can't ignore.
You can follow the article below to know more about hooks.
https://reactjs.org/docs/hooks-state.html

10. State

State is a special react feature that reduces a lot of pain for the developer for changing the UI. Here we will discuss briefly the useState method. First, have a peek at the following code

import React, { useState } from 'react';

function Example() {
  // Declare a new state variable, which we'll call "count"
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

The useState hook returns a pair of values: the current state and a function that updates it. In class component we use this.state.count and this.setState for similar reason. The value of the state can be updated using the setState method. To learn more about useState hooks follow the link below:
https://reactjs.org/docs/hooks-state.html

I guess this is all for today. This is my first article in dev.to
Inspire me to continue writing. Thanks for reading this

Happy coding!