react-01

const App = (props) => {
    return (
        <div>
            <h1>Welcome {props.title}!!</h1>
            <p>优秀的{props.title}</p>
        </div>
    )
}

ReactDOM.render(
    <App title="1901"/>,
    document.querySelector('#root')
)

原理如下：

const app：这种方式可以理解为创建了一个简单的react元素

react中只有一个语法就是花括号{}

return中如果有多行，则使用（）防止报错 => 把括号里的内容都当做一个域值类

只要在jsx里要插入js的代码，就加一层花括号即可，注释也是js

创建类组件

使用类来继承React下的Component

要使用this.props.title

这样写会报错，因为app不是element

所以要调用实例上的render方法

//定义组件的第二种方法：使用类
class App extends React.Component {
    render() {
        return (
            <div>
                <h1>类组件!!</h1>
                <p>{this.props.title }</p>
            </div>
        )
    }
}

const app = new App({
    title:'class'
}).render()

render(
    app,
    document.querySelector('#root')
)

在react16以前，使用这种方法来创建一个类组件，现在已经运行不起来了

React.createClass({
    render() {
        return <h1>xxx</h1>
    }
})

render

是react dom 提供的一个方法，这个方法通常只会用一次

组件嵌套

JSX原理

底层编译原理

import React from "react";
import ReactDom from "react-dom";

//这里是使用类的形式创建的组件
class App extends React.Component {
    render() {
        return (
            React.createElement(
                'div',
                {
                    className: 'app',
                    id: 'appRoot'
                },
                React.createElement(
                    'h1',
                    {
                        className:'title'
                    },
                    'JSX原理'
                ),
                React.createElement(
                    'p',
                    null,
                    '类组件是继承React.Component的'
                )
            )
        )
    }
}

//这里是一个表示虚拟DOM树的方式
const appVDom = {
    tag: 'div',
    attrs: {
        className: 'app',
        id: 'appRoot'
    },
    children: [
        {
            tag: 'h1',
            attrs: {
                className: 'title',
            },
            children: [
                'JSX原理'
            ]
        }, {
            tag: 'p',
            attrs: null,
            children: [
                '类组件是继承React.Component的'
            ]
        }
    ]
}

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

React.createElement是一个方法，用于创建元素，可以有很多的参数，但是前两个是固定的，第一个可以理解为标签名，第二个可以理解为标签的属性，剩下的就继续写更多的子元素。

React.createElement(type，[props]，[...children])

组件中的样式

render() {
        return (
            <div>
                <h1 style={
  {color:"purple"}}>元素中的样式</h1>
            </div>
        )
    }

or

class App extends Component{
    render() {
        const style = {color:'purple'}
        return (
            <div>
                <h1 style={style}>元素中的样式</h1>
            </div>
        )
    }
}

两个花括号：第一个表明要在JSX中写JS，第二个表明要写一个对象

Classnames三方包

<li className={className('a',{'b':true,'c':false})}>要动态添加不同的className就可以使用第三方包：classNames</li>

styled-component三方包

独立css内容

import { render } from "@testing-library/react";
import React, {ReactDom,Component} from "react";
import './index.css'
import className from "classnames";
import styled from 'styled-components'

const Title = styled.h1`
    color:green
`

class App extends Component{
    render() {
        const style = {color:'purple'}
        return (
            <div>
                <Title>元素中的样式</Title>
                <ol>
                    <li style={style}>使用style内联创建</li>
                    <li className="has-text-red">使用class的方式，但是在react中class要写成className</li>
                    <li className={className('a',{'b':true,'c':false})}>要动态添加不同的className就可以使用第三方包：classNames</li>
                    <li>styled-component的使用</li>
                </ol>
            </div>
        )
    }
}

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

react目录

index.js是入口文件

App.js整体的单一应用的入口文件（vscode插件中：rfc创建函数式组件，rcc创建继承式组件）

组件的return必须只有一个根元素

如果使用div的话就会额外生成一层标签，可以使用<Fragment><Fragment/> => 用来展示空标签，也可以直接写空标签<></>

最低0.47元/天解锁文章

曲调响起琴声悠扬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react-01

webpack本质上webpack是一个现在JS应用程序的静态模块打包器，当webpack处理应用程序时，会递归地构建一个依赖关系图，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle入口：指示webpack应用使用哪个模块来作为构建内部依赖图的开始输出：webpack在哪里输出它所创建的bundle以及如何命令这些文件loader：webpack只能理解JS和JSON文件，loader让webpack能够去处理其他类型的文件并将他们转换为有效模块以供应用程序使用
复制链接

扫一扫

专栏目录