Fundamentals of React.js

Before we start, please note that this is often a beginner-friendly guide that covers the ideas I classify as fundamentals for operating with React. It’s not an entire guide to React however rather an entire introduction.
React is a JavaScript “library”. It’s not specifically a “framework”. It’s not a whole answer and you’ll usually have to be compelled to use a lot of libraries with React to create any answer. React doesn’t assume something concerning the opposite components in any answer.

React.createElement

The first argument is the HTML “tag” to represent the DOM feature, which in this case is div.
-The second argument specifies any attributes that we want the DOM entity to have (such as id, href, title, and so on). We used null because the basic div we’re using has no attributes.

Nesting React elements

React is all about components

Creating components using functions

function Button (props) {
// Returns a DOM/React element here. For example:
return <button type=”submit”>{props.label}</button>;
}
Take note of how I wrote what appears to be HTML in the Button function’s returned output. This isn’t HTML or JavaScript, and it’s certainly not React. JSX is the name of the programming language. It’s a JavaScript extension that lets us write function calls in HTML-like syntax.

JSX is not HTML

This is how you would use Respond (without JSX). The Button feature can be used directly in a browser (after loading the React library), and everything will work perfectly. However, rather than dealing with function calls, we prefer to see and work with HTML. When was the last time you created a website without using HTML and just JavaScript? If you want to, you can, but no one does. That is why JSX was created.

The name has to start with a capital letter

The first argument is an object of “props”

Creating components using classes

class Button extends React.Component {
render() {
return (
<button>{this.props.label}</button>
);
}
}
You describe a class that extends React. Component, one of the key classes in the React top-level API, with this syntax. At the very least, a class-based React component must define a render instance method. The element that represents the output of an object instantiated from the component is returned by this rendering process.

Functions vs classes

Benefits of components

Born to Learn