React 备忘单

什么是 ReactJS？

📌ReactJS 是一个开源的、基于组件的前端库，仅负责应用程序的视图层。它由 Facebook 维护。ReactJS
使用基于虚拟 DOM 的机制在 HTML DOM 中填充数据（视图）。📌
虚拟 DOM 运行速度很快，因为它只更改单个 DOM 元素，而不是每次都重新加载整个 DOM。

创建 React 应用

📌creat-react-app 是由 Facebook 创建的 React 应用样板生成器。它提供了一个易于使用且配置简单的开发环境，包括：

1.ES6 和 JSX 转译
2.具有热模块重新加载功能的开发服务器
3.代码检查
4.CSS 自动前缀
5.使用 JS、CSS 和图像捆绑以及源映射构建脚本
6.Jest 测试框架

安装

首先，使用节点包管理器（npm）安装 create-react-app

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

JSX 表达式

scr 文件夹并单击 App.js

function App(){
const name= 'Buddhadeb'
return(
<div className ="Container">
<h1> Hello World </h1>
<h2> Hi {name}</h2>
</div>
)
}

React 组件

1.无状态组件

import React, { Component } from 'react';
import { render } from 'react-dom';
class FirstComponent extends Component {
    render() {
 return (
     <div>
      Hello, I am Buddhadeb Chhetri.
       </div>
     );
   }
}
export default FirstComponent

2.无状态函数组件

import React from 'react';
import PropTypes from 'prop-types';
 const FirstComponent = props => (
   <div>
       Hello, ! I am {props.name}.
   </div>
         );

FirstComponent.propTypes = {
    name: "Buddhadeb Chhetri"
}

3.无状态组件中的属性

const YourComponent = ({ propExample1, 
example2 }) => (
 <div>
 <h1>properties from parent 
component:</h1>
 <ul>
 <li>{propExample1}</li>
 <li>{example2}</li>
 </ul>
 </div>
)

<YourComponent propExample1="Buddhadeb" 
example2="Chhetri" />

4.Class 组件

import React from 'react'
class YourComponent extends 
React.Component {
 render() {
 return <div>Buddhadeb Chhetri</div>
 }
}
export default YourComponent

5.类组件中的属性

class YourComponent extends 
React.Component {
 render() {
 return (
 <div>
 <h1>
 properties from parent 
component:
 </h1>
 <ul>

<li>{this.props.propExample1}</li>
 <li>{this.props.example2}
</li>
 </ul>
 </div>
 )
 }
}

6.州📌

class CountClicks extends React.Component {
 state = {
 clicks: 0
 }
 onButtonClick = () => {
 this.setState(prevState => ({
 clicks: prevState.clicks + 1
 }))
 }
 render() {
 return (
 <div>
 <button 
onClick={this.onButtonClick}>
 Click me
 </button>
 <span>
 The button clicked 
{this.state.clicks} times.
 </span>
 </div>
 )
 }
}

7.React Router📌

import { 
 BrowserRouter, 
 Route 
} from 'react-router-dom'
const Hello = () => <h1>Hello world!</h1>
const App = () => (
 <BrowserRouter>
 <div>
 <Route path="/hello" 
component={Hello}/>
 </div>
 </BrowserRouter>
)

打开：https：localhost：3000 / hello

8.useState 钩子📌

import React, { useState } from 'react'
function Example() {
 const [count, setCount] = useState(0)
 return (
 <div>
 <p>You clicked {count} times</p>
 <button onClick={() => 
setCount(count + 1)}>
 Click here to increase the 
counter.
 </button>
 </div>
 )
}

鏂囩珷鏉ユ簮锛�https://dev.to/buddhadebchhetri/react-cheatsheets-5978