React-Redux

How to Use Redux in React?

So, if we want to create react project, we need to follow some steps into our Visual Studio Code(vs code).

Firstly, open up the new terminal and add some stuffes like below,

  • npx create-react-app project-name
  • yarn create react-app project-name

Well, our project had been created, What is the next to use Redux in our project?

💲 npm install redux redux-logger react-redux react-thunk

💲 yarn add redux redux-logger react-redux react-thunk

  • redux → allows us to implement redux in our project to use redux
  • react-redux → allows us to bind…


React-Redux

What is Redux and Why Use?

First of all, React is a UI library and Redux is a JavaScript Library. Redux allows us to manage State in JavaScript applications. Redux is not tied to React. It can be used with React, Angular, Vue or even Vanilla JavaScript. I think React and Redux’s name are mentioned together too much because they are popular with together, they work so well in an integrated way. Redux is referred to in the literature as an Application Statement Manager (ASM) that is, as an application status manager.

“Redux is a predictable state container for JavaScript…


What is VueJs ?

  • Basicly, Vue.Js is a framework of JavaScript
  • Vue.js povides us doing reactive and interactive Web interfaces easily and quickly 🚀

Javascript?

  • It is a programming language that is supported by all browsers and allows us to make manipulations on the running page.

Framework?

Briefly, framework is a library which includes lots of functions, rules that prepared before and it makes us feel free to develop application. It offers us the necessary infrastructure to prepare a project like a bootstrap 😃.

Reactive?

It is to process the transactions made by the user directly on the page without the need to refresh…


ReactJs

Notes

  • Firebase
  • React
  • TODOLIST app
  • Hosted online

3 fundamentals of REACT

STATE

  • Gets cleared after refreshed

Props

Hooks

  • useReducer() // alternative to useState() hooks 🔥
  • useState() // for the state management
  • useEffect() //for the side effects

Run Dynamic JavaScript with JSX 🚀

JSX = JavaScript + HTML hybrid

event.preventDefault(); // will stop the REFRESH !!!

  • Break your code up into components when using REACT JS

🔥 FIREBASE (database)

  • Real-time database 😃

🌏Hosted online (on firebase)

✔️FULL CRUD Functionality (Create, Read, Update & Delete)

✔️Material-UI for the design (front-end)

  • npm install @material-ui/core
  • yarn add @material-ui/core

✔️React-Icons for the design (front-end)

  • npm install react-icons

✔️Used REACT

  • REACT Hooks (useState, useEffect, useReducer)

Review the code on github 💪

Ahmet Suhan Oka

Front-End Developer

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