---
###### tags: `Note` `react.js` `react` `javascript` `js` `web`
---

# React.js

refence: https://www.sololearn.com/

react.js is one of the javascript library for front end web applications.

**advantage:**

* Speed
* Ease of us
* support

## add react.js to web

first, we need to add react library as two script tags to the head tag of our HTML document.

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>

<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script> 

next, we need to add another script, enable use of JSX.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script> 

now, we can start building our react web application.

<div id="container"></div>

<script type="text/babel">
    ReactDOM.render(
        <h1>Hello World!!<?h1>,
        document.getElementById('container')
    );
</script>

## create react application

a handy tool named create-react-app can help us to setup a react project with a simple command.
(make sure you have the recent version of Node on your machine)

npx create-react-app my-app
cd my-app
npm start 

## JSX

In the above example, there is a element like html element in javesript.
we call that JSX, and it is a syntax extension to JavaScript. It allows us to build UI elements right in the JavaScript code.

example:

var count = 0;
function show() {
    ++count;
    let element = <span>{count}</span>;
    ReactDOM.render(element,document.getElementById('container'));
}

## Component

### Functional Component

function Hello() {
    return <h1>Hello World!!</h1>;
}

ReactDOM.render(<Hello/>,document.getElementById('container'));

### Class Component

class Hello extends React.Component {
    render() {
        return <h1>Hello World!!</h1>;
    }
}

ReactDOM.render(<Hello/>,document.getElementById('container'));

### props

props is a parameter for functional componebt, and the data is passed from the tag attribute.

function Hello(props) {
    return <h1>Hello, {props.name}!!</h1>;
}

var element = <Hello name="react"/>
ReactDOM.render(element,document.getElementById('container'));

### Components in the Component

function App() {
    return <div>
        <Hello name="Alice"/>
        <Hello name="Bob"/>
        </div>;
}

ReactDOM.render(<App/>,document.getElementById('container'));

### props in class component

class Hello extends React.Component {
    render() {
        return <h1>Hello, {this.props.name}!!<h1>;
    }
}

ReactDOM.render(<Hello name="React"/>,document.getElementById('container'));

### State

State is an object that is added as a property in class components.

class App extends React.Component {
    state = {
        name: 'React'
    }
    changeState(newName) {
        this.setState({name: newName});
    }
    render() {
        return <h1>Hello, {this.state.name}!!</h1>;
    }
}

### Hooks

function App() {
    const [count,setCount] = 0;
    
    function addCount() {
        setCount(count+1);
    }
    
    return <div>
        <h1>Count: {count}</h1>;
        <button onClick="addCount">increment</button>
        </div>;
}

### Liftcycle Method

**for class component**

* componentDidMount: when the element be created
* componentDidUpdate: when the element be updated
* componentWillUnmount: before the element be removed

**for functional component**

useEffect() combines the componentDidMount and componentDidUpdate, and componentWillUnmount methods into one.

function App() {
    const [count,setCount] = useState(0);
    
    //when count update, the function will be called
    useEffect(() => {
        //componentDidMount and componentDidUpdate
        retunr () => {
            //componetWillUnmount
        }
    },[count]);
    
    return <h1>Count: {count}</h1>;
}

### Render a list

class List extends React.Component {
    var arr = this.props.data.map((item,index) => <li key={index}>{item}</li>);
    render() {
        return <ul>{list}</ul>;
    }
}

const myList = [ 1,2,3 ];
ReactDOM.render(<List data={myList}/>,document.getElementById('container'));

### example -- To Do List

<!doctype html>
<html>
    <head>
        <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    </head>
    <body>
        <div id = "container"></div>
        <script type="text/babel">
            class Form extends React.Component {

                handleSubmit = (e) => {
                    this.props.insertFunction(e.target.firstChild.value);
                    e.target.firstChild.value = "";
                    e.preventDefault();
                }

                render() {
                    return <form onSubmit={this.handleSubmit}>
                    <input type="text"/>
                    <input type="submit" value="submit"/>
                    </form>;
                }
            }
            class List extends React.Component {
                render() {
                    const list_item = this.props.data.map((item,index)=><Item index={index} item={item}/>);
                    return <ul>{list_item}</ul>;
                }
            }
            class Item extends React.Component {
                handleClick = (e) => {
                    e.target.parentNode.remove();
                }
                render() {
                    return <li key={this.props.index}>
                    <span>{this.props.item}</span>
                    <button onClick={this.handleClick}>X</button>
                    </li>;
                }
            }
            class App extends React.Component {
                state = {arr: new Array()};

                insert = (item) => {
                    this.setState({arr:[...this.state.arr,item]});
                }

                render() {
                    return <div>
                    <h1>To Do List</h1>
                    <Form insertFunction={this.insert}/>
                    <List data={this.state.arr}/>
                    </div>;
                }
            }
            ReactDOM.render(<App/>,document.getElementById('container'));
        </script>
    </body>
</html>