How To Build Something In React.

React is a JavaScript library created by Facebook to build user interfaces.

To create a react boilerplate use command bellow it uses hot reload so you don’t need to re refresh the page every time(installing node is necessary).

npx create-react-app foldername

To download all its dependency :

npm install
or
yarn install

So react is an independent module if we want to use it with the browser we need to install the ‘react-dom’ module.

npm install react-dom
or
yarn add react-dom

To start the server:

npm start
or
yarn start

Before you build something in react you have to think in react

In a react application we break it into different components it helps us to debug add new features and build faster.

So what is a component?

A component is a function which returns react elements. And there are two types of component one is function component another is class component. A class component is stateful by nature.

We can use state inside a function component using hooks if you want to use hooks then your react version should be at least ‘16.8 .0’ you can check it with your ‘package.json’ file.

if you check ‘index.html’ file inside the public directory there is a div element and have an id called ‘root’ what ‘react’ does is it puts all our elements inside it and manages it.

in the ‘index.js’ file we are going to import React, render function from “react-dom”

let’s create a counter app.

import React from 'react'
import { render } from 'react-dom'
class Index extends React.Component {
constructor(props) {
super(props)
this.state = { value: 0 }
}
render() {
return (
<>
{/* h1 tag where we are render value */}
<h1>{this.state.value}</h1>
{/* button for increment */}
<button
onClick={() => {
this.setState({ value: this.state.value + 1 })
}}
>
Increment
</button>
{/* button for decrement */}
<button
onClick={() => {
this.setState({ value: this.state.value - 1 })
}}
>
Decrement
</button>
{/* button for reset */}
<button
onClick={() => {
this.setState({ value: 0 })
}}
>
Reset
</button>
</>
) }}
render(<Index />, document.getElementById('root') )

We are creating a class component that has ‘this. state = { value: 0 }’ is an object inside it we have a key called value and have 0 as value. This is what the state is we can have multiple key-value pairs.

• To change the state we use ‘setState({})’ function which takes an object as a parameter inside that object we can pass the key and the value we are going to update.
• when the state changes the render function going to call again but instead of rendering every element react going to render the elements which are needed to change because instead of real dom react uses virtual dom.
• In render function, we pass our component as a first parameter and, the root element as a second parameter.
• A component can only return one element at a time if there are multiple components we can wrap inside react fragment ‘<> </>’.

In the above code, we use JSX(JavaScript XML) which is similar to HTML.

• we can only write expression inside JSX and it should be wrapped inside curly brackets.
• instead of class in ‘react,’ it is className

<p className="name">John Wick</p>

• Every JSX element must be closed.

Data goes downward and action goes upwards.

let's build counter again but this time our function and state is one component but out buttons and h1 tag are in a different component.

index.js

import React from 'react'
import { render } from 'react-dom'
import Counter from './counter'
class Index extends React.Component {
constructor(props) {
super(props)
this.state = { value: 0 }
}
handleIncrement = () => {
this.setState({ value: this.state.value + 1 })
}
handleDecrement = () => {
this.setState({ value: this.state.value - 1 })
}
handleReset = () => {
this.setState({ value: 0 })
}
render() {
return (
<Counter
value={this.state.value}
handleIncrement={this.handleIncrement}
handleDecrement={this.handleDecrement}
handleReset={this.handleReset}
/>
)
}
}
render(<Index />, document.getElementById('root'))

counter.js

import React from "react";
export default function Counter(props) {
return (
<>
<>
{/* h1 tag where we are render value */}
<h1>{props.value}</h1>
{/* button for increment */}
<button
onClick={props.handleIncrement}
>
Increment
</button>
{/* button for decrement */}
<button
onClick={props.handleDecrement}
>
Decrement
</button>
{/* button for reset */}
<button
onClick={props.handleReset}
>
Reset
</button>
</>
</>
)}

In the above code, our state and function are in the index.js file but the buttons and h1 tag are in counter.js file we are passing our state and function to it(data goes down) and when we click a button the function is called which present in the parent component(action goes up) and when state changes again its send value to the component and its re-render.

• ‘props’ is an object which passes down by its parent component.

There are multiple lifecycle methods but let's try one of them. ‘componentDidMount’

• we can use only in class component
• componentDidMount called after rendering finishes for the first time.

Ex.

import React from 'react'
import { render } from 'react-dom'
class Index extends React.Component {
constructor(props) {
super(props)
this.state = { value: 0 }
}
componentDidMount() {
 alert("This page is rendered")
}
render() {
return (
<>
 <h1>Hello React</h1>
</>
) }}
render(<Index />, document.getElementById('root') )

to deploy in production

npm build
or
yarn build

This will create a folder call build and place an optimized version of your app.

Thanks for reading any feedback are welcome.