React basic in a post.
Tags: react, tutorial
Published: 2020-02-11 07:58:44

# React is awesome library for building something great

-> ***This article is personal knowledge so if something wrong, you can comment my post, it's going to help me a lot.***

### What is jsx ?
```javascript
const element = <h1>Hello, world!</h1>;
```
It's include of javascript and JSX is going to change you mind about template of language. JSX is rendering html base javascript logic inside.

## Why is JSX ?

React embraces events logic in UI like how events are handles, how state changes or how data processes before display, etc...

Instead of artificially separating UI and logic to different file. So React is going to close both this part to a file. It is going to help code clearly and maintenance easily. ([SoC](https://en.wikipedia.org/wiki/Separation_of_concerns) to find out)

## Rendering Elements

In template React when you create new some component, tag ```<div id="root"></div>``` in index.html file in public folder. This is DOM node and every element React will be rendering inside this div tag.

> Applications built with just React usually have a single root DOM node

```javascript
ReactDOM.render(<SampleComponent />, document.getElementById("sampleElement"))
```

public/index.html
```html
<!-- .... -->
<body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
</body>
<!-- .... -->
```
src/index.js
```javascript
ReactDOM.render(<App />, document.getElementById("root"));
```

## Components and Props

Components is "let you split the UI into independent, reusable pieces, and think about each piece in isolation." - reactjs.org. 
> Component is return a React element.

Props is a object data argument, readonly and component accepts a single "props" inside.

> Props is object, readonly and one props in one component

Example :

```javascript
function App() {
  return (
    <div className="App">
      <Avatar name="Ha Tuan" source="https://picsum.photos/400" />
    </div>
  );
}

function Avatar(props) {
  return (
    <div>
      <img src={props.source} />
      <p>{props.name}</p>
    </div>
  );
}
```

## State and Lifecycle

Basically, State is object property in class React.Component like object in Class javascript. You can change value or delete key object in state anyway.

```javascript
class Counter extends Component {
  state = {
    counter: 0
  };

  handleIncrement = () => this.setState({ counter: this.state.counter + 1 });
  handleDecrement = () => this.setState({ counter: this.state.counter - 1 });

  render() {
    return (
      <div>
        <button onClick={this.handleIncrement}>+</button>
        <span>{this.state.counter}</span>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    );
  }
}
```

Lifecycle you can find out in [programmingwithmosh.com](https://programmingwithmosh.com/javascript/react-lifecycle-methods/) for more information.

> State and LifeCycle is very important in React Component.

## Handling Events

"Handling events with React elements is very similar to handling events on DOM elements. There are some syntactic differences:

- React events are named using camelCase, rather than lowercase.
- With JSX you pass a function as the event handler, rather than a string."

reactjs.org

Example someway for handle events in React element :

- Using arrow function

```javascript
class Alert extends Component {
  handleOnClick = () => {
    alert("Method is called");
  };

  render() {
    return (
      <div>
        <button onClick={this.handleOnClick}>Click me for show alert !</button>
      </div>
    );
  }
}
```

- Binding events in constructor

```javascript
class Alert extends Component {
  constructor(props) {
    super(props);
    this.handleOnClick = this.handleOnClick.bind(this);
  }

  handleOnClick() {
    alert("Method is called");
  }

  render() {
    return (
      <div>
        <button onClick={this.handleOnClick}>Click me for show alert !</button>
      </div>
    );
  }
}
```

- Using handle events in function Component

```javascript
function Alert() {
  function handleOnClick(e) {
    alert("Alert is called");
  }
  return (
    <div>
      <button onClick={handleOnClick}>Click me for show alert !</button>
    </div>
  );
}
```

## Conditional Rendering

- Using if else inline or original.

```javascript
function LogoutButton(props) {
  return <button onClick={props.OnClick}>Log out</button>;
}

function LoginButton(props) {
  return <button onClick={props.OnClick}>Log in</button>;
}

class Authenticate extends Component {
  state = {
    isAuthenticate: false
  };

  handleOnLogout = () => this.setState({ isAuthenticate: false });
  handleOnLogin = () => this.setState({ isAuthenticate: true });
  render() {
    const element = this.state.isAuthenticate ? (
      <LogoutButton OnClick={this.handleOnLogout} />
    ) : (
      <LoginButton OnClick={this.handleOnLogin} />
    );
    return (
      <div>
        <h1>Page Authenticate</h1>
        {element}
      </div>
    );
  }
}
```

- Using Inline If with [ Logical && Operator ] or [ Logical || Operator ]

```javascript
class ShoppingCart extends Component {
  state = {
    items: 0
  };
  render() {
    return (
      <div>
        <h1>Shopping Cart</h1>
        {/* try both method */}
        {this.state.items <= 0 && <p>Nothing item in cart.</p>}
        {this.state.items <= 0 || <p>Nothing item in cart.</p>}
      </div>
    );
  }
}
```

## Lists and Keys

In React, it's usually use method map() or any method which you want. That's for rendering element in components. Do simple todo list for understand :

```javascript
import React, { Component } from "react";

class TodoList extends Component {
  state = {
    todos: [
      {
        id: 0,
        title: "Learing react"
      }
    ],
    title: ""
  };

  handleOnChange = e => {
    this.setState({
      title: e.target.value
    });
  };

  handleOnRemove = id => {
    this.setState({
      todos: this.state.todos.filter(todo => todo.id !== id)
    });
  };
  handleOnAddTodo = e => {
    e.preventDefault();
    const newTodo = {
      id: this.state.todos.length + 1,
      title: this.state.title
    };
    this.setState({
      todos: [newTodo, ...this.state.todos],
      title: ""
    });
  };
  render() {
    const todoList = this.state.todos.map((todo, index) => (
      // change key={todo.id} to key={index} you are going to see something wrong in this case
      <TodoItem onRemove={this.handleOnRemove} {...todo} key={todo.id} />
    ));
    return (
      <div>
        <form>
          <input
            value={this.state.title}
            onChange={this.handleOnChange}
            placeholder="add something"
          />
          <button onClick={this.handleOnAddTodo}>add</button>
        </form>
        <hr />
        {todoList}
      </div>
    );
  }
}

function TodoItem(props) {
  return <li onClick={e => props.onRemove(props.id)}>{props.title}</li>;
}

export default TodoList;
```

"Keys help React identify which items have changed, are added, or are removed. Keys should be given to the elements inside the array to give the elements a stable identity" - reactjs.org

Don't using indexes for keys if your array something change like delete object in array. Because this can be make issues with component state.

## Forms

"HTML form elements work a little bit differently from other DOM elements in React, because form elements naturally keep some internal state" - reactjs.org

Some control form in React

```javascript

<input type="text" name="Tittle" className="form-control" />
<textarea value="" name="Description" className="form-control" />
<select value="" onChange={this.someHandleOnChange} multiple={true}>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
```

But when you have a lot of control but type of data is the same. You can put all event onChange in a function like this for save your time and clean code :

```javascript
handleOnChange = (e) => {
  this.setState({[e.target.name] : e.target.value});
}
```

With type of data is file you can find out in my post [Upload file with multer in Nodejs](https://dev.to/hte305/upload-file-with-multer-in-nodejs-5chd).

## Summary

React is awesome library, you can try it if you see something interesting. Important in this library is manager state, because if we project is too large then state in application maybe is very disorderly. In this case I think we must be know Redux and apply to application. It's save our time. But it's library is not friendly for beginner or don't know Javascript. I recommend we should be know OOP in javascript. It's great for our time.

Thanks you for reading.
Have a nice day !