Learn About React

React is a JS library. But not a complete js library. Sometimes you need to use another library with React.

Frameworks are not flexible, because if you need a small part of them you have to include the whole thing.

Without react we can build a web app manually which is not easy.

When React was released, there was a lot of buzz about its performance because it introduced the smart idea of a virtual DOM that can be used to reconcile the actual DOM (and we’ll talk about that in the next section).

DOM

The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web.

When actions happen in that state, React takes care of updating the UIs in the DOM.

Virtual-DOM

A virtual DOM tree is a JavaScript data structure that describes a DOM tree. It consists of nested virtual DOM nodes, also known as nodes. Typically, virtual DOM trees are every render cycle, which normally occurs in response to event handlers or to data changes.

Optimizing Performance

Internally, React uses several clever techniques to minimize the number of costly DOM operations required to update the UI. For many applications, using React will lead to a fast user interface without doing much work to specifically optimize for performance.

In React data goes down the tree of the components. If you want to pass data from parent to child component you need to use it props. From the JSX point of view, props are HTML attributes.

Node + npm

The node.js may be a surprise to many. Why would you need to know how to work with Node to be a client-side React developer? While you can pull React into any HTML file, there will be many other packages out there that will allow you to extend the React library.
Well, the React developers need to have a solid understanding of the npm registry. This is the place where software developers can go to get the software to help them build software. Sounds funny, but truly that’s all the npm is cloud storage for packages we call dependencies.

Require good knowledge of JS

The first thing you need to know before learning React is JavaScript.
Indeed, the great thing about React is that it is just a JavaScript library. So the more you know about JavaScript, the better you’ll get at writing applications with React.
You must master and become comfortable with JavaScript fundamentals. You’ll be much more productive with React.

Let’s Nesting React elements!

Let’s insert a nesting element inside the React Create Element. Inside 1st Create Element, you may insert another one for nesting. Don’t get it? Let’s see…

ReactDOM.render(
  React.createElement(
    'div',
    null,
    'Hello World!',
    React.createElement(
      'pre',
      null,
      new Date().toLocaleTimeString(),
    ),
  ),
  document.getElementById('root'),
);

The 2nd Create Element will be adding a static time. You may run this by updating every single second. To do that, you have to add a setInterval Web timer API. Before doing that, you need to create a function. After that, you have to set the interval timer on the function. Let’s see an example below. Or, if you are interested, then you may see the output in the CodePan.

const time = () => {
  ReactDOM.render(
    React.createElement(
      'div',
      null,
      'Hello World!',
      React.createElement(
        'pre',
        null,
        new Date().toLocaleTimeString(),
      ),
    ),
    document.getElementById('root'),
  );
}
setInterval(time, 1000);

Wow! You have created a clock ⏰ using React.js! Hurray!!!

Creating components using functions

You may also create functional components using React. You can create the normal as well as the arrow functional components. It’s absolutely up to you.

ES6 / ES2015 or later versions are supported this:

const Header = () => {
  return (
    <h1>I am learning React!</h1>
  );
}ReactDOM.render(
  <Header />,
  document.getElementById('root'),
);

React is not a framework

Somebody thinks that React is a framework, which is totally wrong. React is just a small library in JavaScript. On the other hand, Angular is a framework where many decisions are already made for users, whereas React developers have to make their decisions.

Git

Git is essential to every developer’s toolkit for storing projects on solutions. For example, GitHub, Bitbucket, and GitLab. Some more skills that should just be a part of your day-to-day including are:

• Tracking changes with add, commit, push and pull
• Branching and merging strategies
• Handling merge conflicts