【学习笔记】- 零基础学React

React是用于构建用户界面的JavaScript库。想要深入学习 react ，就应该从 jsx 入手

react脚手架初始化项目

>> npm install -g create-react-app
>> create-react-app proname
>> npm run start

运行之后，出现以下画面，至此，脚手架创建react项目完成。

首先看一下react中的语法, 定义了一个函数App，返回JSX，并将函数导出。

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
      </header>
    </div>
  );
}

export default App;

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>)
}