Practical ReactJS Fundamentals for Beginners

Hello, there this is Admec admin here in this article we are going to look at some practical ReactJS fundamentals necessary to know for a beginner. Note you should be familiar with JavaScript or you’ll have a tough time with ReactJS. Let’s get started then 

What is ReactJS?

In ReactJS, we write XML-like code for elements and components. Keep in mind it’s a library not a framework and it really goes well with other libraries. It’s only used for designing User interface meaning it’s not responsible for routing, database or anything.

Why you should learn ReactJS?

• The main reason is the hands behind ReactJS which is Facebook
• Very popular and lots of job aspects
• Has more than 100k starts in GitHub
• Lots N lots of help available 
• Component Based Architecture
• Reusability
• Easily integrated to any application

Let’s get to our main topic now.

ReactJS Fundamentals

ReactJS is Component-Based

Components are just lines of reusable code which are independent. They represent part of the User Interface. Components can be nested meaning a component can contain other components. Like an App, the Component contains all other components. These components are defined in a JavaScript file with an extension of .js or .jsx. You can use any extension you like ReactJS doesn’t have any problem with this as it’s a JavaScript library

In ReactJS we define a component in two ways either as a class or a function. For ReactJS they are both the same and just have different features. Both types of components accept props or properties; these arguments contain data and return an element.

Class Component

They are just ES6 classes that extend to component class in the ReactJS library. They always contain render methods that return the HTML.

class WelcomeClass extends Component {

    render() {
        return <h1> Hello {this.props.name} </h1>
    }
}

Note: it’s highly recommended to start a class name with a capital letter.

Functional Component

They are just the same old JavaScript functions that describe the UI

function WelcomeClass(props){
    return <h1> Hello {props.name} </h1>
}

You might be wondering what are those props well I assure you we’ll discuss that but first let’s take a look at JSX

JSX

JavaScript XML is a syntax extension to JavaScript. In ReactJS, we use it to write XML-like code for elements and components. Why you should use JSX?

• You can write JavaScript code directly just by using two curly braces.
• It can be used inside conditions and loops.
• It has tag names, attributes, and children.
• It represents objects.

In short, JSX makes writing code in ReactJS a lot easier and understandable. Let’s look at an example 

With JSX

const myelement = <h1> I Love JSX! </h1>;
ReactDOM.render(myelement,document.getElementById('root'));

Without JSX

const myelement = React.createElement('h1',{},'I am not using JSX');
ReactDOM.render(myelement,document.getElementById('root'));

Component Reusability and Props

A prop is a property that is passed as an argument to another component which then can be used by a child component but remains immutable meaning the child cannot change it. 

In the functional component, we use props as { props.property } whereas in the class component we use props as { this.props.property }. Here is an example

import React, { Component } from 'react'
import Child from './Child'

export default class Parent extends Component {
    render() {
        return (
            <div>
                <Child institute="ADMEC Multimedia Institute" />
            </div>
        )
    }
}

Note: The parent passes the property institute to the child component.  Since child tag can also be written as <Child />

import React from 'react'

export default function Child(props) {

    return (
        <div>
            <h1>{props.institute}</h1>
        </div>
    )
}

Note: The parameter props can be named anything but for sake of clarity, we use props. In Child.js prop will be accessed by the same name as given in parent as an attribute.

This will output the following code.

Note: Child.js is not rendering the information it’s being called inside the parent and the parent is feeding the information to it.Child.js is only returning an H1 tag with the prop.

Now remember earlier I said these components are reusable and can be called n number of times and every time although it’s being repeated but will always be independent of the same. Like the given example.  

import React, { Component } from 'react'
import Child from './Child'

export default class Parent extends Component {
    render() {
        return (
            <div>
                <Child institute="ADMEC Multimedia Institute" />
                <Child institute="CAD Training Institute" />
                <Child institute="Graphic Design Institute" />
                <Child institute="Post Production Institute" />
                <Child institute="Video Editing Institute" />
                <Child institute="Web Development Institute" />
            </div>
        )
    }
}

import React from 'react'

export default function Child(props) {

    return (
        <div>
            <h1>{props.institute}</h1>
        </div>
    )
}

Note: Child.js has not changed only its being repeatedly called by parents with different props. Now if we check the browser.

Event Handler

Events in ReactJS are named using camel Case and we pass the function as an event handler within the curly braces without parentheses.

import React from 'react'

export default function Child() {

    function ClickMe (){
        console.log('ADMEC Mutimedia Institute');
    }

    return (
        <div>
            <button onClick={ClickMe}>Click Button</button>
        </div>
    )
}

Note: This is for functional components but the same can be with class components but while passing the handler this keyword is used.

When we click on button and console it

State

A state is an object managed within the component and this state is managed by the component, therefore, it can change the state, unlike props. In the class component state is accessed with this keyword whereas in the functional component it is referred to as a hook and is accessed with useState Hook.

In class component state is defined in the class constructor you can initially store a value and that value can be later changed with the setState method.

import React, { Component } from 'react'

export default class ExplainState extends Component {
    constructor(props) {
        super(props)
        this.state = {
            institute: 'ADMEC Multimedia Institute'
        }
    }
    
    render() {
        return (
            <div>
                <h1>{this.state.institute}</h1>
            </div>
        )
    }
}

Note: Strikethrough in super keyword is just a bug it’s not deprecated. Now let’s try and change that value after the component has rendered.

import React, { Component } from 'react'

export default class ExplainState extends Component {
    constructor(props) {
        super(props)
        this.state = {
            institute: 'ADMEC Multimedia Institute'
        }
    }
    changevalue = () => {
        this.setState({
            institute: 'Web Design Institute',
        })
    }
    render() {
        return (
            <div>
                <h1>{this.state.institute}</h1>
                <button onClick={this.changevalue}>Click Me</button>
            </div>
        )
    }
}

Now when the button is clicked the state of the institute is changed and ReactJS re-renders it.

So, these are some basic fundamentals of Reactjs you should know.

Interested in learning ReactJS

If you really are interested in ReactJS you should check out our various React JS courses on the same.

• React Standard Course
• React Premium Course
• React Master Course

Get help from our experts to choose an ideal course for you. Contact us today and schedule your free demo session for discussion.