이 글은 주로 react의 설치 단계를 소개하고, React의 특징과 개념에 대해서도 함께 읽어보겠습니다.
一 React
React는 주로 UI를 구축하는 데 사용되며 MVC의 V(뷰)입니다.React는 Facebook의 내부 프로젝트로 시작되었으며 Instagram 웹사이트를 구축하는 데 사용되었으며 2013년 5월에 오픈 소스로 공개되었습니다.
2. 기능
React는 성능이 뛰어나고 코드 로직이 매우 간단합니다.
효율성
−React는 DOM을 시뮬레이션하여 DOM과의 상호 작용을 최소화합니다. 高效
−React通过对DOM的模拟,最大限度地减少与DOM的交互。
灵活
−React可以与已知的库或框架很好地配合。
JSX
− JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但建议使用它。
组件
− 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。
单向响应的数据流
− React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。(Redux
)
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" } }
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> ) } }
function Welcome(props) { return <h1> Hello, {props.name} </h1>} function App() { return ( <p> <Welcome name = "zhz1" /> <Welcome name = "zhz2" /> <Welcome name = "zhz3" /> </p> ) }
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
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;
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🎜기본 앱 내보내기
🎜🎜5. Props 속성🎜🎜6. State state🎜🎜React는 구성 요소를 상태 머신(State Machines)으로 취급합니다. 사용자와 상호 작용하여 다양한 상태가 달성된 다음 사용자 인터페이스와 데이터의 일관성을 유지하기 위해 UI가 렌더링됩니다. 🎜🎜React에서는 컴포넌트의 상태만 업데이트하고 새로운 상태에 따라 사용자 인터페이스를 다시 렌더링하면 됩니다. (DOM을 조작하지 마세요.) 🎜React 참조 매뉴얼🎜 열) 🎜rrreee🎜6. 🎜🎜🎜🎜class 속성이 className
🎜🎜🎜🎜tabindex 속성이 tabIndex
🎜로 변경됩니다. 🎜🎜🎜속성이 htmlFor
로 변경됩니다🎜 🎜🎜🎜textarea의 값은 value
속성을 통해 지정되어야 합니다. 🎜🎜🎜🎜style 속성의 값은 다음과 같습니다. 객체입니다. CSS 속성은 backgroundColor 와 같이 hump case
가 됩니다. 🎜🎜🎜🎜이 기사는 여기에서 끝납니다. (자세한 내용을 보려면 PHP 중국어 웹사이트🎜React 사용자 매뉴얼🎜 컬럼을 방문하세요.) 궁금한 점이 있으면 아래에 메시지를 남겨주세요. 🎜위 내용은 React를 어떻게 설치하나요? 반응 설치 단계 소개(전체 예제 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!