<React.Fragment>

类似vue的<template>

包引入，<Fragment>改为<React.Fragment>

Fragment布局，<React.Fragment>替代<div>

css行内样式：1、以{{background:'red',color:'#fff'}}对象形式进行编码

2、className形式，className = ‘red-btn’

使用 <React.Fragment 标签代替最外层的包括<div 标签

这样的区别是里面的两个标签都是在外层而不会查看源码的时候多一层<div

原来的写法有两层<div 包裹

优雅的写法

import React, {Component, Fragment} from 'react'

那么继承React.Component 就不需要写前面的React.了

<React.Fragment 也可以直接写成 <Fragment

定义一个style.css 样式文件

import './style.css' 引入样式

使用样式类

要用className='red-btn'，不能使用class= 因为class 是类的关键字

给标签添加样式

方法一：使用style = {{属性: '样式值'}}

第一个{} 花括号是表示是JS表达式，

第二个{} 花括号是表示JS对象。

{}花括号也叫大括号

行内样式使用对象的方式编码

｜  style={{'background': 'red'}} 

class改名为 className

｜ className='add-btn'

导入样式文件

｜ import './style.css'

如果不想render最外层div，使用 React.Fragment标签

｜ <React.Fragment>

｜   <div>...</div>

｜   <ul>{this.getTodoItems()}</ul>

｜ </React.Fragment>

React的render() 方法内要求只能返回一个含有根元素的HTML元素，不能返回多个，可以使用<React.Fragment> 标签替代最外层的标签。

import React, { Component, Fragment } from 'react' 

React.Fragment替换div包裹元素

1.react 组件都是以大写字母开头，组件就是一个类然后继承 React.Component，就是一个react组件，react 组件中必须有一个 render

 2.jsx: 直接在js中写 html 标签，也可以在在 {} 中写 js 表达式(不能写 js 语句)；

3.react 中的 return 只能返回一个 jsx 也就是说只能有一个父标签；

 4.父组件通过属性的形式向子组件传递参数，子组件通过 props 接收参数；

5.由于每一个组件中必须有一个根元素，但是处于一些原有不想让其表露出来时，可以用 <React.Fragment></React.Fragment>代替；

6.简化代码：将jsx 中的 js集中部分单独作为一个函数；在顶部引入

7.import React, { Component, Fragment } from 'react'，便可以将后面代码中的  React.Fragment 简化为 Fragment（此标签中不能带类名） ，React.Component简化为 Component；在函数中定义 const {handleDelete,index} = this.props 以后，使用 handleDelete 就相当于 this.props.handleDelete;

8.一般 bind(this) 写在 constructor 函数中更规范。

使用<React.Fragument>标签对作为根元素的占位符，替代最外层必须有一层多余的div包裹的情况

在react中如果要写行内样式：

就需要style={{对象的形式写}}，外层的“{}”表示里面是一个js的表达式，里面的“{}”表示是一个对象

我按照老师的样式实现了一个差不多的todolist，关于本次课的【笔记】+【源码】都放在我的博客里了，有需要的同学可以看看！

【前端demo】使用ReactJS实现一个TodoListhttps://blog.csdn.net/sinat_38368658/article/details/108732416

React返回调整

可以用<React.Fragment />来替代最外层的标签

<div style={{}}>style样式的第一层{}表示内容是js表达式，第二层{}表示内容是对象。

class关键字在react里代表的是定义一个类，所以在标签里定义class时要用className代替。

render()返回值中dom只能有一个根节点，如果影响布局则可以用<React.Fragment></React.Fragment>代替。

笔记笔记笔记

使用樣式有兩種方法：

1. 使用style行內樣式
   JSX語法中，如果要加個行內樣式，必須要用{{}}包裹，最外層這個花括號表示他裡面是個 JSX表達式，而裡面的花括號表示這個表達式實際上是個JSX的對象。
   要用對象的形式進行編碼：<botton style={{ background: "green" , color: "#fff" }}>Add</button>

2. 使用class樣式類
   要用className這個關鍵詞，不能用class。
   因為在React中Class是關鍵詞，表示定義一個React的組件

組件最外層的div可以使用 React.Fragment元素代替，在渲染時不會顯示最外層標籤。

使用結構賦值，在應用React的時候，一並引用Component, Fragment

老师讲的很清晰，听完基本都很好理解，查看全文有图?

結構賦值
import React, { Componentm Fragment } from 'react';

React.Component => Component
React.Fragment => Fragment

組件最外層的div可以使用 React.Fragment元素代替，在渲染時不會顯示最外層標籤。

引入樣式
import './style.css';

class方式添加樣式

class='red-btn' 沒有報錯，但有警告
在 React 中 class這個關鍵詞表示在定義一個 React 組件，所以不建議你在樣式中使用 class 這個名字，而是使用 className。

寫成 style='backgroud:red' 會報錯

JSX語法中，如果要加個行內樣式，必須要用{{}}包裹，最外層這個花括號表示他裡面是個 JSX表達式，而裡面的花括號表示這個表達式實際上是個JSX的對象。

要寫成(對象的方式來編碼)：

style={{backgroud:'red'}}

React.Fragment  等价于导入的Fragment

组件最外层的div可以使用 React.Fragment元素代替，在渲染时不会显示最外层标签。

React.Fragment 忽略render中的最外层外套

React学习官网：

    https://reactjs.org/

            docs

            tutorial

温馨提示：使用箭头函数以避免在标签内部或者constructer内部bind(this)的繁琐操作,示例代码如下：

handleDelete = ()=>{

    your code

}