Image for post
Image for post
Photo by Luca Bravo on Unsplash

I was just working on creating wrapper around plopjs to generate components for react eco-system.

If you’re interested to hear how to use it, head to the link below for Youtube tutorial.

YouTube: https://www.youtube.com/watch?v=BIPf6gkKsyw

React-plopjs on npmjs: https://www.npmjs.com/package/react-plopjs

Subscribe & Share will be 🏆.


Image for post
Image for post

I have dropped new video on YouTube about Flutter State management using Redux.

Please check it out and let me know your feedback.

If you like it pls consider to share it with all your development network.

YouTube

For more please comment your idea.

Check also more blogs:

https://coderreview.io/blog


Image for post
Image for post
Photo by israel palacio on Unsplash

As we know as Javascript developer or React Developer specifically, we rely on redux for state management,I know there are a lot of other options but redux still the most popular one between them.

And that makes developers go creative about creating more comfortable, esaiable and maintainable projects, one of them is redux-toolkit.

Redux-toolkit makes it easy to create store, configure it with middlewares and connect actions to reducers without a lot of typing and files everywhere.

Fact: The last project I was working on, has 70 reducers and same for api reducers

(Note: if you’re not familiar with redux…


Studying with coffee
Studying with coffee
Photo by Nick Morrison on Unsplash

Hey,

I’m so amused to tell you that the course

“Learn Deno: the complete guide” is live.

You could check it now on Udemy platform

The course for everyone Beginner or intermediate developers.

In this course you’ll learn Deno for zero to hero.

Check it right and don’t forget to share it will be appreciated.


Image for post
Image for post
Photo by SCREEN POST on Unsplash

First, what id Deno?

Deno is a simple, modern and secure runtime for JavaScript and TypeScript that uses V8 and is built in Rust.

Wait is that it?

Sure No.you’ll be impressed if you know that it created by the same author of Nodejs, Ryan Dahl.

The reason is that he had concerns about node module system beside another legacy API’s that might not change, also he wanted to have the same compatibility with server environment and more, even though eye on Security was most wanted and focused on.

You might have a look on his talk in 2018

At that time Deno…


Image for post
Image for post
Photo by Charisse Kenion on Unsplash

I will start first by asking, What is Storybook?

You knew that already then you could skip this upcoming part.

Storybook is an open source tool for developing UI components in isolation for React, Vue, and Angular. It makes building stunning UIs organized and efficient.

Installing Storybook for react apps:

`npx -p @storybook/cli sb init — type react`

This will check your app and start to install all required dependencies for your app, add stories dir and .storybook for config your storybook, also two scripts in package.json one for storybook in Development and another one for build storybook in Production.


Image for post
Image for post
Photo by Yan Ots on Unsplash

Youtube tutorial

react-styleguidist gives you ability to see your component in development before integrating it with your production build, also easy to share between your team that you’re working with, with interactive playground and hot reloading you’re developing will be easier than you think for any project.

Install

for create-react-app

npx create-react-app styleguidist-tutorial

Out dependencies

yarn add react-styleguidist babel-loader css-loader style-loader node-sass

We might be need something else. wait ….


Image for post
Image for post
Photo by Bundo Kim on Unsplash

The last month React team has been released new update in react bringing the new feature of hooks, if you’re looking for definition of hooks head to react website and check An intro to hooks out

If you’re like me doesn’t like to talk too much and taking directly to the best practises of using any of the new features in technology, let’s talk than.

I will explain in both javascript and typescript, maybe for javascript sometimes you just need to remove types from typescript file, and sure change file extension name to .js .

1.useState

useState is alternative for this.state


Create react native boilerplate with Typescript and Mobx

Image for post
Image for post

Head to github page to check this boilerplate for react native

Features:

  • React-native
  • Typescript
  • Mobx
  • React-navigation
  • Bebel-decorators
  • Locale
  • Testing: with jest and enzyme

Share, claps will be appreciated 🙂

Feel free to contact me if you have questions.

react native boilerplate


Image for post
Image for post

Hi,

We have talked about redux in previous article, check it out, where I have tried to explain the best way to write, understand redux.
if you don’t know redux, it’s state management for react, where it comes more handy to share your state among any component inside your application instead of passing it from parent to children and then ends up with this:

Mustafa Alroomi

Developer | coderreview.io

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