React学习

React学习笔记（一）

该学习笔记源于B站视频https://www.bilibili.com/video/av69359910/?p=2&t=397

1、只要文件要使用JSX的语法，就需要在src文件夹中的index文件中引入react，import React from 'react'
在web中运行 import ReactDom from 'react-dom'
ReactDom.render(element,container,callback)
要在JSX中写JS就只要加花括号，对于大篇幅的JSX，用括号括起来渲染，JSX中注释是{/* */}。
组件在Render函数中调用可以用</>调用。
eg://创建组件的第一种方式就是使用箭头函数，但是这个名字要大写开始。

const App=(props)=>{
return (
<div>
    <h1>welcome {props.title} !!!</h1>
</div>
)
}
ReactDom.render{
<App title="1901"/>,
document.querrySelector('#root')
}

2、定义组件的第二种方式就是使用类继承React下的Component

class App from React.Component{
  render(){
    return (
      <p>{this.props.desc}</p>
    )
  }
}
//render是react dom 提供的一个方法，这个方法通常只会用一次
 render(
   <App desc="类组件" />,
   document.querrySelector('#root')
 )

在react16以嵌，使用以下方式来创建一个类组件

React.createClass({
  render(){
    return <h1> xxxx</h1>
  }
})

3、组件可以嵌套，把

加到class App 中，但要加

把他们包裹起来。JSX语法不是合法的JS代码，所以react在真正渲染的时候会把上面的代码编译为下面的代码来运行。
底层渲染机制使用React.createElement()，React.createElement()第一个参数为标签名，第二个参数是标签属性，剩下的就是更多的子元素。
eg:

React.createElement{
  'div',
  {
     className:'app',
     id:'appRoot'
  },
  React.createElement{
    'h1',
    {
        claaName:'title'
    },
    'JSX原理'
  }
}

4、在JSX中写style也要多加一个花括号。添加样式方法：内联创建和使用className（添加index.css文件 import ‘./index.css’ 要动态添加不同的Classname就可以添加第三方的包叫classN ames eg: className={classNames('a',{'b':true,'c':false})} ）
还可以使用styled-components
import styled from ‘styled-components’
eg:

//带样式的组件
const Title=styled.h1`
color:#f00
`
//使用
...
<Title>元素中样式</Title>

还有用styled-jsx（不推荐使用，了解可以上npm）

5、在src文件夹中创建components文件夹，同时一般会创建一个App.js文件 ，简写rcc就直接出来基础框架，一个组件做一件事情（创建一个文件夹），但是有些组件有小组件可以管理在组件文件夹下，如果不想在外层加

，可以添加Fragment（Fragment可以直接写空标签，也就是说相当于空标签）。