REACT

Introduction to React js, say Hello to reactjs

What is Reactjs?

React is an open-source, front end, JavaScript library for building user interfaces or UI components.It is maintained by Facebook and a community of individual developers and companies. React can be used as a base in the development of single-page or mobile applications.

A simple component is react!

React components implement a render() method that takes input data and returns what to display.This example uses an XML-like syntax called JSX. Input data that is passed into the componentcan be accessed by render() via this.props.

What is JSX?

JSX allows us to write HTML in react. JSX stands for JavaScript XML. It makes it easier to write and add HTML in reactjs.

have a look at the given code:

const element = <h1>Hello, world!</h1>;

It is called JSX, and it is a syntax extension to JavaScript. We recommend using it withReact to describe what the UI should look like. JSX may remind you of a template language,but it comes with the full power of JavaScript.

What are props in react?

Props is short for properties and they are used to pass data between React components.React’s data flow between components is uni-directional (from parent to child only).

What is state in react?

React has another special built-in object called state, which allows components to create and manage their own data. So unlike props, components cannot pass data with state, but they can create and manage it internally.

What happens when state changes?

why must we use setState( )? Why do we even need the state object itself? If you’re asking these questions, don’t worry — you’ll understand state soon :) Let me answer.

A change in the state happens based on user-input, triggering an event, and so on. Also, React components (with state) are rendered based on the data in the state. State holds the initial information.

So when state changes, React gets informed and immediately re-renders the DOM — not the whole DOM, but only the component with the updated state. This is one of the reasons why React is fast.

And how does React get notified? You guessed it: with setState( ). The setState( ) method triggers the re-rendering process for the updated parts. React gets informed, knows which part(s) to change, and does it quickly without re-rendering the whole DOM.

Can I use state in every component?

Another important question you might ask about state is where exactly we can use it. In the early days, state could only be used in class components, not in functional components. That’s why functional components were also known as stateless components. However, after the introduction of React Hooks, state can now be used both in class and functional components.

If your project is not using React Hooks, then you can only use state in class components.

What are the differences between props and state?

The main differences between props and state:

Components receive data from outside with props, whereas they can create and manage their own data with state.

Props are used to pass data, whereas state is for managing data. Data from props is read-only, and cannot be modified by a component that is receiving it from outside.

State data can be modified by its own component, but is private (cannot be accessed from outside). Props can only be passed from parent component to child (unidirectional flow).

Modifying state should happen with the setState ( ) method or in hooks.

What is React Component ?

React components let you break up the user interface into separate pieces that can then be reused and handled independently.

A React component takes an optional input and returns a React element which is rendered on the screen.

There are mainly two components in React:

- Functional Components

- Class Components

React Function Components are the status quo of writing modern React applications. In the past, there have been various React Component Types, but with the introduction of React Hooks it’s possible to write your entire application with just functions as React components. This in-depth guide shows you everything about React Function Components, which are basically just JavaScript Functions being React Components which return JSX (React’s Syntax)

import React from ‘react’;
function App() {
const greeting = ‘Hello Function Component!’;
return <h1>{greeting}</h1>;
}
export default App;

React Class Components when creating a React component, the component’s name must start with an upper case letter. The component has to include the extends React. Component statement, this statement creates an inheritance to React.Component, and gives your component access to React.Component’s functions. The component also requires a render() method, this method returns HTML. If there is a constructor() function in your component, this function will be called when the component gets initiated.

The constructor function is where you initiate the component’s properties.

In React, component properties should be kept in an object called state.

The constructor function is also where you honor the inheritance of the parent component by including the super() statement, which executes the parent component’s constructor function, and your component has access to all the functions of the parent component (React.Component).

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

happy hacking❤