React——01安装脚手架以及渲染标签

最新推荐文章于 2024-06-21 00:11:24 发布

Southern Wind

最新推荐文章于 2024-06-21 00:11:24 发布

阅读量522

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/nanchen_J/article/details/121752928

版权

react 专栏收录该内容

5 篇文章 1 订阅

订阅专栏

本文介绍了React的基本使用，包括通过`React.createElement`创建虚拟DOM，使用`ReactDOM.render`进行渲染，以及如何使用npx创建React应用。详细讲解了JSX语法，包括属性命名规则和组件的编写，如函数组件和类组件。同时，展示了如何遍历数据创建列表元素，以及事件绑定的三种方式。最后，通过示例说明了状态管理和更新状态的方法，并演示了按钮点击事件的处理。

摘要由CSDN通过智能技术生成

基本使用

npm i react react-dom

react包核心提供创建元素、组件等功能

react-dom包提供dom相关功能

脚手架安装

初始化项目命令 npx create-react-app 项目名

npx create-react-app object

创建React元素

const vdom = React.createElement('p',null,'脚手架');

渲染元素

ReactDOM.render(vdom,document.querySelector('#root'));

运行到浏览器

npm start

JSX

JavaScript XML 用js写html

jsx不是标准的es语法，浏览器不能直接识别，可以借助babel这样的工具编译处理

语法

1 不能用引号

2 属性名用驼峰命名法 class->className tabindex->tabIndex for->htmlFor

3 没有子节点的React元素可与使用/>结束

4 jsx语法结构推荐使用小括号包裹起来

函数组件的写法：

function Hello(){
    return (<h1>Hello 函数组件</h1>)
}
ReactDOM.render(<Hello />,document.querySelector('#root'))

1、函数名一定要大写，否则

2、函数必须要有返回值，否则

3、返回值为null表示不渲染任何内容

箭头函数写法：

const Hello = ()=>{
    return (<h1>Hello 函数组件</h1>)
}
ReactDOM.render(<Hello />,document.querySelector('#root'))

效果如下

遍历li标签

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

const data = [
    {
        id:1,
        name: 'zs'
    },
    {
        id: 2,
        name: 'lisi'
    },
    {
        id: 3,
        name: 'wangwu'
    }
];

let ul = (
    <ul>
        {data.map(item=> <li className="demo" key={item.id} style={ {color: 'red',backgroundColor: '#00f'} }>{item.name}</li>)}
    </ul>
)

ReactDOM.render(ul,document.querySelector('#root'));

类组件

1、类名称必须首字母大写

2、类组件继承Reaact.Component

3、类组件必须提供render()

4、必须要有返回值

/* 类组件 */
class Hello extends React.Component{
    render(){
        return (<h1>Hello 函数组件!!</h1>)
    }
}
ReactDOM.render(<Hello />,document.querySelector('#root'))
//ReactDOM.render(<Hello></Hello>,document.querySelector('#root'))

组件化写法：

// 创建Hi组件
import React from "react";

class Hi extends React.Component{
    render(){
        return(<h1>Hi,everyone</h1>)
    }
}
// 导出
export default Hi

在index.js中引入

import Hi from "./Hi";
ReactDOM.render(<Hi />,document.querySelector('#root'))

渲染点击事件

第一种写法：

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

// 事件绑定
class App extends React.Component{
    render(){ 
        return (<input type="button" onClick={()=>{
            console.log('已经被点击！');
        }} value="按钮"/>)
    }
}
ReactDOM.render(<App></App>,document.querySelector('#root'))

第二种写法：放在原型的实例化上面

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

// 事件绑定
class App extends React.Component{
    handleClick() {
        console.log('已经被点击！');
    }
    render(){ 
        return (<input type="button" onClick={this.handleClick} value="按钮"/>)
    }
}
ReactDOM.render(<App></App>,document.querySelector('#root'))

第三种写法

function App() {
    function handleClick() {
        console.log('我被点击了');
    }
    return (<input type="button" onClick={this.handleClick} value="按钮"/>)
}
ReactDOM.render(<App></App>,document.querySelector('#root'))

import React from "react";
import ReactDOM  from "react-dom";
/* class App extends React.Component{
    constructor() {
        super()
        // 初始化状态
        this.state = {
            num: 0
        }
    }
    render(){
       return (<div>有状态组件</div>)
    }
} */
 
class App extends React.Component{
    state = {
        num: 100,
    }
    render(){
       return (<div>有状态组件  <button onClick={()=>{
        //    只能通过setState来修改数据
           this.setState({
               num: this.state.num +1
           })
       }}>+1</button>{this.state.num}<button onClick={()=>{
        //    只能通过setState来修改数据
           this.setState({
               num: this.state.num -1
           })
       }}>-1</button></div>)
    }
}
ReactDOM.render(<App/>,document.querySelector('#root'))