从0到1教你学会 react

Posted 2022-12-05 X可乐

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了从0到1教你学会 react相关的知识，希望对你有一定的参考价值。

文章目录

React 是什么
组件是什么
组件开发的优势
React 开发环境搭建
- 基于 webpack 搭建
- 基于脚手架工具搭建
JSX
组件的创建
- 创建函数式组件
- 创建类式组件
组件传参
组件布局实例
组件状态
受控表单
非受控表单

React 是什么

React 是 facebook 推出的用于构建用户界面的前端 JS 框架
https://reactjs.org/
React 使用组件构建用户界面

组件是什么

一块区域，包含了 html css 以及 js

组件开发的优势

将一个庞大复杂的应用程序拆分成多个独立单元
组件之间互相独立，有利于应用程序的维护
组件可以重用，一次编写多地复用

React 开发环境搭建

基于 webpack 搭建

package.json


  "name": "code",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": 
    "test": "echo \\"Error: no test  specified\\" && exit 1"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": 
    "@babel/core": "^7.13.8",
    "@babel/preset-env": "^7.13.9",
    "@babel/preset-react": "^7.12.13",
    "babel-loader": "^8.2.2",
    "html-webpack-plugin": "^4.5.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "webpack": "^4.46.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.2"

webpack.config.js

const path = require('path')
const HtmlWebpackPlugin = require   ('html-webpack-plugin')

module.exports = 
    // 开发模式
    mode: 'development',
    // 不需要调试
    devtool: 'none',
    // 入口文件
    entry: './src/index.js',
    // 出口文件
    output: 
        // 产出文件名
        filename: 'main.js',
        // 产出路径
        path: path.resolve('dist')
    ,
    // 服务器
    devServer: 
        // 端口号
        port: 3000,
        // 热更新
        hot: true
    ,
    // 配置 loader
    module: 
        rules: [
            
                test: /\\.js|jsx$/,
                // 不匹配 node_modules
                exclude: /node_modules/,
                use: [
                    
                        loader:     'babel-loader',
                        options: 
                            presets:    ['@babel/  preset-env',  '@babel/ preset-react'    ]
                        
                    
                ]
            
        ]
    ,
    // 配置 plugins
    plugins: [
        new HtmlWebpackPlugin(
            template: './src/index.html'
        )
    ]

index.html
```
<div id="root"></div>
```

index.js

import React from 'react'
import render from 'react-dom'

// 自定义组件
function App () 
    return <div>React</div>


render(<App />, document.querySelector  ('#root'))

基于脚手架工具搭建

安装脚手架工具：npm i create-react-app -g
创建指令：create-react-app 项目名

JSX

JSX 基础语法

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

动态显示数据

const name = "GD"
function App() 
  return (
    <div>
      <p>name</p>
      <p>name</p>
    </div>
  );

export default App;

调用方法（自定义 + 内置）

function sayHi () 
  return '大家好'

function App() 
  return (
    <div>
      <p>sayHi()</p>
    </div>
  );

export default App;

支持表达式（支持三元表达式，不支持 if 语句）

const flag = false
function App() 
  return (
    <div>
      <p>flag ? '以登录' : '未登录'</p>
    </div>
  );

export default App;

模板字符串

const name = "GD"
function App() 
  return (
    <div>
      <p>`hello, $name`</p>
    </div>
  );

export default App;

注释

function App() 
  return (
    <div>
      <p>/** 这是注释的内容 */</p>
    </div>
  );

export default App;

对象形式的数据

const obj = 
  name: 'GD',
  age: 18

function App() 
  return (
    <div>
      <p>JSON.stringify(obj)</p>
    </div>
  );

export default App;

JSX 本身就是一个表达式

const name = <div>拉勾教育</div>

function App() 
  return (
    <div>
      <p>name</p>
    </div>
  );


export default App;

JSX 添加属性
- 字符串属性，直接用双引号包裹
- 动态属性

const name = 100
function App() 
  return (
    <div>
      <p title="自定义标题">添加字符串属性</p>
      <p title=name>添加动态属性</p>
    </div>
  );

export default App;

JSX 添加子元素

function App() 
  return (
    <div>
      /* 这里书写的元素就是子元素 */
    </div>
  );

export default App;

JSX 只能有一个父元素即使是单标签，也要正确的闭合

function App() 
  return (
    <div>
      <img />
    </div>
  );

export default App;

JSX 事件操作

事件绑定

const handler = () => 
  console.log('执行了');


function App() 
  return (
    <div>
      <button onClick=handler>点击触发</button>
    </div>
  );


export default App;

事件监听传参

const handler = (a, b) => 
  console.log(a + b);

function App() 
  return (
    <div>
      <button onClick=() => handler(1, 2)>点击1</button>
      <button onClick=handler.bind(null, 1, 2)>点击2</button>
    </div>
  );

export default App;

获取事件对象

const handler = (ev) => 
  console.log(ev);

function App() 
  return (
    <div>
      <button onClick=handler>触发1</button>
      <button onClick=(ev) => handler(ev)>触发2</button>
      <button onClick=handler.bind(null)>触发3</button>
    </div>
  );

export default App;

const handler = (a, b, ev) => 
  console.log(a);
  console.log(b);
  console.log(ev);

function App() 
  return (
    <div>
      <button onClick=handler.bind(null, 1, 2)>触发3</button>
    </div>
  );

export default App;

功能总结
- 事件绑定
  - 驼峰命名直接添加=事件监听的名称
- 事件监听传参
  - 利用箭头函数内部调用事件监听的时候传递实参
  - 利用 bind 方法返回一个新的函数在事件发生时调用，此时也可以传递参数
- 获取事件对象
  - 默认情况下不需要接受参数，且直接执行事件监听，此时他的第一个参数默认是 ev
  - 利用箭头函数执行事件监听的时候，需要通过箭头函数将 ev 对象传递给事件监听函数进行使用
  - 利用 bind 方法执行时，如果有传参那么最后一个参数默认就是 ev

JSX遍历数据

JSX 当中可以直接将数组中的数据解构

const arr = [1, 2, 3]
function App() 
  return (
    <div>
      arr
    </div>
  );

export default App;

数组里边的项为对象时可以作以下修改

const arr = [
  
    id: 0,
    name: 'GD',
    age: 18
  ,
  
    id: 1,
    name: 'XGD',
    age: 8
  
];
function App() 
  const str = arr.map(item => 
    return (
      <li key=item.id>
        <span> item.name </span>
        <span> item.age </span>
      </li>
    )
  )
  return <ul> str </ul>

export default App;

JSX 添加内联样式

设置样式的时候，应该将键值对放置于

const styleObj = 
  width: 100,
  height: 100,
  backgroundColor: 'green'
;
function App() 
  return <div>
    <div style=width: '100px', height: '100px', background: 'red'> 样式处理1 </div>
    <div style=styleObj> 样式处理2 </div>
  </div>

export default App;

内联样式默认无法支持伪类及媒体查询样式设置；如需使用需借助第三方的包帮助 — radium

导入 Radium 函数将当前需要支持伪类操作的组件包裹之后再导出

import Radium from 'radium'

const styleObj = 
width: 100,
height: 100,
backgroundColor: 'green',
':hover': 
    backgroundColor: 'yellow'


function App() 
return <div>
    <div style=width: '100px', height: '100px', background: 'red'> 样式处理1 </div>
    <div style=styleObj> 样式处理2 </div>
</div>

export default Radium(App);

通过 Radium 设置媒体查询时，需要将当前组件所渲染的地方使用 StyleRoot 包裹

<!-- App.js -->
import Radium from 'radium'
const styleObj = 
    width: 100,
    height: 100,
    backgroundColor: 'green',
    ":hover": 
        backgroundColor: 'yellow'
    ,
    "@media (max-width: 1000px)": 
        width: 300
    

function App() 
    return <div>
        <div style=width: '100px', height: '100px', background: 'red'> 样式处理1 </div>
        <div style=styleObj> 样式处理2 </div>
    </div>

export default Radium(App);

<!-- index.js -->
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import StyleRoot from 'radium'

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

案例

import Radium from 'radium'
const ButtonStyle = 
    base: 
        width: 150,
        height: 40,
        fontSize: 20,
        background: '#ffff'
    ,
    login: 
        background: 'green'
    ,
    logout: 
        background: 'orange'
    


const isLogin = false

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


export default Radium(App);

JSX 添加外联样式

全局外联样式

所有组件当中都可以直接进行使用
再添加 class 时，需要使用 className

// App.js
function App() 
  return <div className='box'>
    外联样式 
  </div>

export default App;

// Test,js
import React from 'react'
function Test () 
    return <div className='box'>Test.js</div>

export default Test

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import Test from './test'
import './style.css'

ReactDOM.render(
    <React.StrictMode>
        <App />
        <Test />
    <从0开始手把手教你使用React Hooks开发答题App
 从完全零基础教你用Python开饭一款打飞机的游戏！是个人就能学会
 从0到1教你设计业务系统
 教你快速学会连接查询
 教你快速学会连接查询
 教你快速学会连接查询