React-Js Development For Steemit | React Hooks | Steem Alliance Community.

Hello Everyone,

How are you guys, I hope members of Steem alliance will be well and good, by the grace of God, I am also feeling well. My responsibility in this community is as a development manager. I have started the consistently tutorial base program to spread the knowledge of programming and development.

In the last post, I shared the knowledge about React Router. In this tutorial, I have selected the topic “React Hooks”. after the successful completion of react I will design a front end of steemit with extra features by using SDS API and steem js library.

React Hooks,
Hooks are the functions that allow to usestate in the functioned bases components. in the previous tutorial, i have share the post in function base and class base components. if anyone have any confusion to understand it then you can read the react component topic. class base component maintains their own internal state that is why these components are called stateful component, but function base component is light weight component and never store any state these are light weight component. In function component, we use the hook to perform all operation of class base components.

For example, we are doing development on the baase of function component and we need to maintain its state then their are two opetion, one is convert the function base component into class base component and second one is to use the hooks to main the state.

Three Rules for using Hooks.

1. Only call Hooks at top level of the components.
2. Only call Hooks inside the React function components
3. The order of Hooks will same and it cannot be conditional.

Hooks will import from react

import React, { useState } from "react";

In the toturial, i will use useState hook to add state in function component. It returns a state variable.

import React, { useState } from "react";
import ReactDOM from "react-dom";

function ChangeText() {
  const [text, setText] = useState("Steemit");
return (
<>
<h1> I love {text}!</h1>
<button
  type="button"
   onClick={() => setText("Steem Alliance Community")} >
    SA
 </button>
 <button
  type="button"
  onClick={() => setText("Beauty of Creativity Community")}>
    BOC
  </button>`
  </>); }
ReactDOM.render(<ChangeText />, document.getElementById("root"));

The above code will show the I love steemit by applying <h1> tag. two button is created for change the text at the place of "steemit" word. when we will click on SA button then it will show the I love Steem Alliance Community and when click on BOC button then it will show the Beauty of Creativity Community. Hope you guys understand react events who it works. We will use in future steemit development.

Please cast witness vote to @bangla.Witness or set proxy to @rme.

_
Vote @bangla.witness as witness
Set Proxy @rme as proxy

Special Thanks.

Cc: @rme
Cc: @hungry-griffin
Cc: @stephenkendal

Thanks for giving your precious time to my post.
Follow | Upvote | Share | Comments
Follow me on Instagram.
Instagram

🆃🅷🅰️🅽🅺 🆈🅾️🆄