Create a twitch clone using React -3

Photo by Oskar Yildiz on Unsplash

Welcome to Part-3 of the series. You can find part-2 here.

We will start implementing forms in our project. We will use Redux-forms, but first let hook up redux-devtools in our project.

Redux Devtools is a chrome/firefox extension, which is extremely useful to debug Redux based project.

Head over to Redux Devtools Extension page here. You will find link for both Firefox and chrome webstore there. Go ahead and install it.

Next, you have to make some changes in root index.js file to use this extension. The changes are marked in bold.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, compose } from 'redux';
import reducers from './reducers';

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(reducers, composeEnhancers(applyMiddleware()));

ReactDOM.render(
<Provider store={store}><App /></Provider>, document.querySelector('#root'));

Now, head over to localhost and open the Developer panel. There click on the Redux tab. If the setup went right, you will see something like below.

Redux Devtools

Next, we will start with adding Redux-form in our project. It is a third party library, which helps us to use forms in an efficient way in our project.

Open your terminal, stop the running instance of server and install

redux-form@8.1.0

You can read the rest of the article from my blog site. The link for the same is below -

You can find part-4 here.

--

--

--

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

React Redux tutorials for beginners-5

A Guide to Heaps, Stacks, References and Values in Javascript

1. The invitation code is [277 734 554].Copy

5 Articles every WebDev should read this week (#51)

Express to Next-Connect Migration Guide

WHY WE USE REACT JS?

Migrating to webpack 5 to improve build time and reduce chunk sizes

View plant everything from.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Nabendu Biswas

Nabendu Biswas

Founder TWD, JavaScript & ReactJS Trainer, Youtuber, Blogger

More from Medium

Learning React with TypeScript by Building an API app

ReactJS Tutorial Part #4 ~ ReactJS Components

Create GraphQL Mutations in React App and Use Them

Chat App using WhatsApp web UI and React JS