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.