All About React.js

What and Why is React.js

React is a javascript library, not a “framework”. It’s used for building a user interface.

Framework VS Library

Frameworks serve a great purpose, especially for young teams and startups. Frameworks are built with some libraries. When you working with a framework, many smart designs are already made for you, which is give you a clear path to focus on writing good-level application logic. But Framework comes with some disadvantages. Frameworks are not flexible. A framework usually wants you to code everything a certain way. If you try to deviate from that way, the framework usually ends up fighting you about it.

Your First React Code

in this session, a simple HTML element is rendered to the display using 2 methods:

1. Using the web DOM API

document.getElementById(‘mountNode’).innerHTML = `
<div>
Hello HTML
</div>
`;

2.Using React API

ReactDOM.render(
React.createElement(
‘div’,
null,
‘Hello React’,
),
document.getElementById(‘mountNode2’),
);

The ReactDOM.render method and React.createElement the method is the core API method in a React application.

ReactDOM.render

This is basically the entry point for a React application into the browser’s DOM. It has 2 arguments :

1. The first argument is what to render to the browser.
2. The second argument is where to render the React element in the browser

React.createElement

The React.createElement function has many arguments:

1. The first argument is the HTML tag for the DOM element to represent
2. The second argument is for any attributes
3. The third argument is the content of the DOM element

What is JSX

1. JSX Stands for Javascript XML

2. JSX allows us to write HTML code in React

3. JSX makes it easier to write and add HTML in React

JSX converts HTML tags into react elements.

Example

const myelement = <h1>I Love JSX!</h1>;

ReactDOM.render(myelement, document.getElementById('root'));

React Default Props

We can declare default props like this:

class CustomButton extends React.Component {
  // ...
}

CustomButton.defaultProps = {
  color: 'blue'
};