React is an open-source JavaScript library that is known for creating great user interfaces. It also simplifies the development of visual interfaces. With React you can create complex UIs from all the small code pieces called components. As compared to the other technologies, React is still considered a new technology in the market. Facebook’s newsfeed was the first test case of React in 2011. The library was created by Jordan Walke, a software engineer at Facebook.
In this blog, a Twitter tweets project will be created by using React that will display the tweets. So, before starting the process let’s understand React Hooks and its use in creating Twitter tweets.
What are React Hooks?
React Hooks are the new features introduced in React. A hook is a React function that allows you to use state and React features from function-based components. There are multiple hooks but only five hooks are frequently used in React. Let’s check out the five major hooks:
⦁useState: Manages and stores the data within the individual components.
⦁useEffect: Perform the actions like working with a browser or HTTP request.
⦁useRefs: Refers the JSX elements.
⦁useContext: Accesses the data from React context and shares this data with the rest of the component. Instead of passing props that create a problem like prop-drilling.
⦁useReducer: Manages and stores the data among multiple components.
Why choose React Hooks?
Through React hooks you don’t have to refactor functional components into class components when it grows. You also don’t have to worry about the “this” keyword. There aren’t any method bindings and you can share the stateful logic between your components as well.
Benefits of React Hooks:
It promotes the re-usability of state full logic and provides flexibility in extracting and testing as well. It is a concise code that is easier to maintain and highly readable. You can work easily with hooks and it will make your code look clean.
Twitter Tweets with React:
Now, let’s create twitter tweets with the help pf React. It contains two sctions that are back-end developed by Node.js and front end developed by React.
· Back-end(nodejs) – Since the agenda isn’t creating the back end using Node.js, you can check out the process here. (https://github.com/sarfaraz-1786/twitter-server).
· Now, the server will provide data to the front-end. Check the code mentioned below:
For the front-end, build this by following the steps mentioned below:
1. Create a React application either with yarn or npm.
Yarn: It creates react-app Twitter tweets.
Npm: It also creates react-app Twitter tweets.
2. Create a component that consumes API provided by the above server. In this step, three React hooks are used that are useEffect, createContext, useState.
The useEffect hooks are used to consume our API which is http://127.0.0.1:8080/tweets?twitter_user_name=${name}&count=20.
Create context used to centralize & access the data which is coming from the use effect. Store the data with useState into items1 and items2 that act as container lists and share this with all the other components.
3. Now, to access the data shared with all components, use useContext to consume the data. Extract items1 and items2 from TwitterContext and used the “map” method to render the data into the JSX.
After following all the steps mentioned above, the Twitter tweets are finally created using React. Do carry out this procedure and create your amazing Twitter tweets in no time.
Do share the experience in the comments box. Also, for more information on React or any of its associated stacks, please write us at info@embarkingonvoyage.com