React菜鸟起飞记:从零开始的异想编程之旅

前言

React是一个由Facebook开发的用于构建用户界面的JavaScript库。它通过组件化开发的方式让前端开发变得更加简洁和高效。React采用虚拟DOM技术来实现页面的高效更新,使得用户界面的渲染速度得到显著提升。同时,React的单向数据流和声明式编程风格让状态管理更加可控和可预测。它还支持服务器端渲染,使得页面在SEO和性能优化方面有了更好的表现。React的生态系统丰富,拥有大量的第三方库和工具,能够帮助开发者快速构建复杂的Web应用和跨平台应用。

准备工作

npm i -g create-react-app

我们首先全局安装创建react需要的工具,这条命令是用来全局安装 create-react-app 工具的。create-react-app 是一个官方提供的用于快速搭建 React 应用的命令行工具。通过这个工具,你可以方便地创建一个新的 React 项目。

create-react-app my-react/创建react文件的名字

命令 create-react-app my-react 将会在当前目录下创建一个名为 my-react 的新的 React 应用程序。这个应用程序的基本结构和配置将由 create-react-app 工具自动完成,包括所需的依赖项和一些基础配置。

npm run satrt

这段命令会给我们弹出react文件运行的端口页面,和vue是类似的。

基础知识了解

我们的主要操作是在src文件下进行的,我们这次重点讲解我们的src文件。一个完整的react文件由css和jsx(或js)组成,react有一个特点就是html可以直接写在js里面,因此文件名也叫jsx。

javascript 复制代码
import ReactDOM from 'react-dom' 
import React from 'react'
  • React 模块是用来创建 React 组件、定义组件生命周期方法以及处理组件间的通信等。
  • ReactDOM 模块则是用来将 React 组件渲染到实际的 DOM 中。它包含了一些方法,比如 render(),用来将组件输出的内容挂载到指定的 DOM 节点上。
javascript 复制代码
const root = ReactDOM.createRoot(
    document.getElementById('root')
)

我们首先通过ReactDOM去获取到我们public里html的根节点便于我们挂载,最终我们的文件都会在此被编译。

php 复制代码
const App = React.createElement('h1',
    { id: 'title', className: 'tit' },
    '艾总真帅'
)
root.render(App)

我们首先在index.js文件中敲下这段代码,React创建一个新的节点,然后依次标签种类,属性,内容,这样我们的第一个react文件就成功运行啦!

php 复制代码
const App = React.createElement('div', { className: 'container' },
    React.createElement('h1', { className: 'title' }, '艾总好帅')
)

当然我们也可以内容里挂载新的标签。

因为我们讲过,react最大的特点是js文件里可以直接书写html,因此,下面这种方法也是可以的。

javascript 复制代码
const App = (<div className='container'>
    <h1 className='title'>
        艾总真帅
    </h1>
</div>)

我们会发现,结构和之前是一模一样的。

react中的组件化

我们接下来简单了解一下react中的组件化。

javascript 复制代码
import App from './App'


root.render(<div>
    <App name='艾总' />
</div>)

我们首先引入APP.js文件,然后进行挂载。

javascript 复制代码
import './App.css'
// 函数组件
const App = ({ name }) => {
    const n = '你好'
    return (<div className='container'>
        <h1 className='title'>
            {n}hello {name}
        </h1>
    </div>)
}

export default App

我们的App.js文件里引入一个简单的css样式文件,然后定义一个App组件,里面接收我们父组件传过来的值这里的话是一个对象属性name属性值为艾总。因此我们对它进行解构操作,然后返回一个html结构,最后抛出这个函数体。

最后我们的html结构是这样的。

javascript 复制代码
const Appheader = (props) => {
    const { name } = props
    return (
        <header className="app-header">
            <h1 className="title">{name}</h1>
        </header>
    )
}


export default Appheader

我们接下来再创建一个组件,然后进行抛出,这里作为APP.js的子组件。

javascript 复制代码
import Appheader from './components/Appheader'
const App = (props) => {
    const { name } = props
    return (<div className='container'>
        <Appheader name={name} />
    </div>)
}

export default App

我们可以发现,我们引入了子组件,然后接收父组件传来的值解构之后又传递给了子组件。然后抛出给父组件,也就是我们最大的index.js组件。最后我们的html结构是这样子的。

到这里我们的react以及组件传值相关的基础就都差不多啦!

react与es6新语法结合

javascript 复制代码
import { Component } from "react";

我们首先引入一个Component

javascript 复制代码
class AppHeader extends Component {
    render() {
        const { name } = this.props
        const { emoji } = this.state
        return (
            <header className="app-header">
                <h1 className="title">类式组件{name}{emoji}</h1>
            </header>
        )
    }
    constructor(props) {
        super(props)
        // 自有状态
        this.state = {
            emoji: '😀'
        }
        setInterval(() => {
            this.setState({
                emoji: this.state.emoji === '😊' ? '😂' : '😊'
            })
        }, 2000)
    }
}

export default AppHeader;

然后我们直接继承Component,这就代表AppHeader是一个组件了,我们可以抛出,然后render()里面最终返回的内容是我们的组件内容,我们的render里解构了name和emoji,是这个组件自有的内容。首先我们在construct这个相当于老版本的构造函数里去继承父组件的props,这样才能给自己使用,然后定义emoji变量,设置一个定时器去进行定期更改。

最后我们的html结构如下

展示效果如下,里面的表情是会定期更改的哦。

相关推荐
September_ning1 小时前
React.lazy() 懒加载
前端·react.js·前端框架
web行路人1 小时前
React中类组件和函数组件的理解和区别
前端·javascript·react.js·前端框架
番茄小酱0011 小时前
Expo|ReactNative 中实现扫描二维码功能
javascript·react native·react.js
Rattenking3 小时前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
熊的猫5 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
小牛itbull9 小时前
ReactPress:重塑内容管理的未来
react.js·github·reactpress
FinGet20 小时前
那总结下来,react就是落后了
前端·react.js
王解1 天前
Jest项目实战(2): 项目开发与测试
前端·javascript·react.js·arcgis·typescript·单元测试
AIoT科技物语2 天前
免费,基于React + ECharts 国产开源 IoT 物联网 Web 可视化数据大屏
前端·物联网·react.js·开源·echarts
初遇你时动了情2 天前
react 18 react-router-dom V6 路由传参的几种方式
react.js·typescript·react-router