Reactjs – beginner’s tutorial – part 1

The original article was had “- how I wish someone explained it to me when I first started” in it’s name. I decided to go with something shorter, possibly more SEO friendly?

I am rewriting this article for the second time, trying to make things as straight forward and as minimalistic as I can.

Here it goes:

React is Component based. That means you build stuff with components that talk to each other , or don’t talk to each other and work individually as components.

Basic example:

import React, { Component } from "react";
export default class ComponentA extends Component {
  render() {
    return (
        <div> This is component A</div>
    )
  }
}

Let’s break things down:

Imports

import React, { Component } from "react";

This imports the React component class and it’s subclass Component from the library ‘react’. We need these two components to extend our classes to them so that react recognizes our classes as components. Basically we need them to be able to create custom components, which we need.

Install dependencies for this section:

You need to install the library react with:

 npm install react

or to include it in your package.json under dev dependencies like this:

"devDependencies": {
    "react": "^16.2.0"
    
  },

New Component

export default class ComponentA extends Component {

We are exporting the component ComponentA so that we can use it in other components. We are going to see how later.

The name of the component is ComponentA (you have to name any react component with a uppercase letter at the beginning of the name. That’s how you identify a JSX tag as a react component.

Our component extends the class Component that we previously imported. This creates our javascript class as a react component and we get to use all it’s features.

Outputting stuff in the Component

The render function is what we tell the component to output. Inside the render function there is supposed to be JSX code. Here are the rules:

  • Only one main parent that contains all of the component contents
  • you can include other components
  • the render function must return something (the JSX structure
  • you can use expressions {expressionExample} but they can only contain values , no functionality.
    • ex ({1+2} is ok
    • {if(1+2==3){var x = 1+2;} } – this is not ok
  • You can put functions inside expressions as long as they return 1 value

Working with data inside the component

The best way to work with data inside the component is by using something called state. Think of state as a variable that you put data in, and that updates your component JSX and refreshes(re-renaders) your component.

Why?

Because you want to update the component where the data is supposed to be updated, without updating the entire component. with state, you tell react to update only where the information has changed, and nowhere else. This is faster and more efficient.

How do you use State?

… the next part is a new post, coming soon..

Stay tuned (and write any comments regarding to what you want to know (if there’s anything you want to know) about state. I might include the good questions with thorough answers. I’m going to make the next parts if there will be engagement and someone finds this post and the way it was written useful. So, comment. Leave at least 1 comment saying you’re ready for part 2 and I will make part 2, and so on…

It’s been a while

It really has been a while since I last wrote anything here. I’ve been busy lately and I wanted to give a quick update on what’s been going on.

I moved on from WordPress about a year ago, but oficially, only about 2 weeks ago when I gave the rights to one of my most popular plugins to someone else. Now, what about AngularJs and everything else I’ve been doing? I moved on to react more than a year ago, and stuck with it. I really really like it now, would not go back for anything.

I plan on creating tutorials in react and related things here, going forward.

This was just a short update of what is to come. Very short, not complete though, I have other plans but for the moment I would keep these a secret. stay tuned.

April Update

*** What ?

I said I would be updating here with progress on things. as You’ve probably seen in later posts, I studied angular, angular 2 and react.I gave feedback on that, but, to recap and sum it up, angular was a in-house library made by google for google. Somebody at one point came with the idea that they should release it to the public and make it open source. All the nerds had an orgasm when that happened, saw it as the greatest thing since sliced bread and adopted it blindly. A different batch of nerds had orgasms when Facebook released their in-house javascript library. But yeah, that happened too. What angular and react are can be defined as in-house libraries, created specifically , originally for their (google and Facebook’s) needs to the future products and services, to make things organized, standardized and simple. For them. That is all, nothing else. Now the IT world is trying to use the libraries for their needs. If the same approach and vision is applied, that will most likely work. If they are doing similar types of projects. Otherwise, it won’t work. Please prove me wrong.

Alright, that was the last rand about angular and react, from me. But this post is not about angular and react, it’s about my progress, so let’s get to that, shall we?

*** Seriously, what?

In short, I’m learning Swift and iOS development. I left all the web stuff behind. No longer want to see WordPress, javascript, php, CSS, LESS, Gulp, HTML, MYSQL. That’s behind me now. It’s like a old girlfriend that I had a long lasting relationship with and now just broke up. It’s Important and healthy to move on as fast as possible. Especially if the relationship was not going that well at the end, and after you broke up with her, you hear she really got on a weird/bad path. The girlfriend in this case is the Web Development. That will make sense in a few years.

*** SWIFT?

Yeah, swift. I understand how I can make useful apps that will actually be capable to solve real life problems if I build them for the iPhone. xCode is awesome, SWIFT is awesome, right now I’m still learning it and basic principles in it,, core data, MVC, about IBOutlets and IBActions, how classes work and are inherited, how everything ties together. The emulator is great, I get to test any app that I make for real on my iPhone SE and I’m going to soon opt in to register a developer account (a paying one) on the app store.

I have an app in mind, that I’m not going to talk about yet, that I want to make, launch, monetize and see how it goes.

*** Challenging myself

I made a self challenge to make at least 20 commits for 1 week on github, on my account (here https://github.com/turcuciprian ) while developing in swift. You can see I have done that and I’m still doing it right now. However. 20 is not enough, I think I’m going to do 100 / day minimum, very soon. The reasoning behind the quantity approach is that I am forced to work a lot, to make that many commits. 20 was doable and not that hard. I think 100 is going to take much more of my time, I will get to work a lot, learn a lot and accomplish a lot. Not sure when I will be starting the 100 / day min. But it will be in the next few days.

Obviously I won’t be a able to keep that up for too much time. But the challenge will be 100 commits / day minimum for 1 week. After I complete that challenge I’ll see what else I can challenge myself with. I’ll try to write about it here, just to keep a log of things. I’m tripling down on focus for the next period, focus and long and hard work. Nothing else, no distractions. So please, for the time being, leave me alone. See you in a while.

Paste Project – Angular vs jQuery

Angular 2

I’m new in angular 2. I made a project for about most of last year in Angular 1.5.x and started learning Angular 2 in the past month.
First I did the angular tour of heroes tutorial on the official site. Kind of got stuck on the services part. I wanted to understand everything and things where not making so much sense so I moved on to other prospect tutorials. A very good friend of mine gave me as a birthday present a uDemy course, about angular 2. So I started from the versy first lesson, and I made each step with the IDE open and trying everything in my right. I wanted to remember everything, try out and understand completely. That worked, but, it was slow as hell. In after completing a 10% part of a 35h course I started just listening to the courses for the next 10%. at 20% I only started to look for the parts that where crucial in my head and needed to know about, that I was about to use. What was left in my head was routing, http and dependency injection.

I loved routing, how it was done in Angular 2, just loved it. Everything was so simple, it made sense.HTTP, not so much and dependency injection I did not quite get.

jQuery

I’ve been working with jQuery for about 10 years. It’s been a love-hate relationship but more love, like 85% love, 15% hate. Hate in the first years when things did not work. It was usually (mostly) my fault when that happened. but in jQuery, like, I think most of everybody else that’s a 10+ year front end (or full stack) developer, I was and am, more in control of, more comfortable with.

The project

The project was simple. A webpage where you get to put something in a textbox on mobile and then have it on any other place (desktop mostly). A web based app that allows any user to share anything at any given time.

It took me 1.5 weeks to fail in doing it with angular 2 and about 3-5 hours to do it from scratch with jQuery, Bootstrap and both a goLang rest server and firebase database.

The result

At http://toolaxy.com/paste you can find the project. The html, css, js are hosted on github pages and the database is firebase. Basically it’s a fully functional web app that’s simple as hell, and that’s also free.

At one point things where too complicated in Angular 2 to make and a CRAZY idea struck my mind. Why not do it in jQuery, you’re much more comfortable with it, and it does not have to be a complex functionality. Well, originally I was looking to learn Angular 2 (that’s why I made it originally in angular), I was looking to learn golang. But in the end, all that I was left with was the realization that angular 2 was not the best choice for this project. And it made me question, what kind of project is angular 2 good for. Still don’t have the answer to that. Same problem in my head with React. At most, if I do have a reason for building something specifically like that, with string interpolation, data binding, directives, models, routes and other angular-like features, I would use vuejs. It seems to have everything, support and covers most of the things one might need. First, there must be a reason for using it.

Conclusion

jQuery is ranking better than angular and react and vuejs combined on google trends. But that’s not the reason.
jQuery is older and more documented online than anguar and react and vuejs combined (I’m talking stack overflow, forums, projects, etc). But that’s not the reason either.
jQuery is the fastest, easiest, most reliable way for me to get to a result in a web app compared to any other alternative, mostly because it was part of my life for the past 10 years of front end development. And that is the reason. I’m more knowledgeable in jQuery, I am more capable of getting the job done. Period.

Mobile to Desktop incognito Paste

There is no solution out there, for when I want to paste something from my mobile smart-phone to a computer that I don’t want to log into to have any sort of service at my disposal to do the sharing of text. I’m talking about when you want to share a link to a desktop pc from your phone, and you don’t want to go to facebook on the desktop pc, log in, add your highly secure password and hope for the best, all just to paste a link of a cat video. or the winning lottery tickets numbers, or whatever.

There is no service that helps you do that.

I recentlty was trying to print something at a print house and in order to do that I had a pdf in my google drive.

Of course, the most obvious way was to send that PDF to a email and communicate with other people and ask them to print that for you. Right. Well, the other people where a bit busy, I did not want them to have my email address, because I’m selfish in that way, and, well, the problem was actually that they did not have stuff set up to receive an email , and print it for their customers. Yeah, they suck like that. Yes, My country lives in a cave.

Basically the google drive link was huge so I could not write every single character of it in time until it closed the printhouse. Even though it was morning. But there was an idea that popped in my head. What if… I’m going to…. YES!!! shorten that url, and write that character by character.

That worked, and I did that for the next months (had something to do at the printhouse every month). Things tarted to get really boring and dumb really fast. There needs to be a better way. So …

I searched for sollutions online that can help me. Turns out, all of the results I found where apps, that you can install on your phone and you can sync your computer to. Awesome. Not what I was looking for. I need no login. at all. I’m going to a public print house. I just need a system that can help me receive a pasted text from my phone. That is all. This is 2017, come on technology.

The sollution

I don’t see anything in the horizon so I’m going to build it myself.

I am currently working on a app in Angular2 and GoLang that helps me solve my above problem. The result of this will be a MVP that will reside at http://toolaxy.com/paste . Still working on it. Will make a post about it when it’s finished. Until then.

Welcome to my site

This is my new website where I will keep updates of my progress of everything I do, here.

I must warn you, I do change really fast, you’ll see my past examples. I change to evolve, to test, to figure out from my own experience and go to the next level ASAP. I change to get things done. I change to test. I change because , right now, I can.

For a bit of backstory

I quit my dayjob about 3 weeks ago and am working full time for myself. No projects for clients so far. And I’m not trying to have projects from clients. I’m trying to build my own product and or service. But there’s nothing of that either. Yet. I do have some Ideas. I quit because I wanted to do my own stuff, to work on my own dreams, and not somebody else’s. I can’t say I was’t inspired by some books I read. In a cliche-ish way, one that was Steve Job’s biography and one that is Elon Musk’s biography. Combined, and after some processing time, I had a decision that I made a little over a year ago. Where I decided I was going to quit. But, because I didn’t have any resources gathered, I was going to stay for 6 more months.

I ended up staying for 1 year. But here I am now, one year later. With no project, no idea and no clear path to go on. Scary, right? the money is going to run out. Eventually. I’d better get to work. NOW!

Thing is, I don’t want that to be the motivator for my progress. I have a company now, named ToolAxy One. That’s formed from “tools” and “galaxy”. The name came out of the idea that I was going to make on it, a hand full of useful tools. One is there for 2 reasons:

1. To try to make the name unique, to show that it is the first one, the only one.
2. Because just ToolAxy was taken and is too simple for today’s company names.

So there’s the story behind that name.

What’s next?

I was originally a WordPress developer. I worked with and on WordPress for about 10 years now. It was time for a change a while back. But I refused to see that, I wanted to contribute more, to try, to give more, to bring value, to WordPress. I wanted. So I searched for new, more exciting, more capable Software Development oportunities. I studied and tried Swift 3 for iOS 10. You know, the programming language for iphone, iPad, OSX, iWatch? right. The market there is overblown, the competition is fierce and there are limitations created by apple for it’s ecosystem. I did not want to make a “me too” type of idea and most ideas… well.. there’s an app for that.

I gave some time to ReactJS. Don’t get me wrong. it’s great. Standalone, with nothing. It does it’s job well. But if you want to do 2 way data binding, you want to create routes, you want to create a full blown app quick. well, you will have to organize. There is no Quick. there’s just a lot of work, you need libraries like Redux that have a ton of components and dependencies for each and every feature. And if one component has an error or is incompatible because of it’s version to a modification/feature that is needed. The whole thing crashes and does not work. there needs to be a better organizing path.

Originally I learned and did a personal project in Angular 1.5.x but later, angular 2 came out of beta. It was weird, did not give it much thought. I am giving it thought now. and I am studying it, planning to make a new project on it. Won’t give details about that just yet, but I will as soon as I have something. All that I can say is that this project will need to be finished fast. And I will have a MVP as soon as possible (my target is by 1 April).

So what I can say for now, is , I’m going all in Angular 2. I’m also going all in to another programming language, but that is for later. Thank you for reading thus far.

I always want more, it’s never enough, there’s so much information outh there that you can’t really settle. Unless you want to be a plain waste of air. Then you should settle. So many people have. Just Fuck, eat, shit and sleep. If that’s what your life purpose to be, fine. You have that right. I don’t. I want more.

Stay tuned for more.