---
title: React
tags: Web Directory, React, JavaScript
description: react Learning Notes
---
{%hackmd U6g0skbVTIyVdJhvWCgo2Q %}
<style>
#change-a:link, #change-a:visited{
text-decoration: none;
color: #00008B !important;
}
</style>
# <span class="big-title">React</span>
- [online react editor](https://codepen.io/pen)
- if it have `uncaughtError`, try import reat and reactDOM
```jsx=
// Add to the front
import React from "https://cdn.skypack.dev/react"
import ReactDOM from "https://cdn.skypack.dev/react-dom"
```
> then choose the alternative to get proper import source
- some of examples are self-writed, some of them come from W3C, React Document, and Fooish -> see [reference](#Reference)
## <span class="intext-title">Introduction</span>
- React is a tool for building UI components.
- React using ES6
- [what is ES6?](https://hackmd.io/@yzLin56789/ByBQ3Wdet/%2FmKeI3lVBQgqH730NKXwcXQ#ES6)
- ECMAScript 6 -> ECMAScript is used to standardize javascript
### <span class="intext-point">Purpose of React</span>
- React seperate development of web to **components**
- Not like structure, logic, style, react will put eles belongs to ame components together
## <span class="intext-title">Testing React on Website</span>
```htmlembedded=
<head>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
```
### <span class="intext-point">A Complete Example</span>
```jsx=
<!DOCTYPE html>
<html lang="zh-TW">
<head>
<title>Static resource and Testing React</title>
<meta charset="utf-8" />
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<script type="text/babel">
class Student extends React.Component{
constructor(props){
super(props);
this.state = {
id: Math.floor(Math.random() * 100),
show: (Math.random() > 0.5) ? true : false
};
}
render(){
return this.state.show ? (
<React.Fragment>
<h1>Hello, My name is {this.props.name}</h1>
<p>My ID is {this.state.id}</p>
</React.Fragment>
) : (
<h1>QQ... You are unlucky, BOYYYYYYY.</h1>
)
}
}
ReactDOM.render(<Student name="Thomas" />, document.getElementById("root"));
</script>
<div id="root">
<!--space for react-->
</div>
</body>
</html>
```
## <span class="intext-title">Create React Application</span>
```bash=
npx create-react-app simplereactapp
```
- `npx` (node package executor) will execute the package and create a react application on target directory
```bash=
cd simplereactapp
```
> cd into it
```bash=
npm start
```
> use `npm start`, which start running the react app
### <span class="intext-point">Folder Structure & Architecture</span>
- [Reference](https://saurabhshah23.medium.com/react-js-architecture-features-folder-structure-design-pattern-70b7b9103f22)
- It includes introduction and analysis about folder structure and application architexture.
# <span class="big-title">React Render HTML</span>
- The goal of React is to render HTML on web page, the render will include:
- HTML code
- HTML writen in JSX or use `React.createElement()` method
- HTML element
```jsx=
const simpleelement = (
<h1>Hello React!</h1>
);
ReactDOM.render(simpleelement, document.getElementByID("root"));
```
## <span class="intext-title">React Element</span>
- Basic unit in React
- Render an element to DOM
```jsx=
const element = <h1>Hello, React!</h1>;
ReactDOM.render(element, document.getElementById("root"));
```
> usually, it is only necessary to call `ReactDOM.render()` once in program
> The `#root` HTML element will be set to represent this section is under the control of React
### <span class="intext-point">Building an Element</span>
- With `React.createElement()`
```javascript=
const element = React.createElement(
'h1',
{className: 'greeting'},
'Hello, World!'
);
```
- With `JSX`
```jsx=
const element = (
<h1 className="greeting">
Hello, World!
</h1>
);
```
# <span class="big-title">JSX</span>
- using HTML tags in JS file
- JSX is for creating element in React
- eles must be **closed** in React
- JSX will be compiled as normal JS expression by **Babel**
- it will call `React.createElement()`
```jsx=
// using JSX
const myelement = <h1>I Love JSX!</h1>;
ReactDOM.render(myelement, document.getElementById('root'));
// without JSX
const myelement = React.createElement('h1', {}, 'I do not use JSX!');
ReactDOM.render(myelement, document.getElementById('root'));
```
> it should be noticed that JSX representing **JavaScript expression**
> > statements like `if/else` are not allowed
- HTML code will only support <strong>ONE</strong> top levle element
- using `div` to include multiple element is a good practice
```jsx=
const anelement = (
<div>
<h1>This is first.</h1>
<h1>I am Second one.</h1>
</div>
);
```
## <span class="intext-title">Fragment</span>
- using JSX, we need to add a top-level tag
- it will cause unnecessary tag in code
- for example, dynamic existing list item will be affect since there is a top div tags on it
- After React16, `Fragment` was added up for dealing with this question
```jsx=
const element = (
<React.Fragment>
<td>One for data cell.</td>
<td>Second for data cell.</td>
</React.Fragment>
);
//or
const element = (
<>
<td>One for data cell.</td>
<td>Second for data cell.</td>
</>
)
```
## <span class="intext-title">Expressions</span>
- By using `{}`, JSX can write variable, JS expressions in it
```jsx=
let a = 10;
const conditionele = (
<h1>{ (a) > 10 ? "HI" : "NONO"}</h1>
);
```
> By using ternary expression, conditional expression can be written in JSX
> > Or Simply use conditional `if statement` outside
- It is also possible to write attr expression
```jsx=
const element = <a src={user.homepage}>See introduction</a>
```
## <span class="intext-title">JS camelCase on attr</span>
- JSX have allternative when facing Reserved word in JS
- Alternative
- `class` -> `className`
- `for` -> `htmlFor`
```jsx=
<h1 className="input-type">HAHA</h1>
```
- Set Attr with **spread operator** (rest operator)
```jsx=
var props = {};
props.foo = x;
props.bar = y;
var component = <Component {...props} />;
// set as default attr
var component2 = <Component {...props} foo="Hello" />
```
## <span class="intext-title">CSS inline</span>
```jsx=
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')'
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
function Hello2() {
return (
<div style={{color: "blue", backgroundImage: `url (${imgUrl})`}}>Hello</div>
);
}
```
- Notice that attribute name should also be **camelCase**
- `backgroud-image` -> `backgroundImage`
- `font-style` -> `fontStyle`
## <span class="intext-title">Directly set innerHTML</span>
- can directly operate innerHTML like normal -> `dangerouslySetInnerHTML`
```jsx=
// normal
function showContent() {
return <h1>{test}</h1>
}
function createMarkup() {
return {__html: 'First · Second'};
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
```
> Shoould take an object contained `__html` field
>> Since React will do HTML escape for JSX expression, this is dangerous for XSS
# <span class="big-title">React Component</span>
```
React Component is set to gain props and return correspoding element
```
> <span class="important">React component is aim to build reuseable component in web application. </span>
- Component can be defined as
- *function* component
- *class* component
```jsx=
// function component
function Welcome(props) {
return <h1>Hello, {this.props.name} !!</h1>;
}
// Class component
class Welcome extends React.Component {
// Necessary Method in React Component
render(){
return <h1>Hello, {this.props.name}</h1>;
}
}
```
- A `modulelized` thinking should be used to format your code
- it will be an extended spirit from seperating **reusable** component
- React use composition thinking, it's different with normal inheritant thinking.
- combine some reusable components to make new component on web page
- **State & Prop**
- Props are params which will be passed into a component via attrs
- State are params which **completely owned** by a component
- <span class="important">Single Directioin Data Flow</span>
- parent state -> child props
- it will ensure the renew on parent's state will effect child's props
- From above, we konw **any modify on props should be avoid (they are private state of the other -> mostly it will be owned by parents)**
## <span class="intext-title">Render Component</span>
- Method `render()` is necessary and only necessary in React Component
- component will judge `props` and `status`, the return corresponding content
- `render()` should be **pure**, it wont change anything about state, and have no direct interaction with browser.
- React element can be
1. normal tag: ```<div />;```
2. component: ```<Welcome name="Thomas" />```
- React will treat lowercase letter as original html tag
- As a Component, the **name** of it should be ==started with uppercase==
### <span class="intext-point">Example</span>
```jsx=
// started with uppercase
function Welcome(props){
return <h1>Hello, {this.props.name}. </h1>;
}
ReactDOM.render(<Welcome name="Thomas" />, document.getElementById("root"));
```
## <span class="intext-title">Mounting & Unmounting</span>
- a Component will be **mounted** once it be rendered to DOM
- Unmount usually controled by parent
```jsx=
// In parent
return {this.state.showTimer &&
<TimerShow showTimer={this.state.showTimer} timerID={this.state.timerID} />}
```
- if we render false in children, it will have no effect to unmount
## <span class="intext-title">Props</span>
- a `props` is a simple object which contains attributes and children of JSX
- it will be pass when we call a component with JSX such as
```jsx=
// render to DOM
ReactDOM.render(<Welcome name="Thomas" />, document.getElementById("root"));
// in Component, props can be accessed like
/*...*/ <h1>Hello, I am {this.props.name} </h1>
```
> for this example, props will contain name which be passed by **JSX -> Babel**
- in component, we pass props and get `return` React element
### <span class="intext-point">props.children</span>
- it can usually be used by container
```jsx=
// props.children will indicate those tags under it
function FancyBorder(props) {
return (
<div className={'FancyBorder FancyBorder-' + props.color}>
{props.children}
</div>
);
}
// A component with a self-defined container
function WelcomeDialog() {
return (
<FancyBorder color="blue">
<h1 className="Dialog-title">
Welcome
</h1>
<p className="Dialog-message">
Thank you for visiting our spacecraft!
</p>
</FancyBorder>
);
}
// render the component to DOM
ReactDOM.render(
<WelcomeDialog />,
document.getElementById('root')
);
```
### <span class="intext-point">ReadOnly about Props</span>
- Props should be **readonly**, things like modifying props should be avoid.
- On that way, React components work like pure function with props
## <span class="intext-title">State</span>
- state in component should store time-related data
- whether `state` or `props` changed, the component will be [renewed](https://zh-hant.reactjs.org/docs/react-component.html#updating)
> on example, it will happend not only the `Student` renewed, but also `Format` renewed (==Student.state -> Format.props==)
- initialization about state in constructor should be directly ==assign==
- in other methods, `setState()` should be called.
### <span class="intext-point">`setState()`</span>
```javascript=
setState(updater, [callback]);
// example
this.setState({
name: "Thomas"
})
```
> change of state will trigger renew
> > callback can be some function called after the setState complete -> when callback function is called, this will ensure the state change has been done
- This method is used to renew state in funcitons (except `constructor`)
- constructor should directly use `this.state`
- setState isn't confirm **immediately** renew
- state change will be lined up in queue -> for better preformance !
- means it's not proper to read/use state after setState
- For immediately renew state, use <span class="important">updater function</span>
```javascript=
this.setState((prevState) => {
return {quantity: prevState.quantity + 1};
});
this.setState((prevState, props)) => {
couter: prevState.counter + props.increment
});
```
### <span class="intext-point">A complete example about state</span>
```jsx=
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
/*React Components */
// TODO: A stateless component are presented
// ! which means to show single-direction data flow
// ! (up.state -> down.props)
/* It has no idea where the props come from.*/
function FormatIntro(props){
return <p>Hello, I am {props.sayHello}</p>
}
// TODO: A stateful component has local states.
// ! this state are completely private
// ! and should be modify via this.setState()
class Student extends React.Component {
constructor(props){
super(props);
// Component with state is stateful component
// Directly assign state in constructor
this.state = {
sayHello: "",
timerID: 0
};
/* data which has no relation about data flow can
* directly set in class*/
this.now = 0;
}
// this function will be called by timer
pick = () => {
if (this.now < this.props.name.length){
let string = this.state.sayHello + this.props.name.charAt(this.now++);
// use setState() will rerender component
this.setState({sayHello: string});
}
else{
this.now = 0;
this.setState({sayHello: ""});
}
}
// Mount & Unmount for component
componentDidMount(){
// set a timer when this component mounted to DOM
this.setState({ timerID: setInterval(() => this.pick(), 1000)});
}
componentWillUnmount(){
clearInterval(this.timerID);
}
render() {
return (
<div>
<h2>This is my introduction</h2>
<FormatIntro sayHello={this.state.sayHello} />
<p>now Timer ID is: {this.state.timerID}</p>
</div>
)
}
}
ReactDOM.render(<Student name="Thomas"/>, document.getElementById("root"));
```
## <span class="intext-title">[Life-Cycle Method](https://zh-hant.reactjs.org/docs/react-component.html#the-component-lifecycle)</span>
- Multiple life-cycle methods have been added to React Component, it will be called
- when Component **mouting** to DOM
- when Component get **renew**
- when Component **unmounted** from DOM
### <span class="intext-point">Common Methods</span>
- Mounting
1. constructor()
2. render()
3. componentDidMount()
- Renew
1. render()
2. componentDidUpdate()
- Unmounting
- componentWillUnmount()
### <span class="intext-point">constructor</span>
```jsx=
class Students extends React.Component {
constructor(props){
super(props);
this.state = {
//...
}
this.selfNewMethod = this.selfNewMethod.bind(this);
}
selfNewMethod(){
this.updateList();
}
}
```
> `super(props)` should be called before any initialization, or `this.props` will be undefined
> A `bind` is necessary for a function to become a method of class
> > with **arrow funciton**, we can bind function and declare it at the same time -> `Class Fields` + `arrow function`
- Mainly two usage
1. initialize `this.state`
2. bind for `event handler`
- see <a href="#related-to-constructor">React Event Handler</a>
- Avoid copy props to state
- Avoid use `setState` for initialzation
- Class Fields + Arrow Function
```jsx=
class Student extends React.Component {
selfNewMethod = () => {
this.updateList();
}
}
```
### <span class="intext-point">static getDerivedStateFromProps()</span>
- this function will be called before `render()`
- <span class="important">return value is an object of status</span>
- passed current props and state in
- situation: state are decided by props, it should be renewed when props changed
```jsx=
//example
static getDerivedStateFromProps(props, state) {
if (props.currentVal !== state.prevVal){
return ({
name: "NEW",
val: props.currentVal
})
}
return null;
}
```
### <span class="intext-point">componentDidMount</span>
- Good to build subscription
- `componentWillUnmount` should cancel those subscription
- for example, timer
- `setState()` can be called in this method, and have following effect:
- trigger another `render`
- two render will only renewed once on webbrowser
- it will still cause efficiency waste -> carefully use
### <span class="intext-point">componentDidUpdate</span>
- Method will be called after every renew
- Make comparison in this method
- Avoid causing infinity loop between renew
# <span class="big-title">React Event Handler</span>
<span class="hover-head important">Talk about React Binding<iframe src="https://drive.google.com/file/d/1D3VPReXTnX5jWpksS8YhMhM5hqcpns84/preview" class = "hover-child" width="640" height="480" controls></iframe></span>
- For keeping reading, make sure you understand binding event listener to event
- [reference MDN](https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)
- [reference -- fooish](https://www.fooish.com/javascript/this.html#functionprototypebind)
- Bind event listener to class
- Make it is a method of it
- this way, the listener can access **this** in class
- <a href="https://hackmd.io/wO7HlPz0Rq6eloUd8yclVQ?view#constructor" target="_self" id="related-to-constructor">see above</a>
```jsx=
class Student extends React.Component {
constructor(props){
super(props);
this.state = {
id: Math.floor(Math.random() * 100)
}
this.handleClickEvent = this.handleClickEvent.bind(this);
}
handleClickEvent(){
this.updateStudentCard();
}
render(){
return <h1 onClick={this.handleClickEvent}>Click Me To Change Color!!</h1>
}
}
```
## <span class="intext-title">Event Level</span>
- events like `onClick`, `onMouseEnter`
- they should be triggered at builtin element -> e.g. `div`, `p`...
- if pass on parent, ie pass to a self-defined React component, it will be treated like normoal attr and pass it to `props`
- we can use it to pass event handler and access it by `props` in child
```jsx=
<p style={this.state.pStyle} onClick={this.props.onClick}>
Use parent's handler via props.
</p>
```
> this can be related to Lifing State Up (it's invoke a callback function from parents)
## <span class="intext-title">Event & Listener in JSX</span>
```
we can simply add listened to event in JSX
```
- Events in JSX are **camelCase**
```jsx=
// Above has bind event listener to class (this)
<input type="button" value="Say HET" onClick={this.handleClickEvent} />
```
- in HTML
```htmlembedded=
<input type="button" value="Say HET" onclick="handleClickEvent()" />
```
### <span class="intext-point">Synthetic event and Native event</span>
- Synthetic Event is built by React to deal with event
- Native Event
- can be gained by using `event.nativeEvent`
### <span class="intext-point">Use Class Fields to Bind EventListener</span>
```jsx=
//...
handleClickEvent = () => {
this.updateStudentCard();
}
/*If need to invoke Synthetic event wrapper*/
handleClickEvent = (e) => {
e.preventDefault();
this.updateStudentCard();
}
```
> In this case, `preventDefault` will be used to prevent default operation made by browser like ==click anchor, it will go to href after indicated scripts end==.
### <span class="intext-point">Passing argument to eventlistener</span>
```jsx=
<input type="button" value="Say HEY" onClick={() => this.handleClickEvent()} />
// Following two cases will pass event param to listener
<input type="button" value="Say HEY" onClick={(e) => this.handleClickEvent(e)} />
<input type="button" value="Say HEY" onClick={this.handleClickEvent} />
// If we want to pass other params to listener
<input type="button" value="Say HEY"
onClick={(e, otherp) => this.handleClickEvent(e. otherp)} />
```
# <span class="big-title" id="change-a">[Lifting State Up](https://www.fooish.com/reactjs/lifting-state-up.html)</span>
<figure style="width: 50%; float: right; margin: 10px;">
<figcaption style="text-align: center; color: aqua;">Graph about work of Lifiting State Up in <a href="https://www.fooish.com/reactjs/lifting-state-up.html">fooish</a></figcaption>
<img src="https://i.imgur.com/FMrFjoD.jpg" />
</figure>
- it's a technique with the use of **callback function**
- formorly mentioned as Event Level
- for commonly state (children are control by same/similar state)
- uplift it as a parent state
- drop down a parent's callback function to children
<div style="clear:both;"></div>
```jsx=
// in render
<TemperatureInput
scale="c"
temperature={celsius}
onTemperatureChange={this.handleCelsiusChange} />
<TemperatureInput
scale="f"
temperature={fahrenheit}
onTemperatureChange={this.handleFahrenheitChange} />
```
> `TemperatureInput`s are component that accept different input from user
> `this.handleFahrenheitChange`s are callback functions which passed to children to get and process input data
# <span class="big-title">Other Rendering</span>
- Conditional Rendering
- Portal Rendering
## <span class="intext-title">React Conditional Rendering</span>
- There are following ways to implement conditional rendering
1. JavaScript
- if/else
- ternary Operator `? :`
2. JSX
- `&&`
- ternary Operator `? :`
```
mind JSX is expressions, so if statement isnt usable in it.
```
3. Render Nothing
- return `null` or `false`
### <span class="intext-point">Combinational Example</span>
```jsx=
function ComponentFoo(props){
if (props.goShow) {
return (
<React.Fragment>
<h1>Following show conditional rendering</h1>
{props.whichShow ? (
props.isShow && <p>Hello, I am cool</p>
) : (
<p>No, You are not cool.</p>
)}
</React.Fragment>
)
}
else{
return null;
}
}
ReactDOM.render(<ComponentFoo goShow="true" whichShow="true" isShow="true" />,
document.getElementById("root"));
```
## <span class="intext-title">ReactDOM Portal</span>
- normally, a component will render on its parent controller
- with `ReactDOM.createPortal()`, it's able to render components to other container.
- it's can be used to solve **z-index**, **layout** problems.
### <span class="intext-point">Format</span>
```jsx=
// In Function Component
function TestPortal(props){
return ReactDOM.createPortal(
<h1>Yes, It work.</h1>,
document.getElementById("aside-container")
);
}
// In Class Component
class ClassPortal{
constructor(props){
super(props);
}
render(){
return ReacrDOM.createPortal(
<h1>Yes, it work.</h1>,
document.getElementById("aside-container")
);
}
}
```
> `Portal` should be used when component rendering
> > go to other container via Portal
# <span class="big-title">React Form Elements Handling</span>
- a form element is `controled`
- if there is `value` attribute in form element
- then this element is under the control of React
- a form element is `uncontrolled`
- if there has no `value` attribute in form element
- then this element will live like normal DOM element
- Directly interact with JS DOM API
- avoid to use
- common form element
- `<input>` (including button, checkebox, text...)
- `<textarea>`
- `<select>`
- `<input type="file">`
## <span class="intext-title">Behavior of React Form</span>
- element with `value` will be the `controlled element` of React
- if it has no implementation about `onChange` event, it cant be control
```jsx=
<input type="text" value="This is a fixed text input." />
<input type="text" value="It can accept input from user"
onChange={this.handleValueChange} />
```
### <span class="intext-point">Event `onChange`</span>
- when `value` of form element get changed, React will callback `onChange` event and pass an `event object`
- use `event object` to get target information
- see [event.target](https://developer.mozilla.org/zh-TW/docs/Web/API/Event/target)
- `target.type`, `target.name`, `target.value`...
### <span class="intext-point">Example</span>
```jsx=
<input id="use-text"
type="text" name="textValue"
value={this.state.textValue} onChange={this.handleChange} />
//in event listener
handleEvent(e){
//...
var value = e.target.value;
//...
}
```
## <span class="intext-title">Different way for some element in React</span>
- This section will include
- `<textarea>`
- `<select>`
- `<input type="file" />`
### <span class="intext-point">textarea</span>
- in **HTML**
```htmlembedded=
<textarea cols="12" rows="12">
Default Text
</textarea>
```
- in **React**
```jsx=
<textarea value={this.state.textValue} onChange={this.handleChange} />
```
> text value will be put in `value` field in attr
### <span class="intext-point">select</span>
- in HTML
```htmlembedded=
<select>
<option selected disabled>Choose Application</option>
<option value="chrome">Chrome</option>
<option value="edge">Edge</option>
<option value="firefox" selected>FireFox</option>
<option value="git">Git</option>
</select>
```
> use `selected` attr to show selection
- in **React**
```jsx=
<select value={this.state.selected} onChange={this.handleChange}>
<option selected disabled>Choose Application</option>
<option value="chrome">Chrome</option>
<option value="edge">Edge</option>
<option value="firefox">FireFox</option>
<option value="git">Git</option>
</select>
```
> use `value` attr in `<select>` to decide selected option
### <span class="intext-point">input type="file"</span>
- since **"file"** is **read-only**
- this make it a `uncontrolled` element
- we use JS file API to get inforamtion
```jsx=
// onSubmit event listener
handleSubmit(event) {
event.preventDefault();
alert(
`Selected file - ${this.fileInput.files[0].name}`
);
}
// bind ref
<input type="file"
ref={input => { this.fileInput = input; }} />
```
## <span class="intext-title">Complete Example</span>
```jsx=
class FormTable extends React.Component {
constructor(props) {
super(props);
this.state = {
textValue: "Hello",
ifChecked: true
}
this.handleChange = this.handleChange.bind(this);
}
// use different name to handle onChange by one listener
handleChange (e) {
var target = e.target;
var name = target.name;
var type = target.type;
var value = (type === "text") ? target.value : target.checked;
console.log(value, this.state.ifChecked);
this.setState({
[name]: value
})
}
render(){
const spanStyle= {
fontSize: '2em',
fonStyle: 'Bold'
};
return (
<form>
<legend><span style={spanStyle}>Handling Form element</span></legend>
// Form element with no onChange implementation
// Still under control
<p>
<label>
Unusble:
<input id="unuse-text" type="text"
value="under controlled of React" />
</label>
</p>
<p>
// Form element with onChange implementation
<h2>Controlled Form Element</h2>
<label>
text input
<input id="use-text"
type="text" name="textValue"
value={this.state.textValue} onChange={this.handleChange} />
</label>
<label>
Radio Checked
<input id="use-check"
type="checkbox" name="ifChecked"
checked={this.state.ifChecked}
value={this.state.ifChecked} onChange={this.handleChange} />
</label>
</p>
<p>
// Display State Change in Component
<h2>Show State Change</h2>
<label>
Changing State
<input type="text" value={this.state.textValue} />
<input type="text"
value={(this.state.ifChecked) ? "true" : "false"} />
</label>
</p>
</form>
);
}
}
ReactDOM.render(<FormTable />, document.getElementById("root"));
```
# <span class="big-title">Lists & Keys</span>
- This is used for multiple creation on element (such as `<li>`)
- `Key` needs to be provided to every list
- React diff algorithm use it to judge if it should manipulate on DOM
- it wont be passed to `porps`, so if the information in key is useful, pass it by other attrs.
## <span class="intext-title">use `array.map` to generate `React List`</span>
```jsx=
var numbers = [1, 2, 3]
const listItem = numbers.map((x, index) => {
<li key={index}>x</li>
});
ReactDOM.render(
<ul>{listItem}</ul>,
document.getElementById("root")
);
```
# <span class="big-title">React Refs</span>
- [Ref reference](https://zh-hant.reactjs.org/docs/refs-and-the-dom.html)
- for Directly operation on DOM
- for example, `focus()` DOM element
- trigger real-time animation
- ref cant be used on *function* component
- it has no **instance**
- It should be noticed that **reference is the invasion of encapsulation**
- carefully use !
## <span class="intext-title">Operation</span>
- create reference via `React.createRef()`
- bind created reference with attr `ref`
- when that instance be mouneted (rendered), it's able to use `current` to access DOM element directly.
## <span class="intext-title">Example</span>
```jsx=
class ReferenceTextInput extends React.Component{
constructor(props){
super(props);
// Create Ref
this.textRef = React.createRef();
// Bind event listener
this.focusTextInput = this.focusTextInput.bind(this);
}
// Focus on ref
focusTextInput(){
this.textRef.current.focus();
}
// Trigger focus after mounting
componentDidMount(){
this.focusTextInput();
}
render(){
return ReactDOM.createPortal((
<React.Fragment>
<h2>This is reference test</h2>
// Bind Reference
<input type="text" ref={this.textRef} />
</React.Fragment>
),document.getElementById("contain-text-input")
);
}
}
```
> when `ReferenceTextInput` been mounted to screen, text input of it will be focused.
# <span class="big-title">Reference</span>
- [W3C](https://www.w3schools.com/react/default.asp)
- [React tutorial](https://zh-hant.reactjs.org/docs/hello-world.html)
- [Fooish](https://www.fooish.com/)
- [Tania Rascia](https://www.taniarascia.com/getting-started-with-react/)
## <span class="intext-title">快速 Review 一下</span>
- React 是一個前端 Library, 在MVC 模型當中負責了 View 的部分。
- 可以搭配其他framework 做使用。
- 注意，並不建議與jQuery 等邏輯管理框架做混用。
- 在建立HTML 網頁結構時，通常透過#root (名稱並非固定)將部分區塊的渲染 (render) 交給React ，React 所採用的VDOM (Virtual DOM) 渲染方式避免了透過 JS 直接操作DOM 所造成的資源浪費。
- 在React 當中，透過組件(Component) 的方式管理部件的呈現，state 和props 的傳遞形成的單向資料流是render 的重要行為方針，其所使用的方式迥異於一般的繼承化管理。
- 使用JSX (將透過Babel 編譯成JS statement)，可以將輸出的元素以接近HTML 的方式作呈現
- 可以直接寫HTML tag !
- 這也是某些人不愛用React 的原因 ! -> 不同語言的混用 vs 網頁的分離架構
- 在React 當中，某些HTML 元素會擁有不同的表現形式
- 本質上，這些HTML 仍為JS expression 他們可以說只是"長得很像HTML" 而已
Google Drive
Gist
Clipboard
Sign in with Wallet
