1-react-基础

Monica4869
134 阅读5分钟

[TOC]

react初始化

1. 安装脚手架

npm install create-react-app

mac 管理员运行
/usr/bin/sudo npm install create-react-app

备注：node必须升级到14+

vue项目必须运行

npm rebuild node-sass

使用 create-react-app 脚手架创建项目

npx create-react-app react-test

2. mac管理node版本

1、查看node版本 $ node -v，如果没有需要安装一下node：https://nodejs.org/zh-cn/

2、全局安装下n :sudo npm i -g n

3、检查是否安装完成：n -V

4、查看所有node ：n ls

5、安装某一个版本：n xx.xx.x（版本号）

6、安装最新版本：n lastest

7、安装最稳版本：n stable

8、切换node 版本（输入上下键盘选择确认）：n

9、删除某个版本：n rm xx.xx.x

10、使用某个版本来运行脚本：n use xx.xx.x a.js

11、查看当前版本：node -v

作者：含羞草恋上梦昙花
链接：https://www.jianshu.com/p/f6c65c287686
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

3. 下载太慢

# 设置为国内镜像源
npm config set registry http://registry.npm.taobao.org

# 查看当前镜像源
npm config get registry

# 恢复原来镜像源
npm config set registry http://registry.npmjs.org

4. 启动

npm start

2. JSX语法

1.JSX概念

  • JSX可以看做是JS语言的扩展，它既不是一个字符串也不是一个HTML
  • 它具备了JS所有的功能，同事还可以被转为HTML在界面上进行展示（react、react-dom)

2. JSX的特点

  • 动态显示数据
  • 可以调用方法，自定义+内置
  • 支持表达式，支持三元表达式
const name = '二肥'
const flag = true

function sayHello() {
  return '大家好'
}

const obj = {
  name: 'qq',
  age: 18
}

function App() {
  return (
    <div>
      React 运行成功
      <p>{name}</p>
      <p>{flag}</p>
      <p>{sayHello()}</p>
      <p>{console.log('111')}</p>
      <p>{flag ? '登录状态' : '执行登录'}</p>
      <p>{`hello,${name}`}</p>
      <p>1222{/* 注释 */}</p>
      <p>{JSON.stringify(obj)}</p>
    </div>
  );
}

3. JSX的补充

  1. JSX本身就是一个表达式
const name = <div>张三</div>
  1. JSX可以添加属性
  • 字符串属性、直接用双引号包裹
  • 动态属性
function App() {
  return (
    <div>
     <p title="自定义">字符串属性</p>
     <p title={age}>动态属性</p>
    </div>
     );
}
  1. JSX可以添加子元素
  2. JSX只能有一个父元素

4. JXS事件操作

1. 事件绑定

  • 驼峰命名直接添加={事件监听的名称}
const handler = () =>{
  console.log('点击了')
}

function App() {
  return (
    <div>
     <button onClick={handler}> 点击事件 </button>
    </div>
  );
}

2. 事件监听传参

  • 利用箭头函数内部调用事件监听的时候传递实参
  • 利用bind方法返回一个新的函数在事件发生的时候调用，此时可以传递参数
const handler = (a, b) =>{
  console.log('点击了')
  console.log(a, b)
}

function App() {
  return (
    <div>
     <button onClick={() =>handler(1, 2)}> 点击事件 </button>
      <button onClick={handler.bind(null, 100, 200)}> 点击事件 </button>
    </div>
  );
}

3. 获取事件对象

  • 默认情况下不需要接受参数，且直接执行事件监听，此时它的第一个参数默认就是ev
  • 利用箭头函数执行事件监听的时候，需要通过箭头函数将ev对象传递给事件监听函数进行使用
  • 利用bind方法执行的时候，如果有传参，那么最后一个参数默认接收到的就是ev
// 箭头函数直接传入
const handler = (ev) =>{
  console.log('点击了')
  console.log(ev)
}

function App() {
  return (
    <div>
     <button onClick={(ev) => {handler(ev)}}> 点击事件 </button>
    </div>
  );
}
// bind默认最后一个值是ev
const handler = (a, b, ev) =>{
  console.log('点击了')
  console.log(ev)
  console.log(a)
}

function App() {
  return (
    <div>
     <button onClick={handler.bind(null, 100, 200)}> 点击事件 </button>
    </div>
  );
}

3. 数据循环

  • jsx当中可以直接将数组中的数据结构展开
const arr = [<p>1</p>,<p>2</p>, <p>3</p>]

function App() {
  return (
    <div>{arr}</div>
  );
}

const arr = [
  {
    id: 1,
    name: '11',
    age: 18
  },
  {
    id: 2,
    name: '22',
    age: 19
  }
]

function App() {
  const ret = arr.map(item => {
    return <li key={item.id}>{item.name}</li>
  })
  return <ul>{ret}</ul>
}

4. 添加样式

1. 添加内联样式

  • 设置样式的时候应该将键值对放置于{}
  • 内联样式默认无法支持伪类以及媒询样式设置
  • 借助第三方包 radium
    • 导入radium函数将当前需要支持伪类操作的组件包裹后导出
    • 接受一个数组，根据状态展示
function App() {
  return (
    <div style={{width: '100px'}}>aa</div>
  )
}

const styleObj = {
  width: 100,
  height: 200,
  backgroundColor: 'red',
  ":hover": {
      ba
  }
}

function App() {
  return (
    <div style={styleObj}>aa</div>
  )
}

import Radium from 'radium';

const styleObj = {
  width: 100,
  height: 200,
  backgroundColor: 'red',
  ":hover": {
    backgroundColor: 'skyblue'
  },
  "@media (max-width: 1000px)": {width: 500}
}

function App() {
  return (
    <div style={styleObj}>aa</div>
  )
}

export default Radium(App);


// index.js
import {StyleRoot} from 'radium'

ReactDOM.render(
  <React.StrictMode>
    <StyleRoot>
      <App />
    </StyleRoot>
  </React.StrictMode>,
  document.getElementById('root')
);

const buttonStyle = {
  base: {
    width: 100,
    height: 40,
    fontSize: 20
  },
  login: {
    background: 'green'
  },
  logout: {
    background: 'orange'
  }
}

const isLogin = false

function App() {
  return (
    <div>
      <button style={
        [
          buttonStyle.base,
          isLogin ? buttonStyle.login : buttonStyle.logout
        ]
      }
      >按钮</button>
    </div>
  )
}

2. 添加外联样式

  • 全局外联样式，所有组件当中都可以直接进行使用
  • 02 组件级别的外联样式，只有某一个组件可以进行使用组件名.module.css
全局index.js中
import './style.css'

组件级别的
import style from './Test.module.css'
 <p className={style.item}>Test中的P,使用自己的样式</p>

5. 组件创建方式

1. 创建函数组件

function App() {
  return(
    <div>
      组件
    </div>
  )
}

2. 创建类组件

  • 必须继承 Component render
  • 组件名称的首字母必须是大写的，在 React 当中可以用于区分组件和普通的标记
// About.js
import React, {Component, Fragment} from 'react'

class About extends Component{
  render(){
    return(
      <>About中的内容</>
    )
  }
}

export default About

// App.js
import About from "./About";
function App() {
  return(
    <div>
      <About />
    </div>
  )
}

6. 组件传递数据的方式

  • 在组件身上添加属性然后传递数据
  • 将数据统一管理，然后利用 ... 操作直接传递给相应的组件
    • 函数组件：
    1. 在函数组件内可以接上到外部的数据，内部直接访问即可{name:xxx, age:xxxx }
    • 类组件：
    1. 在类组件的内部存在一个props属性，外部传递的数据都放在这里保存，我们可以直接进行使用
// About 函数组件
import React from 'react'

function About ({name, age}) {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  )
}

export default About 

// Header 类组件
import React, {Component} from 'react'

class Header extends Component{
  render() {
    // 在类组件当中存在一个props属性，外部所传递进来的数据的都可以通过它进行访问 
    const {name, age} = this.props 
    return (
      <div>
        <p>{name}</p>
        <p>{age}</p>
      </div>
    )
  }
}

export default Header

import About from './About'
import Header from './Header'

const obj = {
  name: 'zce', 
  age: 40
}


function App() {
  return(
    <div>
      {/* <Header name={"拉勾教育"} age={100}/> */}
      <Header {...obj}/>
      {/* <About a={10} b={100}/> */}
      <About {...obj}/>
    </div>
  )
}

export default App

7. 默认值以及类型校验

  • 针对于函数组件来说，如果想要设置默认的 props 属性值，则直接通过 组件名称.defaultProps 来设置一个对象
  • 针对于类组件来说，我们可以直接定义 static defaultProps 来管理需要设置默认值的属性即可
// 函数组件
import React from 'react'
import PropTypes from 'prop-types'

function About({ name, age }) {
  return (
    <div>
      <p>{name}</p>
      <p>{age}</p>
    </div>
  )
}

About.defaultProps = {
  name: 'syy',
  age: 18
}

About.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
}
export default About

// 类组件
import React, { Component } from 'react'

class Header extends Component {

  static defaultProps = {
    name: '拉勾教育',
    age: 100
  }

  render() {
    // 在类组件当中存在一个 props 属性，外部所传递进来的数据的都可以通过它进行访问 
    const { name, age } = this.props
    return (
      <div>
        <p>{name}</p>
        <p>{age}</p>
      </div>
    )
  }
}

export default Header

8. 向组件传递JSX

  • 数据挂在props里面
// App 主文件
function App() {
  return (
    <div>
      <Header>
        <p>Header组中的 P标签</p>
        <span>Header组件中的 span标签</span>
      </Header>
      <About>
        <p>About 中p标签</p>
      </About>
    </div>
  )
}

// 函数组件
function About(props) {
  return (
    <div>
      <p>{props.name}</p>
      <p>{props.age}</p>
      {props.children}
    </div>
  )
}

// 类组件
class Header extends Component {

  static defaultProps = {
    name: '拉勾教育',
    age: 100
  }

  render() {
    // 在类组件当中存在一个props属性，外部所传递进来的数据的都可以通过它进行访问 
    const { name, age } = this.props
    return (
      <div>
        <p>{name}</p>
        <p>{age}</p>
        {this.props.children}
      </div>
    )
  }
}
avatar
文章
阅读
粉丝