3 Basic Features of React for Beginners!

React is one of the best libraries out there. It is also the most popular JavaScript library. React just makes things much easier than vanilla JavaScript.

Today we’ll discuss the 3 basic features of React and why you should learn it.

Basic Features of React –

#1 – React – library or framework?

You might have seen many blogs, videos, or forums where they sometimes say that React is a library and sometimes it’s a framework, but what it is actually? it can’t be both, right?

The answer is React is a Library and not a framework. This topic deserves a complete blog post for explaining the difference between Library and Framework, but I will explain it in short.

=> Library :-

A library is like a collection of code that can be used in our code base or project. It’s like connecting a huge piece of code that contains thousands of functions to our own code, where we can use those functions.

That’s React, we are not utterly dependent on React.

=> Framework :-

A Framework is like a complete environment of code, and you write inside that environment by compromising with their own rules, functionalities, etc.

A clear example of a framework can be Angular, or to make it more interesting NEXTJS, which is a framework based on React Library.

#2 Virtual DOM –

You might have learned about the DOM while learning HTML, CSS, and JS, it’s short for Document Object Model.

You can learn more about React Dom at Reactjs official documentation, here.

Document Object Model is a structural representation of an HTML document, it has a tree structure.

You might have created some popups or made changes in HTML using JS, with the help of Event Listeners. So, each time you did that, the whole DOM is re-rendered or updated, which behind the scenes takes a lot of time.

So, to avoid that React uses something called Virtual DOM. It works by first creating a copy of the DOM and whenever there are changes in code, React only updates the original wherever it needs to be updated.

Cheakout Our Other Blogs Froms React Mastar Lable

#3 The JSX(JavaScript XML) –

It’s one of the best features of React. Previously you might have to create 3 files to render a website, HTML, CSS, and JS.

But in React, you can write all three files in one, with the help of JSX. We can write JS inside HTML, we can write HTML inside JS, and also CSS in JS, it sounds confusing, right? It will sound less confusing once you learn it.

It’s not necessary to work with JSX, but it makes our development much faster and easier to create much more dynamic applications in less amount of time.

JSX Code Example –

App.jsx
export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

So these were some of the basic features of React, that you need to understand as a beginner. Once these concepts are clearer, you are ready to learn more advanced parts.

If you want to learn more React features let us know in the comments, also make sure to signup for Our newsletter to never miss an update on our latest blog posts.

Thanks