starting with reactjs

It might be a good idea to learn these concepts from ES6 first.

Arrow functions
Classes


The recommended way to start developing a new ReactJS project is to use the npm module create-react-app

To install create-react-app
npm install -g create-react-app

To create a new project
create-react-app hello-world

cd hello-world

npm start

To start making changes, edit the src/App.js file.








create-react-app uses webpack, babel and ESLint under the hood. Need to check them out some day soon.

Old JavaScript story

When I first joined Livehelper, back in the days before JQuery, the first problem I was given was this, “Sometimes our scripts don't work. Can you find out why and fix it?”

Livehelper used JavaScript code to track visitors to websites. Our clients were website owners, and

would put our code on their sites, and the script would report back to the servers on how long the users were spending on each page. We also allowed the operators to pull the client into a chat.

I tried asking the customer relationship manager a few questions, such as when does it happen, and if he had any examples of sites where it didn't work, if it was possible that the problem was in the server end. But all he knew was that sometimes, it would work for all clients, but not for that one particular client who had a problem. And we didn't know why, and we had not been able to fix it.

Since I was new to Livehelper, I had to understand the code, and so I started going through it, and writing alerts and making sure that the code worked as expected.

I also started getting to know the team, and they became more comfortable with me. I could ask a few more open ended questions, and eventually, I learnt something that might be useful – whenever the script didn't work, the client website had a lot of JavaScipt on the page.

Earlier, while going through the code, I noticed that we had used global variables like w for width, l for length etc. This was necessary because we had to reduce the size of our scripts and reduce download times. I used a 56 kbps modem at that time.

But I also remembered what I learnt at my first job at Infoyug, that we do not use global variables like “i”. “i” can be used as a local variable inside a for loop, but if you want a global variable, you need it to be very long and descriptive, so that you do not override it by mistake.

And that is what I thought was happening here. The clients were trying to reduce their javascript sizes too, and must have been using the same variables that we were, and if our script was loaded first, it wouldn't work because our variables were being overwritten.

I spoke to the managers about what I thought the problem was, and we agreed to try changing our variables to lhW, lhC etc.

Once we made this change, the scripts started working properly on every site, and we never lost another customer due to our code not working.

How to cook mutton kurma

So, you start by going to the shop and actually buying some mutton. By the time you get home, you might be tired, and might not actually feel like cooking. So, as soon as you get home, you first put the mutton in the freezer. This is very important it you care about little things like your health.

While you're at the shop you should try to remember what all you don't have at home, so you can buy them right then, and not have to come back to the shop later. Let's see what you need - onions, tomatoes, cinnamon sticks, cloves, oil, ginger-garlic paste, green chillies, mint leaves, coriander leaves, meat masala, potatoes, carrots, peas, beans, turmeric powder, salt.

Never forget salt. Food tastes terrible without salt. Even if you have salt at home, buy some more. You never know when you'll need it. But then again, you have to put the right amount of salt. What you really need is to learn the tricks for getting your salt right. And you've come to the right place to learn!

Cooking needs patience. It needs time, and a relaxed mind.

So, when you are well rested, you take the mutton out of the freezer and defrost it. You'll have to put the microware on low power, and put the mutton inside for about 20 minutes.

While it is defrosting,  take out two onions, and dice them into small pieces. Put 2 table spoons of oil in a bowl, and heat the oil. When the oil is hot, you can see a bit of smoke coming from it. Put 4 cloves and a cinnamon stick in the oil. Leave for about a minute and add the onions. Fry and mix the onions till they are brown. Then add one spoon of ginger-garlic paste. Fry it till it smells good.

While the onions are frying, cut two chillies and add them. Also, cut a tomato into small pieces. Put in the tomato and fry some more.


Add while the tomatoes fry, cut two potatoes into medium sized pieces.

Put a spoon of salt into the bowl, and a quarter tea spoon of turmeric powder. Add a spoon of meat masala too. Mix and fry a little bit. Add the mutton, and fry that for two minutes.

Then add a glass of water, and let it heat.

By now, you've probably run out of the patience that you need so much.

Quickly cut up two carrots, and a bunch of beans into small pieces and add them in the bowl. Toss in a few peas too. If you have anything else from the ingredients list, toss them in as well. Add water till everything is covered.

Then cover the bowl and let it boil for 20 minutes.

Put on an alarm for 20 minutes later, and then go check facebook. Or watch TV. Or something.

When the alarm rings, run to the kitchen. Check if there is still water in the bowl. Heave a sigh of relief.

Now, if there is too little water, add some more, and heat it a bit longer. This time, stay right next to the stove.

Take a spoon, and taste the gravy. It should be a little bit salty to taste. If it isn't, add quarter spoon of salt, mix well, and taste again.

If too salty, add half a cup of water, and half a potato and let it boil a bit longer.

Repeat till you get the salt right.

Curse yourself for watching TV when you could have so easily cooked rice in that time.

Make some rice or chapatis.  Or just toast that bread which already is on the kitchen table.

Enjoy!