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。

import ReactDOM from 'react-dom' 
import React from 'react'

• React 模块是用来创建 React 组件、定义组件生命周期方法以及处理组件间的通信等。
• ReactDOM 模块则是用来将 React 组件渲染到实际的 DOM 中。它包含了一些方法，比如 render()，用来将组件输出的内容挂载到指定的 DOM 节点上。

const root = ReactDOM.createRoot(
    document.getElementById('root')
)

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

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

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

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

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

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

const App = (<div className='container'>
    <h1 className='title'>
        艾总真帅
    </h1>
</div>)

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

react中的组件化

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

import App from './App'


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

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

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结构是这样的。

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


export default Appheader

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

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新语法结合

import { Component } from "react";

我们首先引入一个Component

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结构如下

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