DEV Community: Fahim Hossain

Welcome to the Custom Components from Styled-Components!

Fahim Hossain — Fri, 04 Mar 2022 21:17:16 +0000

If you are practicing React or similar JS library then sometimes its a hectic operation to make multiple divs or HTML tags. And Styling them into that HTML tags and managing them is a hard work too.

To make your own custom stlyed components, "Styled-Components" is a popular solution for this type of task.

*What is Styled-Components? *

styled-components is the result of wondering how we could enhance CSS for styling React component systems.

Some Advantages of Styled Components:

Personalized Component name
No class name conflict
Easy deletetaion of CSS and troubleshooting
Dynamic styling with prop values
Basic CSS, Easy maintanece etc.

As we got the basic idea what actually it is.

Before getting into the basics lets know how to install it.

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

The Basics
Lets dig into it.
the basics of Styled-components format is:

const ComponentName = styled.h1`
    font-size: 1em; 
    color: red; 
`

This type of component creation can be done in the same file or can be also written in a separate file too.

if we look into a real styling the overall view will be:

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>

//source: styled-components documentation

Reuse of Existing Tags

Also we can reuse the existing styled component like

const Button = styled.button`
     color: red;
     font-size: 1em;
     margin: 1em;
     padding: 0.25em 1em;
     border: 2px solid palevioletred;
     border-radius: 3px;
`;

// A new component based on Button, but with some override styles
const TomatoButton = styled(Button)`
  color: tomato;
  border-color: tomato;

render(
  <div>
    <Button>Normal Button</Button>
    <TomatoButton>Tomato Button</TomatoButton>
  </div>
);
`

Use Of Props in
Styled-components can have props to make similar component reusable. For example,

const Headline = styled.h1`
  color: ${props => props.color};
`

function App() {
  return (
    <>
    <Headline color="red">
      Text 
    </Headline>
    <Headline color="blue">
      Text 
    </Headline>
    </>
  )
}

Conditional Props
These props are dynamic inputs, it can be useable in conditional cases.

const Headline = styled.h1`
  visibility: ${props => (
    props.show ? "visible" : "hidden")
  };`

function App() {
  return (
    <Headline show={false}>
      Text 
    </Headline>
  )
}

These are primary basics of styled components.
Also the styled Components has some advanced uses too.
For more visit the styled components Documentation Here: https://styled-components.com/docs/basics#motivation

Redux Toolkit & its usage

Fahim Hossain — Fri, 25 Feb 2022 08:54:24 +0000

As a result of Redux Toolkit, you don't have to worry about a lot of boilerplate when using Redux, making your app easier to adopt and implement Redux. The toolkit comes preloaded with the tools you might need when building a Redux app. Moreover, we can also customize the given configurations to suit our specific needs.

Installation
@reduxjs/toolkit comes preloaded with the redux dependencies as well as some essential middlewares.

Redux Toolkit

yarn add @reduxjs/toolkit

Redux

yarn add redux 
yarn add react-redux 
yarn add redux-immutable-state-invariant 
yarn add redux-thunk 
yarn add redux-devtools-extension

Store Creation
For Redux Toolkit, configureStore internally calls combineReducers to create the rootReducer, so that you don't have to worry about creating it manually. As well as configuring a few essential middlewares internally, it also helps you write clean and error-free code. These settings can be modified as needed according to the official documentation.

Redux Toolkit

import { configureStore } from '@reduxjs/toolkit'
import filter from '...'
import movie from '...'

export default configureStore({
  reducer: {
    filter,
    movie,
  },
})

Redux

import { combineReducers, applyMiddleware, createStore } from "redux"
import reduxImmutableStateInvariant from 'redux-immutable-state-invariant'
import thunk from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension/logOnlyInProduction'
import filter from '...'
import movie from '...'

// Custom middlewares based on redux-immutable-state-invariant
const immutableStateInvariant = // deeply compares state values for mutations. 
// It can detect mutations in reducers during a dispatch, and also mutations that 
// occur between dispatches (such as in a component or a selector). When a 
// mutation is detected, it will throw an error and indicate the key path for 
// where the mutated value was detected in the state tree.
const serializableStateInvariant = // a custom middleware created specifically 
// for use in Redux Toolkit. Similar in concept to immutable-state-invariant, 
// but deeply checks your state tree and your actions for non-serializable values 
// such as functions, Promises, Symbols, and other non-plain-JS-data values. 
// When a non-serializable value is detected, a console error will be printed 
// with the key path for where the non-serializable value was detected.
const middleware = process.env.NODE_ENV !== 'production' ?
  [thunk, immutableStateInvariant, serializableStateInvariant] :
  [thunk];
const rootReducer = combineReducers({ 
  filter, 
  movie, 
})
export default createStore(rootReducer, composeWithDevTools(
  applyMiddleware(...middleware)
))

Creating reducers and sync actions (aka, slices)

Redux Toolkit introduces a new concept called slices, which is essentially a consolidated object containing the reducer and all the synchronous actions. No more action types or types of actions, and the state can now be mutated.

Redux Toolkit

import { createSlice } from '@reduxjs/toolkit'

const sliceName = 'movie'

const movieSlice = createSlice({
  name: sliceName,
  initialState: {
    entities: [],
    totalEntities: 0,
    error: '',
    loading: false,
  },
  reducers: {
    resetMovies: (state) => {
      state.entities = []
      state.totalEntities = 0
      state.error = ''
      state.loading = false
    },
  },
})

export const { resetMovies } = movieSlice.actions

export default movieSlice.reducer

Redux

const initialState = {
  entities: [],
  totalEntities: 0,
  error: '',
  loading: false,
}

const RESET_MOVIES = 'RESET_MOVIES'

export const resetMovies = () => ({
  type: RESET_MOVIES
})

export default function movie(state = initialState, action) {
  switch (action.type) {
    case RESET_MOVIES:
      return {
        entities: [],
        totalEntities: 0,
        error: '',
        loading: false,
      }
    default:
      return state
  }
}

Creating async actions (aka, thunks)
Additionally, Redux Toolkit includes the createAsyncThunk function. It gives us 3 implied sync actions for every thunk to be processed in our reducer, namely .pending, .fulfilled and .rejected. Therefore, we do not need to define actions for each state. We get 3 implied sync actions for each thunk to be processed in our reducers. These are <thunkStringName>.pending , <thunkStringName>.fulfilled and <thunkStringName>.rejected.

Redux Toolkit

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

const sliceName = 'movie'

export const fetchMovies = createAsyncThunk(
  `${sliceName}/fetchMovies`,
  (_, { getState }) => {
    const { searchTerm, page, type } = getState().filter
    return movieAPI.fetchBySearch(searchTerm, page, type)
  }
)

const movieSlice = createSlice({
  ...
  extraReducers: {
    [fetchMovies.pending]: (state) => {
      state.loading = true
    },
    [fetchMovies.fulfilled]: (state, action) => {
      state.entities = action.payload.Search
      state.totalEntities = action.payload.totalResults
      state.error = ''
      state.loading = false
    },
    [fetchMovies.rejected]: (state, action) => {
      state.entities = []
      state.totalEntities = 0
      state.error = action.error.message
      state.loading = false
    },
  },
})

Redux

...

const FETCH_MOVIES_PENDING = 'FETCH_MOVIES_PENDING'
const FETCH_MOVIES_FULFILLED = 'FETCH_MOVIES_FULFILLED'
const FETCH_MOVIES_REJECTED = 'FETCH_MOVIES_REJECTED'

...

export const fetchMoviesPending = () => ({
  type: FETCH_MOVIES_PENDING
})
export const fetchMoviesFulfilled = (result) => ({
  type: FETCH_MOVIES_FULFILLED,
  payload: result
})
export const fetchMoviesRejected = (error) => ({
  type: FETCH_MOVIES_REJECTED,
  payload: error
})

export function fetchMovies() {
  return async function (dispatch, getState) {
    dispatch(fetchMoviesPending())
    const { searchTerm, page, type } = getState().filter
    try {
      const result = await movieAPI.fetchBySearch(searchTerm, page, type)
      dispatch(fetchMoviesFulfilled(result))
    } catch (error) {
      dispatch(fetchMoviesRejected(error))
    }
  }
}

export default function movie(...) {
  switch (action.type) {
    ...
    case FETCH_MOVIES_PENDING:
      return {
        ...state,
        loading: true,
      }
    case FETCH_MOVIES_FULFILLED:
      return {
        entities: action.payload.Search,
        totalEntities: action.payload.totalResults,
        error: '',
        loading: false,
      }
    case FETCH_MOVIES_REJECTED:
      return {
        entities: [],
        totalEntities: 0,
        error: action.error.message,
        loading: false,
      }
    ...
  }
}

Usage In React APP
Once the store and the slices have been created, you can setup Redux in your app the same way as you've always have.

import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'
import store from './store'
import { Provider } from 'react-redux'

ReactDOM.render(
  <React.StrictMode>
    <Provider store={store}>
      <App />
    </Provider>
  </React.StrictMode>,
  document.getElementById('root')
)

Movies/index.jsx

import React, { useEffect } from 'react'
import Movies from './presenter'
import { useSelector, shallowEqual, useDispatch } from 'react-redux'
import { search } from '../../services/filter/slice'

export default () => {
  const { entities, totalEntities, error, loading } = useSelector(
    (state) => state.movie,
    shallowEqual
  )
  const searchTerm = useSelector((state) => state.filter.searchTerm)
  const dispatch = useDispatch()

  useEffect(() => {
    dispatch(search(searchTerm))
  }, [dispatch, searchTerm])

  return (
    <Movies
      entities={entities}
      totalEntities={totalEntities}
      error={error}
      loading={loading}
    />
  )
}

*Sources: *
_Codes are taken from this github. _
*Github * https://github.com/batbrain9392/redux-tutorial

What is CRUD!

Fahim Hossain — Fri, 24 Dec 2021 16:46:54 +0000

CRUD is a short form of Create, Read, Update & Delete. These 4 steps are the process of creating, reading, updating and deleting methods in Database. These methods can be applied in both Relational or Non-Relational databases.

We know databases are used to save user data, login data, product data or anything that needs to be stored for the applications. To Create a database or insert data, we need to create a database using the create method. To save the data and to read the data from the database we need to perform a Read method. Also there needs to be update and delete these data when needed. The Update and Delete are for deleting and updating the data in databases.

But before starting the details, in MongoDB the datas is saved into a collection format. These collections are similar to JSON file format. Now lets move to creating and interesting data into a collection. Also to perform these operations we will use Node.Js as runtime and Express.Js as the framework to get these tasks in an easier format.

In Express, Mongo, Node the CRUD operations are handled by these keywords like POST, GET, PUT and DELETE.Where

Create is POST
Read is GET
Update is PUT &
Delete is DELETE

Let's dig into the details. We will talk about the CRUD operation in MongoDB which is a non-relational database.

Create Operations
Creating or inserting operation does the task of creating a new collection or insert or add a new data into a collection. Browsers will perform Create operation when any POST request is sent to the server. Usually POST packs the data and sends it to the database.

app.post('/test', (req, res) => {
    const result = collectionName.insertOne(singleData);
res.json(result);
})

This above part of code creates a single data insert and if there is no collection name in the mongoDB then a collection will be opened according to the given collection name in the code.

Read Operations
Reading operations means doing the GET operations. We can get a single item using findOne() method or we can get the whole data to read by using find() method. In the code we can write.

app.get('/test', (req, res) => {
    const result = collectionName.find({}) //to read the whole data in an object.
    const result = collectionName.findOne(singleData);
res.json(result);

 })

The above code does the reading operations between find and findOne operations, find is just used to get all the data available in the collection whereas findOne finds the specific data available in the collection.

Update Operation
To update data in the database we need to use the PUT operation. But here is a new thing. First we need to find the data using its own unique ID which is _id or anything in the MongoDB and then we can set/edit the data in it. If we look into the code the code will be like:

app.put('/test',(req, res) => {
      const filterData = { email: user.email };
      const updateData = { $set: { role: 'admin' } };
      const result = usersCollection.updateOne(filterData , updateData );
      res.json(result);
})

The above code runs a query using filter data or the data received from the request and then it updates the data in the 2nd line of the block using $set: {update data}. And then as a response it updates the data.

Delete Operation
To delete data in the database we need to use DELETE operation. The process is similar to updating the data because when it does delete a single data the data needs to be searched in the collection. In the code,

app.put('/test/:id',(req, res) => {
      const filterData = { _id: Object(id) };
      const result = usersCollection.deleteOne(filterData);
      res.json(result);
})

The above code filters and gets the specific id using MongoDBs objectID method then it deletes a single item from the whole collection.

That's it for crud operation basics in mongoDB.

Component Lifecycle in React

Fahim Hossain — Wed, 22 Dec 2021 17:48:02 +0000

*ReactJS * works by using components. It makes the code more reusable. These components have a specific lifecycle where they get life and work on the code then it goes into hibernation. Before starting about the component lifecycle, we need to know what is component in ReactJS?

A component is a block of a react app. Multiple components are basically blocks of the react app having a specific HTML render output in it. So we can say the starting component is App.js in the prebuilt react file. Which can be connected with the other components for routing or building the site more dynamic and useful.

Functional and Class components are two types of components written in React, we will talk about functional components. The above image represents a functional component where a function is having a return output. This function is exportable, which means we can use this component anywhere in the react app and the function will print the line written under

wrapper. If anyone needs to use multiple divs in a single element, then he/she can use multiple div tags under the main div tag.

So this is somewhat an idea about components and what a component really is in ReactJS. But we were talking about the component lifecycle. These components work in a cycle where it maintains 3 steps. They are:

Mounting
Updating and
Unmounting

(source: https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/)

1. Mounting
In this phase of react component its being initialised by using constructors. These constructors are simple functions or methods having the state of the variables. Though this constructor applies on class based components because in Functional components it uses “useState” hook for setting and changing the state in a variable.
So mostly the hook is there to handle these constructors. From the Q&A section of react it says:

Anyways, so in this phase the component mounts in the DOM using a default state. In the functional component the code will be similar like this.

const App = () => {
  const [counter, setCounter] = useState(0);

  console.log("This happens on EVERY render.");
  return (
    <>
      <div>Counter: {counter}</div>
      <div style={{ marginTop: 20 }}>
        <button onClick={() => setCounter(counter + 1)}>Increment</button>
      </div>
    </>
  );
};

[credit: https://dev.to/bytebodger/constructors-in-functional-components-with-hooks-280m ]

In the above code the useState hook mounts the variable to the dom and after that it will prepare itself for updating phase.

componentDidMount() is invoked immediately after a component is mounted (inserted into the tree).

2. Updating
Updating happens when an existing dom is being changed or manipulated. These updates can be handled by state or props. From the above we somehow got a glimpse of state. But props is a value which is passed by another component. It's a read only property which is received like an argument in functional components. If we update the code by setting a new state the code will be like this:

const App = () => {
  const [counter, setCounter] = useState(0);

  //new state update
  setCounter(5);


  return (
    <>
      <div>Counter: {counter}</div>
      <div style={{ marginTop: 20 }}>
        <button onClick={() => setCounter(counter + 1)}>Increment</button>
      </div>
    </>
  );
};

From the above code, I’ve set the new setCounter value to 5 so the code will start counting from 5 instead of 0. Also the onClick function is updating the state on every click.

If the variable or the state is changed then the render function happens. Before that the updating process keeps going on.
componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

3. Unmounting
The component will unmounts when the component is being removed from the DOM. componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. Perform any necessary cleanup in this method, such as invalidating timers, cancelling network requests, or cleaning up any subscriptions that were created in componentDidMount().

Though in react documentation it's clearly said that, “You should not call setState() in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.”

Representation of react component lifecycle: