1. 개념

React는 사용자 인터페이스를 구축하기 위한 자바스크립트 라이브러리입니다.

React는 주로 UI를 구축하는 데 사용되며 MVC의 V(뷰)입니다.
React는 Facebook의 내부 프로젝트로 시작되었으며 Instagram 웹사이트를 구축하는 데 사용되었으며 2013년 5월에 오픈 소스로 공개되었습니다.
React는 성능이 뛰어나고 코드 로직이 매우 간단합니다.

2. 기능

효율성

高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。
灵活 −React可以与已知的库或框架很好地配合。
JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ，但建议使用它。
组件 − 通过 React 构建组件，使得代码更加容易得到复用，能够很好的应用在大项目的开发中。
单向响应的数据流 − React 实现了单向响应的数据流，从而减少了重复代码，这也是它为什么比传统数据绑定更简单。(Redux)

3. [安装] (https://doc.react-china.org/docs/installation.html)

yarn init
yarn add react react-dom react-scripts

로그인 후 복사

package.json

{  "name": "test",  "version": "1.0.0",  "description": "zzz",  "main": "index.js",  "license": "MIT",  "dependencies": {    "react": "^16.2.0",    "react-dom": "^16.2.0",    "react-scripts": "^1.0.17"
  },  "scripts": {    "start": "react-scripts start"
  }
}

로그인 후 복사

4. 组件

1. ES6 class

class Welcome extends React.Component {
    render() {        return (            <h1> Hello, {this.props.name} </h1>
        )
    }
} 
class App extends React.Component {
    render() {
        return (            <p>
                <Welcome name = "zhz1" />
                <Welcome name = "zhz2" />
                <Welcome name = "zhz3" />
            </p>
        )
    }
}

로그인 후 복사

2. 函数式 (无状态组件)

function Welcome(props) {
    return <h1> Hello, {props.name} </h1>}
function App() {
    return (        <p>
            <Welcome name = "zhz1" />
            <Welcome name = "zhz2" />
            <Welcome name = "zhz3" />
        </p>
    )
}

로그인 후 복사

3. ES5-写法 React.createClass(仅做参考)

React.createClass会自绑定函数方法（不像React.Component只绑定需要关心的函数）导致不必要的性能开销，增加代码过时的可能性。

const Welcome = (props) => {    return <h1> Hello, {this.props.name} </h1>}
const App = React.createClass ({
    render() {
        return (            <p>
                <Welcome name1 = "ss" />
                <Welcome name1 = "zhz2" />
                <Welcome name1 = "zhz3" />
            </p>
        )
    }
});

로그인 후 복사

导出(提供接口)
export default App

5. Props 属性

6. State 状态

React 把组件看成是一个状态机（State Machines）。通过与用户的交互，实现不同状态，然后渲染 UI，让用户界面和数据保持一致。

React 里，只需更新组件的 state，然后根据新的 state 重新渲染用户界面（不要操作 DOM）（想看更多就到PHP中文网React参考手册栏目中学习）

class Welcome extends React.Component {
    render() {        return (            <h1 onClick={this.props.onClick} > Hello, {this.props.name} </h1>
        )
    }
} 
class App extends React.Component {
    constructor() {
        super();
        this.state = {
            selected: false
        }
    }
    changeText() {
        this.setState((preState, props) => ({
            selected: !preState.selected
        }))
    }
    render() {
        return (            <p> 
                <Welcome name= {this.state.selected ? "zhz3-selected" : "zhz3" } onClick={() => this.changeText()} />                <h1 onClick={() => this.changeText()}> {this.state.selected ? "zhz3-selected" : "zhz3" } </h1>
            </p>
        )
    }
}
export default App;

로그인 후 복사

6. 注意

class 属性变为 className
tabindex 属性变为 tabIndex
for 属性变为 htmlFor
textarea 的值通过需要通过 value 属性来指定
style 属性的值接收一个对象，css 的属性变为驼峰
유연함 −React는 알려진 라이브러리 또는 프레임워크와 잘 작동합니다.

JSX − JSX는 JavaScript 구문의 확장입니다. JSX는 React 개발에 필수는 아니지만 권장됩니다.

🎜🎜Component − React를 통해 구성 요소를 구축하면 코드 재사용이 더 쉬워지고 대규모 프로젝트 개발에 잘 적용될 수 있습니다. 🎜🎜🎜🎜단방향 응답 데이터 흐름 − React는 단방향 응답 데이터 흐름을 구현하여 반복되는 코드를 줄여 기존 데이터 바인딩보다 간단합니다. (Redux)🎜🎜🎜🎜3. [설치] (https://doc.react-china.org/docs/installation.html)🎜rrreee🎜🎜🎜package.json🎜rrreee🎜4 .Component🎜