--- title: "React With Redux Toolkit" lang: "en" author: "Mohammad Abu Mattar" canonical: https://mkabumattar.com/post/react-with-redux-toolkit --- ![Blog post image for React With Redux Toolkit - In this post, we will learn how to use Redux Toolkit to manage the state of our React application.](/_astro/hero.DS6Oq_Cn_2nCqCH.webp) [Home](/)›[Blog](/blog)›[All Categories](/blog/categories)›[ReactJS](/blog/categories/reactjs) Blog [Prev in ReactJSReact Context API for State Management](/blog/post/react-context-api-state-management) [ReactJS](/blog/categories/reactjs)[Redux](/blog/categories/redux)[State Management](/blog/categories/state-management)[Frontend Development](/blog/categories/frontend-development) # React With Redux Toolkit [Mohammad Abu Mattar](/authors/mohammad-abu-mattar)Published: 02 Dec 202206 Mins read10 Mins listen [Markdown for AI(opens in a new tab)](/post/react-with-redux-toolkit/index.md "Open the plain-Markdown version of this page, for pasting into an AI tool") TL;DR In this post, we will learn how to use Redux Toolkit to manage the state of our React application. Series [Frontend Essentials](/series/frontend-essentials)2/3 [PreviousSetup Nextjs Tailwind CSS Styled Components with TypeScript](/blog/post/setup-nextjs-tailwind-css-styled-components-with-typescript)[NextReact Context API for State Management](/blog/post/react-context-api-state-management) All posts in this series (3) Blog3 1. [Setup Nextjs Tailwind CSS Styled Components with TypeScript](/blog/post/setup-nextjs-tailwind-css-styled-components-with-typescript) 2. [React With Redux ToolkitYou are here](/blog/post/react-with-redux-toolkit) 3. [React Context API for State Management](/blog/post/react-context-api-state-management) ### React With Redux Toolkit Contents [Prerequisites](#prerequisites)[Introduction](#introduction)[What is Redux?](#what-is-redux)[What is Redux Toolkit?](#what-is-redux-toolkit)[Why Redux Toolkit?](#why-redux-toolkit)[Installation](#installation)[Step 1: initialize a React project using vite](#step-1-initialize-a-react-project-using-vite)[Step 2: go to the project directory](#step-2-go-to-the-project-directory)[Step 3: install the basic dependencies](#step-3-install-the-basic-dependencies)[Step 4: install Redux Toolkit](#step-4-install-redux-toolkit)[Usage](#usage)[Step 1: remove the unnecessary files](#step-1-remove-the-unnecessary-files)[Step 2: create the basic structure](#step-2-create-the-basic-structure)[\# Step 2.1: create the folders and files](#-step-21-create-the-folders-and-files)[\# Step 2.2: create the `App.jsx` file](#-step-22-create-the-appjsx-file)[\# Step 2.3: create the `main.jsx` file](#-step-23-create-the-mainjsx-file)[Step 3: create the store](#step-3-create-the-store)[\# Step 3.1: create the `store.js` file](#-step-31-create-the-storejs-file)[Step 4: create the `counterSlice.js` file](#step-4-create-the-counterslicejs-file)[Step 5: add the `counterSlice` reducer to the store](#step-5-add-the-counterslice-reducer-to-the-store)[Step 6: create the Counter component](#step-6-create-the-counter-component)[Step 7: add the Counter component to the App component](#step-7-add-the-counter-component-to-the-app-component)[Step 8: Run the application](#step-8-run-the-application)[Step 9: access the `count` value in other components](#step-9-access-the-count-value-in-other-components)[Step 10: add the Header component to the App component](#step-10-add-the-header-component-to-the-app-component)[Step 11: Run the application](#step-11-run-the-application)[Source Code](#source-code)[Conclusion](#conclusion)[Resources](#resources) ## [Prerequisites](#prerequisites) This post assumes that you have a basic understanding of React and Redux, and it helps if you have some experience with React Hooks like `useReducer`. ## [Introduction](#introduction) Nowadays, we have a lot of state management libraries for React, such as Redux, MobX, and Recoil. In this post, we will learn how to use Redux Toolkit to manage the state of our React application. ### [What is Redux?](#what-is-redux) Redux is a predictable state container for JavaScript apps. It helps you write applications that behave consistently, run in different environments (client, server, and native), and are easy to test. On top of that, it provides a great developer experience, such as live code editing combined with a time traveling debugger. ### [What is Redux Toolkit?](#what-is-redux-toolkit) Redux Toolkit is the official, opinionated, batteries-included toolset for efficient Redux development. It is intended to be the standard way to write Redux logic. It was originally created to help address three common concerns about Redux: - Configuring a Redux store is too complicated. - I have to add a lot of packages to get Redux to do anything useful. - Redux requires too much boilerplate code. ### [Why Redux Toolkit?](#why-redux-toolkit) Redux Toolkit is a package that contains a set of tools to help you write Redux logic more easily. It is not a Redux replacement, but it is an alternative to writing Redux logic by hand. ## [Installation](#installation) ### [Step 1: initialize a React project using vite](#step-1-initialize-a-react-project-using-vite) First, we need to initialize a React project using vite. Terminal window ``` 1# using npm2npm init vite react-with-redux-toolkit3 4# using yarn5yarn create vite react-with-redux-toolkit6 7# using pnpm8pnpm create vite react-with-redux-toolkit9 10# using npx11npx create-vite react-with-redux-toolkit ``` Terminal window ``` 1# select the react2? Select a framework: react ``` Terminal window ``` 1# select the javascript2? Select a variant: javascript ``` Note You can use `npm`, `yarn`, `pnpm`, or `npx` to initialize a React project using vite. Note You can use `typescript` instead of `javascript` to initialize a React project using vite. ### [Step 2: go to the project directory](#step-2-go-to-the-project-directory) Terminal window ``` 1cd react-with-redux-toolkit ``` ### [Step 3: install the basic dependencies](#step-3-install-the-basic-dependencies) Terminal window ``` 1# using npm2npm install3 4# using yarn5yarn install6 7# using pnpm8pnpm install ``` ### [Step 4: install Redux Toolkit](#step-4-install-redux-toolkit) Terminal window ``` 1# using npm2npm install @reduxjs/toolkit react-redux3 4# using yarn5yarn add @reduxjs/toolkit react-redux6 7# using pnpm8pnpm add @reduxjs/toolkit react-redux ``` ## [Usage](#usage) ### [Step 1: remove the unnecessary files](#step-1-remove-the-unnecessary-files) We will remove the unnecessary files and clean up the `src` directory. Terminal window ``` 1rm -rf src/* ``` Explanation: - `rm` - remove files or directories - `-rf` - remove directories and their contents recursively ### [Step 2: create the basic structure](#step-2-create-the-basic-structure) #### [Step 2.1: create the folders and files](#step-21-create-the-folders-and-files) We will create the basic structure of our project. Terminal window ``` 1# create the components directory2mkdir src/components3 4# create the store directory5mkdir src/app6 7# create the App.jsx file8touch src/App.jsx9 10# create the main.jsx file11touch src/main.jsx ``` #### [Step 2.2: create the `App.jsx` file](#step-22-create-the-appjsx-file) We will create the `App.jsx` file. src/App.jsx ``` 1const App = () => {2 return (3
4

React With Redux Toolkit - Part 1

5
6 );7};8 9export default App; ``` #### [Step 2.3: create the `main.jsx` file](#step-23-create-the-mainjsx-file) We will create the `main.jsx` file. src/main.jsx ``` 1import App from './App';2import React, {StrictMode} from 'react';3import ReactDOM from 'react-dom/client';4 5ReactDOM.createRoot(document.getElementById('root')).render(6 7 8 ,9); ``` ### [Step 3: create the store](#step-3-create-the-store) #### [Step 3.1: create the `store.js` file](#step-31-create-the-storejs-file) We will create the `store.js` file. src/app/store.js ``` 1import {configureStore} from '@reduxjs/toolkit';2 3const store = configureStore({4 reducer: {},5});6 7export default store; ``` As you can see, we have imported the `configureStore` function from `@reduxjs/toolkit` and we have created the store using the `configureStore` function. Explanation: - `import { configureStore } from '@reduxjs/toolkit'` - import the configureStore function - `const store = configureStore({ reducer: {} })` - create the store using the configureStore function - `export default store` - export the store Note We will add the reducer later. After that, we will make some changes to the `main.jsx` file. src/main.jsx ``` 1import App from './App';2import store from './app/store';3import React, {StrictMode} from 'react';4import ReactDOM from 'react-dom/client';5import {Provider} from 'react-redux';6 7ReactDOM.createRoot(document.getElementById('root')).render(8 9 10 11 12 ,13); ``` You’ll notice that we have wrapped the App component with the `Provider` component, after importing it from the `react-redux` library. We also imported the store from `./app/store`. Then we passed that `store` to the `Provider` component. Explanation: - `import { Provider } from 'react-redux'` - import the Provider component - `import store from './app/store'` - import the store - `` - pass the store to the Provider component ### [Step 4: create the `counterSlice.js` file](#step-4-create-the-counterslicejs-file) We will create the `counterSlice.js` file. src/components/Counter/counterSlice.js ``` 1import {createSlice} from '@reduxjs/toolkit';2 3const initialState = {4 count: 0,5};6 7const counterSlice = createSlice({8 name: 'counter',9 initialState,10 reducers: {11 increment: (state) => {12 state.count += 1;13 },14 decrement: (state) => {15 state.count -= 1;16 },17 reset: (state) => {18 state.count = 0;19 },20 incrementByAmount: (state, action) => {21 state.count += action.payload;22 },23 },24});25 26export const {increment, decrement, reset, incrementByAmount} =27 counterSlice.actions;28 29export default counterSlice.reducer; ``` The `createSlice` function is used to create a slice of the store. We passed the name of the slice as `counter` and the initial state as `initialState`. We passed the reducers as an object, holding `increment`, `decrement`, `reset`, and `incrementByAmount`. Then we exported the `increment`, `decrement`, `reset`, and `incrementByAmount` actions, and the reducer itself. Explanation: - `import { createSlice } from '@reduxjs/toolkit'` - import the createSlice function - `const initialState = { count: 0 }` - define the initial state of the slice - `const counterSlice = createSlice({ name: 'counter', initialState, reducers: { increment: (state) => { state.count += 1 }, decrement: (state) => { state.count -= 1 }, reset: (state) => { state.count = 0 }, incrementByAmount: (state, action) => { state.count += action.payload }, } })` - create the slice of the store - `export const { increment, decrement, reset, incrementByAmount } = counterSlice.actions` - export the actions - `export default counterSlice.reducer` - export the reducer ### [Step 5: add the `counterSlice` reducer to the store](#step-5-add-the-counterslice-reducer-to-the-store) We will add the `counterSlice` reducer to the store. src/app/store.js ``` 1import counterReducer from '../components/Counter/counterSlice';2import {configureStore} from '@reduxjs/toolkit';3 4const store = configureStore({5 reducer: {6 counter: counterReducer,7 },8});9 10export default store; ``` Now after adding the `counterSlice` reducer to the store, it will be available in the entire application. Explanation: - `import counterReducer from '../components/Counter/counterSlice'` - import the counterSlice reducer - `reducer: { counter: counterReducer }` - add the counterSlice reducer to the store ### [Step 6: create the Counter component](#step-6-create-the-counter-component) We will create the Counter component. src/components/Counter/Counter.jsx ``` 1import {increment, decrement, reset, incrementByAmount} from './counterSlice';2import React from 'react';3import {useSelector, useDispatch} from 'react-redux';4 5const Counter = () => {6 const count = useSelector((state) => state.counter.count);7 const dispatch = useDispatch();8 9 return (10
11

Count: {count}

12 13 14 15 18
19 );20};21 22export default Counter; ``` As you can see, we have imported the `useSelector` and `useDispatch` hooks from `react-redux`, and the `increment`, `decrement`, `reset`, and `incrementByAmount` actions from `./counterSlice`. We use `useSelector` to get the count from the store, and `useDispatch` to dispatch the actions. Each button dispatches one of those four actions. Explanation: - `import { useSelector, useDispatch } from 'react-redux'` - import the useSelector hook and the useDispatch hook - `import { increment, decrement, reset, incrementByAmount } from './counterSlice'` - import the actions - `const count = useSelector((state) => state.counter.count)` - get the count from the store - `const dispatch = useDispatch()` - get the dispatch function - `onClick={() => dispatch(increment())}` - dispatch the increment action - `onClick={() => dispatch(decrement())}` - dispatch the decrement action - `onClick={() => dispatch(reset())}` - dispatch the reset action - `onClick={() => dispatch(incrementByAmount(5))}` - dispatch the incrementByAmount action ### [Step 7: add the Counter component to the App component](#step-7-add-the-counter-component-to-the-app-component) We will add the Counter component to the App component. src/App.jsx ``` 1import Counter from './components/Counter/Counter';2import React from 'react';3 4const App = () => (5
6 7
8);9 10export default App; ``` As you can see, we have imported the Counter component and added it to the App component. Explanation: - `import Counter from './components/Counter/Counter'` - import the Counter component - `` - add the Counter component to the App component ### [Step 8: Run the application](#step-8-run-the-application) We will run the application. Terminal window ``` 1yarn dev ``` ![Redux Toolkit Counter](/assets/blog/0029-react-with-redux-toolkit/redux-toolkit-counter.png) As you can see, we have a counter. We can increment it, decrement it, reset it, and increment it by 5. ### [Step 9: access the `count` value in other components](#step-9-access-the-count-value-in-other-components) We will access the `count` value in other components, for example, in the `Header` component. src/components/Header/Header.jsx ``` 1import React from 'react';2import {useSelector} from 'react-redux';3 4const Header = () => {5 const count = useSelector((state) => state.counter.count);6 7 return (8
9

Redux Toolkit Counter

10

Count: {count}

11
12 );13};14 15export default Header; ``` As you can see, we have imported the `useSelector` hook from `react-redux`. We use it to get the `count` value from the store, and then render that value inside the `Header` component. Explanation: - `import { useSelector } from 'react-redux'` - import the useSelector hook - `const count = useSelector((state) => state.counter.count)` - get the count from the store - `

Count: {count}

` - add the count to the Header component ### [Step 10: add the Header component to the App component](#step-10-add-the-header-component-to-the-app-component) We will add the Header component to the App component. src/App.jsx ``` 1import Counter from './components/Counter/Counter';2import Header from './components/Header/Header';3import React from 'react';4 5const App = () => (6
7
8 9
10);11 12export default App; ``` As you can see, we have imported the Header component and added it to the App component. Explanation: - `import Header from './components/Header/Header'` - import the Header component - `
` - add the Header component to the App component ### [Step 11: Run the application](#step-11-run-the-application) We will run the application. Terminal window ``` 1yarn dev ``` ![Redux Toolkit Counter with Header](/assets/blog/0029-react-with-redux-toolkit/redux-toolkit-counter-with-header.png) As you can see, we have a counter we can increment, decrement, reset, and increment by 5. We also have a header showing the same count value. ## [Source Code](#source-code) You can find the source code for this tutorial on [GitHub](https://github.com/MKAbuMattar/react-with-redux-toolkit). You can clone the repository and run the application. Terminal window ``` 1# Clone the repository2git clone https://github.com/MKAbuMattar/react-with-redux-toolkit.git3 4# Go inside the directory5cd react-with-redux-toolkit6 7# Install dependencies8yarn install9 10# Run the application11yarn dev ``` ## [Conclusion](#conclusion) In this article, we learned how to set up a Redux store with Redux Toolkit. We created a Redux slice, wrote the actions and the reducers, and built the store from them. We added that store to the App component through the `Provider`. We added the Counter component to the App component, read the `count` value from a second component, and added the Header component to the App component as well. ## [Resources](#resources) - [Redux Toolkit Official Website](https://redux-toolkit.js.org/) - [Redux Toolkit Quick Start Tutorial](https://redux-toolkit.js.org/tutorials/quick-start) - [Redux Official Website](https://redux.js.org/) - [React Official Website](https://reactjs.org/) - [React Redux Documentation](https://react-redux.js.org/) - [Vite Official Website](https://vitejs.dev/) - [Redux Toolkit `configureStore` API Reference](https://redux-toolkit.js.org/api/configureStore) - [Redux Toolkit `createSlice` API Reference](https://redux-toolkit.js.org/api/createSlice) - [Using Redux with React Hooks (`useSelector`, `useDispatch`)](https://react-redux.js.org/api/hooks) - [Redux DevTools Extension](https://github.com/reduxjs/redux-devtools) - [Redux Core Concepts](https://redux.js.org/understanding/thinking-in-redux/three-principles) - [React Context (Alternative for simple state management)](https://reactjs.org/docs/context.html) - [GitHub Repository for this tutorial](https://github.com/MKAbuMattar/react-with-redux-toolkit) Was this useful? ## Tags [#ReactJS](/blog/tags/reactjs)[#Redux Toolkit](/blog/tags/redux-toolkit)[#State Management](/blog/tags/state-management)[#JavaScript](/blog/tags/javascript)[#Frontend](/blog/tags/frontend)[#Vite](/blog/tags/vite)[#React Hooks](/blog/tags/react-hooks)[#Redux Slices](/blog/tags/redux-slices) ## Share [Facebook](https://facebook.com/sharer/sharer.php?u=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Freact-with-redux-toolkit "Share on Facebook")[Twitter](https://twitter.com/intent/tweet/?text=React%20With%20Redux%20Toolkit&url=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Freact-with-redux-toolkit "Share on Twitter")[LinkedIn](https://www.linkedin.com/shareArticle?mini=true&url=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Freact-with-redux-toolkit&title=React%20With%20Redux%20Toolkit&summary=In%20this%20post%2C%20we%20will%20learn%20how%20to%20use%20Redux%20Toolkit%20to%20manage%20the%20state%20of%20our%20React%20application.&source=https://mkabumattar.com "Share on LinkedIn")[WhatsApp](https://wa.me/?text=React%20With%20Redux%20Toolkit%20https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Freact-with-redux-toolkit "Share on WhatsApp")[Telegram](https://t.me/share/url?url=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Freact-with-redux-toolkit&text=React%20With%20Redux%20Toolkit "Share on Telegram")[Reddit](https://www.reddit.com/submit?url=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Freact-with-redux-toolkit&title=React%20With%20Redux%20Toolkit "Share on Reddit")[Hacker News](http://news.ycombinator.com/submitlink?u=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Freact-with-redux-toolkit&t=React%20With%20Redux%20Toolkit "Share on Hacker News")[Pinterest](https://pinterest.com/pin/create/button/?url=https%3A%2F%2Fmkabumattar.com%2Fblog%2Fpost%2Freact-with-redux-toolkit&media=&description=In%20this%20post%2C%20we%20will%20learn%20how%20to%20use%20Redux%20Toolkit%20to%20manage%20the%20state%20of%20our%20React%20application. "Share on Pinterest")[Email]() ## Comments ## You might also enjoy More posts on similar topics [![React Context API for State Management](/_astro/hero.Dv7VXd7h_Z4sE61.webp)](/blog/post/react-context-api-state-management) ## [React Context API for State Management](/blog/post/react-context-api-state-management) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [ReactJS](/blog/categories/reactjs) - [State Management](/blog/categories/state-management) - [Frontend Development](/blog/categories/frontend-development) - [Next.js](/blog/categories/nextjs) - [JavaScript](/blog/categories/javascript) Introduction Managing application state well can make or break a React project. React offers several options for state management, and the Context API is one of the most flexible. But what exactly [#React Context API](/blog/tags/react-context-api)[#State Management](/blog/tags/state-management)[#Redux](/blog/tags/redux)+7 tags [read more](/blog/post/react-context-api-state-management) [![Setup Nextjs Tailwind CSS Styled Components with TypeScript](/_astro/hero.BP7GbA0g_O8bl1.webp)](/blog/post/setup-nextjs-tailwind-css-styled-components-with-typescript) ## [Setup Nextjs Tailwind CSS Styled Components with TypeScript](/blog/post/setup-nextjs-tailwind-css-styled-components-with-typescript) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [Next.js](/blog/categories/nextjs) - [Tailwind CSS](/blog/categories/tailwind-css) - [Styled Components](/blog/categories/styled-components) - [TypeScript](/blog/categories/typescript) - [Frontend Development](/blog/categories/frontend-development) Introduction In this post, we will set up Nextjs, Tailwind CSS and Styled Components with TypeScript, using the following tools:Nextjs Tailwind CSS Styled Components TypeScriptPrere [#Next.js Setup](/blog/tags/nextjs-setup)[#Tailwind CSS Integration](/blog/tags/tailwind-css-integration)[#Styled Components with Next.js](/blog/tags/styled-components-with-nextjs)+4 tags [read more](/blog/post/setup-nextjs-tailwind-css-styled-components-with-typescript) [![Building a Customizable Image Slider in React Using Hooks, SCSS, and TypeScript](/_astro/hero.CMtyRpHA_ZF7JrL.webp)](/blog/post/building-a-customizable-image-slider-in-react-using-hooks-scss-and-typescript) ## [Building a Customizable Image Slider in React Using Hooks, SCSS, and TypeScript](/blog/post/building-a-customizable-image-slider-in-react-using-hooks-scss-and-typescript) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [ReactJS](/blog/categories/reactjs) - [TypeScript](/blog/categories/typescript) - [SCSS](/blog/categories/scss) - [Frontend Development](/blog/categories/frontend-development) - [UI Components](/blog/categories/ui-components) Introduction In this tutorial, we will be building a customizable image slider in React using hooks, SCSS, and TypeScript. An image slider is a common UI element used in web applications to displa [#React Hooks](/blog/tags/react-hooks)[#TypeScript](/blog/tags/typescript)[#SCSS](/blog/tags/scss)+7 tags [read more](/blog/post/building-a-customizable-image-slider-in-react-using-hooks-scss-and-typescript) [![Get Started with Building ReactJS and Docker: A Complete Guide](/_astro/hero.CDA9gINC_5FejQ.webp)](/blog/post/get-started-with-building-reactjs-and-docker-a-complete-guide) ## [Get Started with Building ReactJS and Docker: A Complete Guide](/blog/post/get-started-with-building-reactjs-and-docker-a-complete-guide) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [ReactJS](/blog/categories/reactjs) - [Docker](/blog/categories/docker) - [DevOps](/blog/categories/devops) - [Containerization](/blog/categories/containerization) - [Web Development](/blog/categories/web-development) Introduction Docker is a powerful tool that allows developers to create, deploy, and run applications in a portable and scalable way. It uses containerization to encapsulate all the dependencies a [#ReactJS](/blog/tags/reactjs)[#Docker](/blog/tags/docker)[#Dockerfile](/blog/tags/dockerfile)+5 tags [read more](/blog/post/get-started-with-building-reactjs-and-docker-a-complete-guide) [![Run TypeScript Without Compiling](/_astro/hero.EI1J4T1U_ZTF3Kf.webp)](/blog/post/run-typescript-without-compiling) ## [Run TypeScript Without Compiling](/blog/post/run-typescript-without-compiling) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [TypeScript](/blog/categories/typescript) - [Node.js](/blog/categories/nodejs) - [JavaScript](/blog/categories/javascript) - [Development Tools](/blog/categories/development-tools) Introduction In this post, I will show you how to run TypeScript without compiling it to JavaScript first. This is useful for debugging and testing. Set up a TypeScript project Step 1: cr [#TypeScript](/blog/tags/typescript)[#Node.js](/blog/tags/nodejs)[#Ts node](/blog/tags/ts-node)+6 tags [read more](/blog/post/run-typescript-without-compiling) [![How to CI/CD AWS With Github using Jenkins](/_astro/hero.B1mpyM8T_14dvIE.webp)](/blog/post/how-to-ci-cd-aws-with-github-using-jenkins) ## [How to CI/CD AWS With Github using Jenkins](/blog/post/how-to-ci-cd-aws-with-github-using-jenkins) - [Mohammad Abu Mattar](/authors/mohammad-abu-mattar) - [CI/CD](/blog/categories/cicd) - [DevOps](/blog/categories/devops) - [AWS](/blog/categories/aws) - [Jenkins](/blog/categories/jenkins) - [GitHub](/blog/categories/github) Introduction In a previous post, I showed you how to set up Jenkins on an AWS EC2 instance. You can read that post here. In this post, I will sho [#CI/CD Pipeline](/blog/tags/cicd-pipeline)[#Jenkins](/blog/tags/jenkins)[#GitHub Integration](/blog/tags/github-integration)+6 tags [read more](/blog/post/how-to-ci-cd-aws-with-github-using-jenkins) 6 related posts