Introduction to React

Hikari -

I am participating in a project using React language and learning a lot of experience from it. In my opinion, this is a very accessible language even if you are not a technical professional and I have become familiar with this language after only 2 weeks on the project .Today I will share what I have learned with you.

After working with React for a while, we may encounter one of the following problems:

  1. Wrapper hell components are nested together, creating a complex DOM tree.
  2. Components are too large.
  3. The trouble of Lifecycles in classes

React Hooks was born with the desire to solve these problems.

What is a Hook?

Hooks allow us to "hook" into React features such as state and lifecycle methods.

Example:

There are 3 rules for hooks:

  • Hooks can only be called inside React function components.
  • Hooks can only be called at the top level of a component.
  • Hooks cannot be conditional

Basic Hooks

I will give 3 example about Hooks (useState, useEffect and useContext) and you can find more types of Hooks at the React Tutorial

1. useState:

The React useState Hook allows us to track state in a function component.State generally refers to data or properties that need to be tracking in an application.

We initialize our state by calling useState in our function component.useState accepts an initial state and returns two values:

  • The current state.
  • A function that updates the state.

2. useEffect:

This hook performs side effects in function components. Side effects are actions that interact with the outside of the component, such as data fetching, subscriptions, timers, and DOM manipulations.

3. useContext

This hook accepts a context object and returns the current context value.  It's used for managing global or shared state.

Wrap child components in the Context Provider and supply the state value called Context Provider

Conclusion

In any programming language, understanding the basics will help a lot in product development, understanding React Native will help you have a great tool to build a website. I hope this basic knowledge will help you in some way. Wish you happy programming.