前言
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结构如下
展示效果如下,里面的表情是会定期更改的哦。