since it’s relese in 2012, typescript has become more and more popular among developers and most companies and teams use typescript since it’s statically typed and teams can work together with less problems by catching errors and preventing bugs before building or deploying the project.
It is possible to use typescript with react thanks to react-scripts, and create react app also supports typescript and it enables you to setup typescript with react quickly.
In this article you will learn the basics of using ts with react.
setup your react typescript project…
Navigation is one of the most important things when designing a website or app, without a proper and accessible navigation users might get confused while using your app.
when it comes to mobile UI design there are different solutions for navigation, but one the most popular mobile navigations is Bottom Navigation Menu which is used in many famous apps like Instagram.
I recently needed to have a bottom navigation in the mobile view of a responsive reactjs app that I was developing, while there were a lot of Bottom Navigation libraries for react native, I didn’t find any good libraries…
this article is also available in my website: https://www.hoseinh.com/how-to-create-a-npm-module/
In this post we will learn how to create our own node module step by step and publish them on npm so that everyone can use them, this will also be really useful if you have created a useful module for one of your projects and you want to be able to install and use it in any project.
first of all create a folder for your package and run…
original post in my blog: http://www.hoseinh.com/customizing-bootstrap-vue/
Vue js has been becoming more and more popular in the past few years, just like React js and Angular a lot of plugins and libraries have been released for vue including UI component libraries like vutify and bootstrap vue, etc, I usually choose the later due to it’s more flexibility and combustibility if you are familiar or used to bootstrap, bootstrap vue is a great option for you.
Bootstrap vue uses bootstrap 4’s css for styling so we have to install and import both bootstrap and bootstrap vue.
Bootstrap’s official docs…
When I was working on a react project that used react context API I noticed that whenever I update the context, all components in the top most parent (which was App.js) updated while I just wanted one of them update, because the other components didn’t use data from context and had their own state.
So the solution to this problem which might happen when you use both a global state management (whether react context, redux or flux etc) and separate react states for each component, we have to:
1- Move all components that we don’t want to re render on…
With react Router we can create web applications with multiple pages and sections and we can change them dynamically.
Attention to detail is the key to make any UI design look professional, one of the most important things in user experience design is using the right animations and transitions when user interacts with our product.
CSS transitions generally run smoother than js animations so in this tutorial we’ll learn how to animate react router route transitions using css and react transition group.
after installing react…
The front end development scene has changed a lot in recent years.
client side apps and websites just grow bigger and bigger and you may end up spending a lot of your precious time doing simple tasks like copying files and adding js and css files to your html files, can’t we make those tasks automatic?
using gulp and it’s many plugins we can make our lives easier, through this short tutorial we’ll see how to install and use gulp and do some common tasks step by step.
1-if you don’t have node js install it from here
Sometimes in our react apps we need some global variables, like user authentications, themes, shopping carts, etc. or maybe you need a state in a big tree of like a dozen of components. without a proper state management we’ll have to pass a state through lot’s of components in our component tree to reach the component we want.
In this tutorial I will compare and review two major state management solutions in react, React context and Redux.
front end developer - web designer