React 基础应用

最新推荐文章于 2024-08-24 20:13:29 发布

旧友前度丶

最新推荐文章于 2024-08-24 20:13:29 发布

阅读量70

点赞数

文章标签： react.js javascript vue.js

本文链接：https://blog.csdn.net/wangyangzxc123/article/details/121726874

版权

# React.

## Day.01

- ##### 1.特点. 

- 声明式  组件化  一次学习.随处使用,

- 对比vue. React 强调尽可能利用js自身语言能力编写ui  而不是通过组件增强html的功能

库.小而巧

框架.大而全

用于构建用户界面的javaScript库(做网页.)

          a.用户界面

          b.javaScropt库

- ---------------------------------

  ##### 2.脚手架创建项目

  使用create-react-app 命令工具.

  ```
  1.全局安装 / 不推荐.
  npm i -g create-react-app
  或
  yarn add create-react-app
  -------------------------
  2.npx create-react-app react-basic   不需要更新 / 推荐.
  启动项目 yarn start or npm start
  3.npx是npm@v5.2版本的的简化命令
  ```

- --------------------------------

  3.掌握JSX基本使用

- ```
  const h3Ele = (
    <div className='nmae'>
      <ul>
        <li>React</li>
        <li>Vue</li>
        <li>Angular</li>
      </ul>
    </div>
  )
  ReactDOM.render(h3Ele, document.querySelector('#roou'))
  ```

  

------

js代码:

// 引入核心包
// 在使用JSX的时候  react版本在16.14之前需要引入.之后可以不引入
import React from 'react'
// 设计DOM 渲染的包
import ReactDOM from 'react-dom'
// 创建标签.标签上面的属性(对象).标签里的内容
const h1Ele = React.createElement(
  'h1',//标签
  {
    title: 'Hello React',//标签里的属性.可以为null
  },
  'Hello World',//标签里的内容
  React.createElement('span', null, '你好')
)
// 渲染到哪里
ReactDOM.render(h1Ele, document.querySelector('#root'))



const h2Ele = React.createElement(
  'ul',
  {
    className: 'wrap'
  },
  React.createElement('li', null, 'React',
    React.createElement('li', null, 'Vue',
      React.createElement('li', null, 'Angular')))
)
ReactDOM.render(h2Ele, document.querySelector('#rooy'))



// JSX基本使用  
// 必须要有一个根.<></>  /或 <React.Fragment></React.Fragment> 
// 使用class的使用必须是className
// 是虚拟节点.不会渲染.
const h3Ele = (
  <div className='nmae'>
    <ul>
      <li>React</li>
      <li>Vue</li>
      <li>Angular</li>
    </ul>
  </div>
)
ReactDOM.render(h3Ele, document.querySelector('#roou'))

// 结论.
// 在写JSX的时候外围用小括号包裹.

const age = 18
const fn = {
  addres: '你好'
}
const arr = ['ifg', 'elest']
const show = () => {
  return 'Hello Word'
}
const obj = age > 17 ? '已成年' : '未成年'
const span = <span>我是一个span</span>
const h4Ele = (
  <div>
    <p>简单变量:{age}</p>
    <p>对象:{fn.addres}</p>
    <p>数组:{arr[0]}</p>
    <p>方法调用:{show()}</p>
    <p>三元表达式:{obj}</p>
    <p>JSX:{span}</p>
  </div>
)
// 注意:
// JS 对象虽然也是表达式，但是不能直接嵌套在 {} 中，一般只会出现在 style 属性中。
// JSX 本身也是表达式。
ReactDOM.render(h4Ele, document.querySelector('#rooi'))

html代码:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root"></div>
  <div id='rooy'></div>
  <div id='roou'></div>
  <div id='rooi'></div>
  <div id='rooo'></div>
  <div id='roop'></div>
  <div id='rooq'></div>
  <div id='roow'></div>
</body>
</html>

运用:

//需求:isLoading 是true.显示'加载中'/否则显示'加载完成'


// 方法1:
// const isLoading = true
// let h5Ele
// if (isLoading) {
//   h5Ele = <h1>加载中...</h1>
// }
// else {
//   h5Ele = <h1>加载完毕</h1>
// }

// 方法2:
// function render () {
//   const isLoading = true
//   let h5Ele
//   if (isLoading) {
//     h5Ele = <h1>加载中...</h1>
//   }
//   else {
//     h5Ele = <h1>加载完毕</h1>
//   }
//   return h5Ele
// }
// ReactDOM.render(h5Ele, document.querySelector('#rooo'))

// 方法3:
function render () {
  const isLoading = true
  return <h1>{isLoading ? '加载中...' : '加载完毕'}</h1>
}

// const h5Ele = render()
// ReactDOM.render(h5Ele, document.querySelector('#rooo'))

ReactDOM.render(render(), document.querySelector('#rooo'))

const arrd = [
  { id: '1', name: 'React' },
  { id: '2', name: 'Vue' },
  { id: '3', name: 'Angular' },
  { id: '4', name: 'xxxx' }
]
const h6Ele = (
  <ul>
    {arrd.map((item) =>
      <li key={item.id}>
        {item.name}
      </li>)}
  </ul>
)

ReactDOM.render(h6Ele, document.querySelector('#roop'))


const arrq = [
  { id: '1', name: '一剑西来寒九州', salary: '西门各种吹' },
  { id: '2', name: '天生我才必有用', salary: '老子说了算' },
  { id: '3', name: '何必管他东西南北中', salary: '低调' }
]
const h7Ele = (
  <ul>
    {arrq.map((item) =>
      <li key={item.id}>
        <h3>名言:{item.name}</h3>
        <p>作者:{item.salary}</p>
      </li>
    )}
  </ul>
)
ReactDOM.render(h7Ele, document.querySelector('#rooq'))

import './index.css'
const h8Ele = (
  <div className='box'
    // style={{
    //   width: 200,
    //   height: 200,
    //   lineHeight: '200px',
    //   textAlign: 'center',
    //   backgroundColor: 'black',
    //   color: 'white',
    // }}
  >
    一剑西来寒九州
  </div>
)
ReactDOM.render(h8Ele, document.querySelector('#roow'))