ReactJS Concepts

1.is react library or a framework?

Some people called reactjs a framework but gently reactjs is a library. It is a front-end JavaScript library developed by Facebook in 2011. Framework is fixed coded functionality. Its contains a lot of libraries that help the programmer. The library is small in size compared with the framework. The library is easier than Framework.

2.What is JSX?

The meaning of JSX is JavaScript XML. We can write react code in-plane javascript code. But it is more complex. For this reason, Facebook community gives us jsx. JSX is nothing but writing HTML code in JavaScript format. JSX is easy to read and understand.

For example, we write react code

<div className=”footer” />

And it compiles as

React.createElement(
‘div’,
{className:”footer”}
)

3.why react component name starts with a capital letter?

Previously we told that JSX is used in react. It is similar to HTML. When we declare a component with a small letter react think that it is a jsx that’s why the component name must start with a capital letter.

<Footer>
<h6>All Rights Deserved</h6>
</Footer>

4.how to pass data in react?

Now it's time to know how we can pass data in react. In react we pass data as props that full means properties. We pass data from the parent component to the child component and receive those data as a prop.

Parent component

<div>
<Flower color={red} />
</div>

Child component

import React from ‘react’;
const ComponentName = (props) => {
const color = props.color;
return (
<div>
Code…
</div>
);
};
export default ComponentName ;

5.Ternary operator in react

We know that the ternary operator is used for conditionals, we can use the ternary operator in react.

render () {
    return (
      <div>
      {
        loggedInUser ? {user.name} : ‘please login’
      }
      </div>
    )
  }
})

6.How react works?

React works by virtual dom. When some new code is written in the react app, virtual dom re-render, then the previous dom is compared with updated dom, after the calculation, real dom updated that only actually changed.

7.html vs jsx

Html and jsx look like the same things, but there are some differences between these.html is a markup language other hand jsx is a javascript XML. Simply can call a special type of HTML.

<div class=”container”>
This is a ComponentName
</div>

In general html there is no problem but in jsx we should write class as className.

<div className=”container”>
This is a ComponentName
</div>

In jsx, we have to write objects properties if we want to give some style to component

8.react hooks

React Hooks are very special types of function in react. we cannot work with react hooks because it helps the developer's life easier. Hooks are building functions provided by react.

There are different types of hooks that do different types of work.

For example useState a hook in react and its uses to manage the state in react. useEffect is another example that use to load data from the server.

There are some hook names:

· useState
· useEffect
· useContext
· useRef
· useReducer and so on

9.functional vs class component

At the first edition of react, all components are made with class, but it was much complicated to work with. In the class component there huge use of “this” keyword. Its body has rendered and returned. Props are taken like this.props. it has a state and lifecycle method.

Simple class component

import React, { Component } from ‘react’;
class ComponentName extends Component {
render() {
return (
<div>
Code…
</div>
);
}
}
export default ComponentName ;

beside functional components are newly arrive in react. It is very simple to use there are no use of “this” keyword and props can be taken as arguments

simple functional component

import React from ‘react’;
const ComponentName = () => {
return (
<div>
Code…
</div>
);
};
export default ComponentName ;

10.string literals

We can simply pass strings in our components between opening and closing tags of that component.

<ComponentName> This is a ComponentName </ComponentName>

And props.child can receive it.

<div>
This is a ComponentName
</div>

Jsx remove all the white space on the line