React是用于构建用户界面的JavaScript库。想要深入学习 react ，就应该从 jsx 入手
react脚手架初始化项目
>> npm install -g create-react-app
>> create-react-app proname
>> npm run start
运行之后，出现以下画面，至此，脚手架创建react项目完成。
react基础
1、JSX
1、jsx本身就是一个表达式
2、JSX添加属性，字符串属性，直接用引号添加，动态属性，直接写变量
3、JSX添加子元素，只有一个父元素
4、使用但标签的时候必须正确关闭
<p>{Math.random()}</p>
{/* 1234 */}
<p>{`name: ${obj.name}`}</p>
<button onClick={handleClick}>点击触发事件</button>
2、全局css设置
在入口文件index.js中引入
import './styles/common.css'
common.css
.box{
width: 100px;
height: 100px;
background-color: pink;
color: #000;
}
在其他组件中可以直接使用,注意添加class的时候需要使用className,因为class是关键字。
<p className='box'>1234</p>
3、局部css设置
在组件中引入css，注意需要使用变量进行接收
import style from './styles/test.module.css';
test.module.css
.testBox{
background-color: green;
color: #fff;
}
在组件中使用，注意，需要使用刚才引入时接收的变量，进行类名的设置才能生效
<div>
<p className={style.testBox}>1234</p>
</div>
4、创建组件
- 函数组件
function App(){
return (<div>
<p>内部元素</p>
</div>)
}
export default App
- 类组件
import React, {Component, Fragment} from 'react'
//继承“Component”
class About extends Component {
// 实现render函数
render() {
return (
<Fragment>About组件中的内容</Fragment>
<>About组件中的内容</>
)
}
}
export default About
函数组件
function Test() {
return <div>
我是函数组件
</div>
}
export default Test
注意事项：
组件中不需要根元素的时候,可以使用<Fragment></Fragment>或者是<></>标签进行包裹,渲染出来的组件则是不添加任何根元素
- 必须继承
Compenent，实现render函数 - 组件名称的首字母必须是大写的，在React中可以用于区分组件和普通的标记
- Fragment,没有任何修饰作用，起到占位符的作用
- 空标签也有同样的效果，占位符作用
5、组件传值
类组件
1、父组件传值
<Layout name={'拉钩教育'} age={100}/>
state = {
name: '拉钩教育',
age: 100
}
<Layout {...this.state}/>
子组件接收
import React, { Component } from 'react'
class Layout extends Component {
render() {
return (
<div>
<p>{this.props.name}</p>
<p>{this.props.age}</p>
</div>
)
}
}
export default Layout
2、类组件设置默认的props
static defaultProps = {
name: 'defaultName',
age: 18
}
3、类组件设置props类型
import PropTypes from 'prop-types'
Test.propTypes = {
a: PropTypes.string,
b: PropTypes.string.isRequired
}
4、向子组件间传递JSX
<JSX>
<div>我是父组件传递到子组件的值: {`${name}`}</div>
<p>我是第二个值</p>
</JSX>
子组件
<div>
<p>我是JSX子组件</p>
{this.props.children}
</div>
函数组件
1、父组件传值
<Test name={'拉钩教育'} a={10} b={10}/>
子组件接收props
function Test(props) {
console.log(props)
return (<div>
<p>{props.a || '--'}</p>
<p>{props.b || '--'}</p>
<p></p>
</div>)
}
export default Test
函数组件设置默认props
Test.defaultProps = {
a: 'default',
b: 0
}
2、简便传值方式
如果觉得属性比较多不好维护，则可以先对属性进行定义，然后通过解构传值的方式进行传值
传值定义：
const obj = {
name: '拉钩教育',
age: 100
}
组件使用
<Test { ...obj }></Test>
3、向子组件传递JSX
<Test a={1}>
<p>我是父组件传递到子组件的值</p>
</Test>
子组件接收
function Test(props) {
return (<div>
{props.children}
</div>)
}
