How to use mobx with Reactjs ( No more Redux PART – 1)

How to use mobx with Reactjs ( No more Redux PART – 1)

In this tutorial im gong to tell you how to use mobx instead of redux. As you already know, when we use Reactjs, we need to have to tool to manage global state. The most popular way is using redux. But redux is so complex and its really hard to understand. And also it is a waste of time. We can do the exact thing using mobx. It is easy and fast. So, lets get started.

As you already know, when we crate a react app using create-react-app  it won’t allow you to use decorators(@). So before we do anything else, we have to fix it. Since mobx is using decorators, we need to fix this first. The process is pretty much easy.  Follow me.

SETP 1

Make a new project using create-react-app. if you new to reactjs just use the below command to install it globally. create-react-app is a command line tool(boilerplate) which will help you to build react apps without wasting your time.

npm install -g create-react-app

Then we need to create a new app using below command.

create-react-app projectname

STEP 2

Now we need to eject this app  in order to use decorators. Use below command. Before that go inside to your new project and start it to check whether it is working fine or not.

npm run eject

STEP 3

Now install  babel plugin for decorators.

npm install --saveDev babel-plugin-transform-decorators-legacy

STEP 4

Open package.json, find the "babel" section and add 4 lines so it looks like this.

"babel": {
"plugins": [
"transform-decorators-legacy"
],
"presets": [
"react-app"
]
}

STEP 5

Now install mobx.

npm install --save mobx mobx-react

Now you are good to go with mobx.

During my next tutorial, i am going to make a counter application using mobx. Comment here if you are getting any issues. Cheers!!

I am Pasindu dineth peiris and im working as a software engineer. Im mainly working as a mobile application developer, but i love to work with python and other languages also. Im good with android, ios and also with cross platform frameworks like ionic 2, Nativescript, Fusetools. Using this website i am going to teach what i learn. KIT..

One Reply to “How to use mobx with Reactjs ( No more Redux PART – 1)”

Leave a Reply

Your email address will not be published. Required fields are marked *