DEV Community

Bipon Biswas
Bipon Biswas

Posted on

Day 1 : React start for Beginner

Firstly install npm install create-react-app -g. So that you will be able to create or run the react application for any folder on you machine.
Image description

Create react project create-react-app react-starter run the command space and provide your application name. So this command creates the react application. And automatically set up the necessary development server babel and web pack. The development server helps us to execute react applications after compilation.

Webpack package help us to bundle the files. And babel package help us to compile the JavaScript files. From JSX file into regular plain JavaScript files.

So those compiled JavaScript files can be really execute on the browser.

After creating the react application you can use either of these commands like npm start, npm run build, npm test, npm run eject.
Image description

So make sure you're in the correct folder that react-starter. And run the command npm start

This will automatically compile and execute the react application in the default browser.

Open the project in any Editor. And in this folder you can see something called public src.

In the public folder you can see index.html. This will be the starting point of your react application. So it contains the typical html syntax. And it imports the icon and contains the basic meta tag.
Image description

We have tag called div tag with id=root. This div tag is the placeholder where the actual react output will be rendered at runtime.
Image description

And after that there is nothing much. Just closing of body and html.

And now coming the src folder. You have something called index.js which has statement called root.render which eventually invoke app. That means it renders the app component in the root element which ins already present in the index.html file.
Image description
So where is the definition of the app component? Go to app.js file in the src folder. There you can see something called App. And is has a div tag that renders all the relevant output that we have seen in the browser.

Image description

Nested Components (App.js)

import './App.css';
import React, { Component } from 'react';
import { Button } from 'react-bootstrap'
import NavBar from './NavBar';
import MainContent from './MainContent';

export class App extends Component {
  render(){
    return (
      <div className="App">
        <React.Fragment>
          <NavBar/>
          <MainContent />
        </React.Fragment>
      </div>
    );
  }

}

export default App;
Enter fullscreen mode Exit fullscreen mode

State

State is is the property that contains the content of your component, which you want to render on the page, or it may contain the information that you want to read from the user as well.

Let me add a property called state.
MainContent.jsx

import { Component } from "react";

export default class MainContent extends Component{
    state = {}
    render(){
        return(
            <div>Main Content</div>
        )
    }
}
Enter fullscreen mode Exit fullscreen mode

state = {} this is the object literal in JavaScript, which can contain properties and property values can be of any type. Added a property into state.

state = {
        appTitle: "Customers"
    }
Enter fullscreen mode Exit fullscreen mode

How do you render the value of the property from state. Open the braces and close the braces. That means your access in the state property of the current working class.
Example

render(){
        return(
            <div>
                <h3>{this.state.appTitle}</h3>
            </div>
        )
    }
Enter fullscreen mode Exit fullscreen mode

Here the this keyword represents the current working object of the current class.
Now title is showing dynamically by using expressions.
Image description

Handle Event

In order to render the same, I just write the span tag. So inside this span tag, I would like to render the value of customers control and dynamically by using react expression

 state = {
        pageTitle: "Customers",
        customerCount: 5
    }
Enter fullscreen mode Exit fullscreen mode
render(){
        return(
            <div>
                <h3 className="border-bottom m-1 p-1">{this.state.pageTitle} <span className="badge bg-secondary">{this.state.customerCount}</span></h3>

            </div>
        )
    }
Enter fullscreen mode Exit fullscreen mode

Output
Image description
So every time when you modify the value of this property automatically, the same gets reflected in this place where the render the particular component property.

In JavaScript, we have events such as click, double click, focus, blur, key press etc. You can handle almost all types of events by using react.

You cannot call the methods of another component inside this present component. For example, let me add a button inside the h4 component

When the user clicks on this particular refresh button, I would like to call a method.

import { Component } from "react";

export default class MainContent extends Component{
    state = {
        pageTitle: "Customers",
        customerCount: 5
    }

    render(){
        return(
            <div>
                <h4 className="border-bottom m-1 p-1">{this.state.pageTitle} 
                    <span className="badge bg-secondary m-2">{this.state.customerCount}</span>
                    <button className="btn btn-info" onClick={this.onRefreshClick}>Refresh</button>
                </h4>
            </div>
        )
    }
// executes when the user clicks on Refresh button
    onRefreshClick(){
        console.log("Refresh Click")
    }
}
Enter fullscreen mode Exit fullscreen mode

Here I can call any method that is present within the same component.

So as you can see, when you click on the button, you can see a refresh quickly in the browser console.

Image description

Update Component State

In order to update the state of the page, we have to use setState method but should not overwrite the values of the state property directly. Initial state value:

 state = {
        pageTitle: "Customers",
        customerCount: 5
    }
Enter fullscreen mode Exit fullscreen mode
onRefreshClick(){
        console.log("Refresh Click")
        this.setState()
    }
Enter fullscreen mode Exit fullscreen mode

In this case, it is a very different matter. It is pre-defined method setState(). And you can supply only the property values which want to really update.

onRefreshClick(){
        console.log("Refresh Click")
        this.setState({
            customerCount: 8
        })
    }
Enter fullscreen mode Exit fullscreen mode

When click the Refresh button, it is showing an error, saying cannot read property called state of undefined.
Image description
The reason behind it in JavaScript by default, that this keyword context will be changed when it is indirectly called.

Something few change like that arrow function.

  onRefreshClick = () => {
        console.log("Refresh Click")
        this.setState({
            customerCount: 8
        })
    }
Enter fullscreen mode Exit fullscreen mode

Output
Image description

Render list

How do you show this particular array data.

state = {
        pageTitle: "Customers",
        customerCount: 5,
        customers: [
            {id: 1, name: "Bipon Biswas", phone: "123-456"},
            {id: 2, name: "Mead Fahim", phone: "345-456"},
            {id: 3, name: "Mahfuzur Rahman", phone: "986-456"},
            {id: 4, name: "Nayem Ahmed", phone: "432-456"},
            {id: 5, name: "Sajib Biswas", phone: "762-456"},
        ]
    }
Enter fullscreen mode Exit fullscreen mode

The map method of JavaScript, every resource and arrow function and execute that arrow function for each element inside the area.

<table className="table">
                        <thead>
                            <tr>
                            <th scope="col">#</th>
                            <th scope="col">Customer Name</th>
                            <th scope="col">Phone</th>
                            </tr>
                        </thead>
                        <tbody>
                        {this.state.customers.map((c) => {
                            return(
                                <tr key={c.id}>
                                    <td>{c.id}</td>
                                    <td>{c.name}</td>
                                    <td>{c.phone}</td>
                                </tr>
                            )
                        })}

                        </tbody>
                </table>
Enter fullscreen mode Exit fullscreen mode

Output
Image description

Conditionally Rendering

{this.state.customers.map((c) => {
                            return(
                                <tr key={c.id}>
                                    <td>{c.id}</td>
                                    <td>{c.name}</td>
                                    <td>{c.phone == null ? "No phone": c.phone}</td>
                                </tr>
                            )
                        })}
Enter fullscreen mode Exit fullscreen mode
{this.state.customers.map((c) => {
                            return(
                                <tr key={c.id}>
                                    <td>{c.id}</td>
                                    <td>{c.name}</td>
                                    <td>{c.phone == null ? <div className="bg-warning p-2">No phone</div>: c.phone}</td>
                                </tr>
                            )
                        })}
Enter fullscreen mode Exit fullscreen mode

Image description
Another way

{this.state.customers.map((c) => {
                            return(
                                <tr key={c.id}>
                                    <td>{c.id}</td>
                                    <td>{c.name}</td>
                                    <td>{c.phone ? (c.phone) : (<div className="bg-warning p-2 text-center">No phone</div>)}</td>
                                </tr>
                            )
                        })}
Enter fullscreen mode Exit fullscreen mode

Render Method

<table className="table">
                        <thead>
                            <tr>
                            <th scope="col">#</th>
                            <th scope="col">Customer Name</th>
                            <th scope="col">Phone</th>
                            </tr>
                        </thead>
                        <tbody>
                        {this.state.customers.map((c) => {
                            return(
                                <tr key={c.id}>
                                    <td>{c.id}</td>
                                    <td>{c.name}</td>
                                    <td>{this.getPhoneToRender(c.phone)}</td>
                                </tr>
                            )
                        })}

                        </tbody>
                </table>
Enter fullscreen mode Exit fullscreen mode
    getPhoneToRender(phone){
        if(phone){
            return phone
        }
        else{
            return <div className="bg-warning p-2 text-center">No phone</div>
        }
    }
Enter fullscreen mode Exit fullscreen mode

Discussion (7)

Collapse
paratron profile image
Christian Engel • Edited on

Two notes:

You should not install create-react-app globally. That was the advice a couple of years ago. The problem is: you need to keep it updated manually and it wastes space on your computer.

Nowadays its the better idea to run it directly through npx:

npx create-react-app my-app-name

And the second note:

Especially as a beginner, you should not apply a class based approach in your react development.

Again, this was best practice a couple of years ago but not anymore.

A beginner should focus on functional components nowadays - class components might even get removed at some point.

Collapse
bipon68 profile image
Bipon Biswas Author

Thank you so much for your tips.

Collapse
offline profile image
Offline

The use of classes and state like this is oldschool React, please use an up-to-date tutorial and make use of the available hooks

Collapse
tarevcio profile image
Tare-Vcio

I love it!

Collapse
bipon68 profile image
Bipon Biswas Author

Thank you. @tarevcio

Collapse
tiadev7474 profile image
TiaDev7474

Very clear for us as beginner. Thank you

Collapse
bipon68 profile image
Bipon Biswas Author

Thank you so much.