React（正在进行中）备忘单

关注我！：关注@EricTheCoder_

我并不经常使用 React，因此每当我需要在 React 中做哪怕是最小的事情时，我都必须查看文档、教程或在论坛上发布问题。

这就是我决定做这个记忆辅助工具的原因，考虑到我的记忆力不是那么好，我想为什么不利用我所知道的关于 React 的所有概念来制作一个巨大的记忆辅助工具。

所以我可以时不时地阅读它，从而加强我对 React 的了解。

将所有这些放在一起需要几天的时间，因此每天我都会发布更新的 Cheat Sheet 版本，直到最终版本。

如果您有任何想法或建议，请不要犹豫，在评论部分发表。

让我们现在就从第一个版本开始……

React 备忘单（草稿第一天）

创建 React 应用

// Create a new app
npx create-react-app my-app-name

// Run the created app
cd my-app-name
yarn start

// http://localhost:3000

第一个 React 函数组件

无需从“react”导入 React（自 React 17 起）
首字母必须大写
必须返回 JSX

（src/App.js）

// React component
function App(){
  return <h1>Hello World</h1>
} 

export default App;

这个组件是如何渲染到浏览器的？主项目文件是 src/index.js，该文件中包含了渲染组件的指令。

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

然后，App 组件将在 public/index.html 'root' div 内呈现

JSX 规则

返回单个元素（只有一个父元素）

// not valid
return <h1>Hello world</h1><h2>Hi!</h2>

// valid with fragment. 
return (
    <>
        <h1>Hello World</h1>
        <h2>Hi!</h2>
    </>
)
// Noted the parenthesis for multi-line formatting

使用 className 而不是 class
并且所有属性名称都需要采用驼峰命名法

// not valid
return (
    <div class="title">
        Hello World
    </div>
)

// valid
return (
    <div className="title">
    </div>
)

关闭每个元素

return (
    <img src="http:example.com/image.jpg" />
    <input type="text" name="first_name" />
)

嵌套组件

// Arrow function shorthand component
const Person = () => <h1>Mike Taylor</h1>

// Arrow function component
const Message = () => {
    return <h1>Hello</h1>
}

// Function component
function HelloWorld(){
  return (
      <>
          <Message />
          <Person />
      </>
  )
}

组件 CSS

（src/App.css）

h1 {
    color: red;
}

（src/App.js）
导入 CSS 文件

import './App.css'

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

内联 CSS

function App(){
  return <h1 style={{ color: 'red' }}>Hello World</h1>
}

JSX 中的 JavaScript

括在 {} 之间
必须是一个表达式（返回一个值）

function App(){
    const name = 'Mike'
    return (
      <>
          <h1>Hello {name}</h1>
          <p>{name === 'Mike' ? '(admin)': '(user)'}</p>
      </>
    )
}

组件属性（Props）

function App()
    return <Person name='Mike' age={29} />
} 

const Person = (props) => {
    return <h1>Name: {props.name}, Age: {props.age}</h1>
}

// or props object deconstructing
const Person = ({name, age}) => {
    return <h1>Name: {name} Age: {age}</h1>
}

儿童道具（插槽）

function App()
    return (
        <Person name='Mike' age={29}>
            Hi, this is a welcome message
        </Person>
    )
} 

const Person = (props) => {
    return (
        <h1>Name: {props.name}, Age: {props.age}</h1>
        <p>{props.children}</p>
    )
}

// or props object deconstructing
const Person = ({name, age, children}) => {
    return (
        <h1>Name: {name} Age: {age}</h1>
        <p>{children}</p>
    )
}

结论

今天就到这里。我们还有很多事情要做，明天见……如果你想确保不错过任何内容，请点击关注我！

关注我！：关注@EricTheCoder_

文章来源：https://dev.to/ericchapman/react-work-in-progress-cheat-sheet-ce8