react笔记01

sycamore1115
80 阅读2分钟

创建一个react项目

使用 Create React App 脚手架，可以很便利的搭建一个 React 项目。

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

目录结构

在 public 文件夹下有一个 index.html 文件，这个项目里的所有组件都是从这个文件中渲染的。

<div id="root"></div>

在 src 目录下的 index.js 中需要找到了这个 id 为 root 的元素，并向其中开始渲染组件。

index.js

在开始之前，我们删除 src 下的所有文件，只保留 index.js 文件，并将其中的内容清空，然后开始我们的开发。

import React from "react";
import ReactDOM from "react-dom";

function Greeting() {
  return <div>Hello World!</div>
} 
ReactDOM.render(<Greeting/>, document.getElementById('root'))

一般的组件只需要写一个方法就可以了，但由于 index.js 是我们项目的一个入口，所以还需要使用 ReactDom 的 render 方法指定位置进行渲染。有几个点需要注意一下：

  1. react17 之后不需要再导入 react ，所以 import React from "react"; 可以省略。
  2. Greeting 这个 function 就是我们的组件，组件名必须要大写。
  3. 在组件中需要返回一段 html，我们称为 jsx。如果 jsx 需要换行，那么要用一对小括号括起来。
  4. ReactDOM 的 render 方法接收两个参数，一个是需要渲染的组件，一个是渲染的位置。

React.createElement

jsx 的写法我们可以使用 React.createElement 方法来代替。

function Greeting() {
  return (
    <div>
      <h1>Hello World!</h1>
    </div>
  )
} 

function Greeting() {
  return React.createElement(
    'div', 
    {}, 
    React.createElement('h1', {}, 'Hello World!')
  )
}

但是使用 React.createElement 方法，一旦我们的 html 结构变的复杂，看起来就没有 jsx 那么清晰易懂了。

jsx

jsx 看起来就像是一段 html 代码，但实际上还是有区别的，它有自己的书写规：

  1. jsx 必须由单个元素包裹的，也就是有且只有一个顶级元素。如果你实在不希望用 html 标签包裹，你可以使用 React.Fragment 标签进行包裹，这个在页面渲染的时候会被去除。
  2. 在 jsx 中使用元素必须要闭合，否则会报错。
  3. 元素上的属性需要使用驼峰的写法。class 属性要写成 className。

嵌套组件

我们可以使用 function 声明很多组件，不论是在一个文件中声明多个，还是在不同文件中声明然后导入，我们都可以将这些组件嵌套起来，实现功能的拆分。

function Greeting() {
  return (
    <div>
      <h1>Hello World!</h1>
      <Person/>
    </div>
  )
} 
const Person = () => (<h2>Phoney</h2>)

补充

  1. vscode 可以安装 ES7+ React/Redux/React-Native snippets 插件，它提供了一些方便我们编码的简单命令，比如可以使用 rafce 可以快速创建一个组件的初始结构代码
  2. 安装浏览器插件 react-developer-tools，可以让我们更好的查看 react 项目。
avatar
文章
阅读
粉丝