10 Basic Fundamentals of React

React is a component based declarative, flexible open-source JavaScript library. It is not a framework. It is a tool for building UI components. Here I will discuss 10 basic fundamentals of react

Component:

React apps have many components and they are reusable, no matter it is big or small.

A functional component is look like this —

import React from 'react';
const Home = () => {
return (
    <div>
         <h2>Hello world !</h2>
    </div>
    );
  };
export default Home;

Components name required to be start with capital letter otherwise it would be a mess-up of HTML elements and React elements as the lowercase names are reserved for HTML elements.

JSX:

JSX is a syntax similar to HTML. without any createElement() or appendChild() methods you can write HTML elements with JSX in React and place them in the DOM. JSX converts HTML tags into react elements.

Here is an example without JSX

function sentence(title) {
  return title.firstWord + ' ' + title.lastWord;
}

const title= {
  firstWord: 'Hello',
  lastWord: 'World'
};

const element = (
  <h1>
    Hello, {sentence(title)}!  </h1>
);

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

In this I am using JSX and see the magic.

const title = 'Hello World';
const element = <h1>Hello, {name}</h1>;
ReactDOM.render(
  element,
  document.getElementById('root')
);

JavaScript Expressions:

In React you can use JavaScript expression inside JSX within curly braces. But you cannot write full statements , only bits of JavaScript that return a value like you can write ternary operator but not a if else statement.

import React from 'react';
import React from 'react';
const Home = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false)
return (
<div>
<button>
             {isLoggedIn ? ‘Sign Out’ : ‘Sign In’}
         </button>
</div>
);
};
export default Home;

Events:

Expressions are used to tell React how to respond to events when they are triggered by an element. React events are named using camelCase, rather than lowercase.

Virtual Dom:

A virtual DOM object is a lightweight copy of a DOM object. When you render a JSX element, every single virtual DOM object gets updated. The virtual DOM gets compared to before you updated it. The changed objects only get updated on the real DOM.

Default Props:

Generally React components receive their props from a parent component, however it’s also possible to specify default props. For this, you have to assign a default props object to the component. When React renders the component, the default props will be used.

State:

React components has a built-in state object. In react data come from a state. State should keep as simple as possible.

Prop-Types:

You can create default Props or pass props directly to the components. For larger Projects, it is always a good practice to validate the data you are getting through props. This will help in debugging and catching the error.

React Hooks:

Hooks allows you to use state and other features without writing a class. If you can add state to a functional component by using a Hook inside the function component. you need to follow some rules to use Hooks.

Hooks should used at the top of the React functions.

You cannot call Hooks from regular JavaScript functions. Instead, you can call Hooks from React function components.

Conditional rendering:

Conditional rendering in React works the same way conditions work in JavaScript.

import React from 'react';
const Home = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false)
return (
    <div>
         <button>
             {isLoggedIn ? ‘Sign Out’ : ‘Sign In’}
         </button>
    </div>
   );
  };
export default Home;

These conditional rendering can change the button based on user logged in or not.