😎Fundamental React Js😎

What is React?

React is a javascript library for building user interfaces. React is a flexible, efficient, open-source library. It was developed by engineers at Facebook😊.

Why React?

• Making Components
• Component reusable
• Load first
• External Plugin
• Around 45% of world website use react

What is JSX?

JSX stands for JavaScript XML(extensible markup language). JSX allows us to write HTML in React/js code. JSX makes it easier to write and add HTML in React. JSX allows us to write HTML elements in js and place them in the DOM without any createElement() or appendChild() methods.

React Components

Component is a small piece of UI. Components are like functions that return HTML elements.

Why React Components?

• We Can reuse it.
• We can use it with other Components.
• We can pass data from one component to another.
• It can have its own data.
• It can be styled separately.
• It can be used as many times as we want.

What is inside the Components?

1.Data layer( Dynamic and optional)

• All logics
• State
• variables/ property
• function or Method
• Life cycle method

2. Representation layer( Static and Required)

• This is just static HTML
• When Data Changes, it will automatically update.

There are two different ways to create React Component

Get Mosharofhossen’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

1.Class-based component: Class component's name must start with an upper case letter. extends Component statement creates an inheritance to Component and render() method returns HTML. Create a Class Component Called Test

2.Functional component: The function that returns XML is called Functional Components.

Note: The file must start by importing React and it has to end with the statement export default test.

What is Props?

React is a Components based library that divides the UI into little reusable pieces. In some cases, those components need to communicate (send data to each other), and the way to pass between components is by using Props.

output:

Hello, parent Component

Im Child Component

What is React State?

State is the personal data of a component. When the data changes, the UI is updated immediately. That is, the state is dynamic. It can be set by using the setState() method.

Components Lifecycle method in React js

Everything in the world follows a cycle like humans or trees. we born, grow and then die. Almost everything follows this cycle in its life, and React components do as well. Components are created(mounted on the DOM),grow by Updating, and then die(Unmount on DOM). This is referred to as a component lifecycle.

The lifecycle of the component is divided into three phases.

1. Mounting: Constructor(), render(), componentDidMount().
2. updating: componentDidUpdate()
3. unmounting: componentWillUnmount()

What is Hooks?

Hooks are the functions which “hook into” react state and lifecycle features from function component. It does not work inside classes. A hook is a special function.

why Hooks?

1. reuse stateful logic between components.
2. simplify and organize.
3. avoid confusion around the behavior of the this keyword.
4. Avoid class constructors, binding method.