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…

Leave a Reply

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