react入门教学

2023-11-22 14:59:09

今天给大家讲解一下react入门需要注意的，脚手架的话就不用了就是看一些基础的问题

先来把码云中的线上仓库的需要用到的文件拿一下，地址如下
https://gitee.com/xzx1314/react-text/tree/dev/

拿到这三个文件了以后，新建一个index.html文件

把这三个文件引入进去，顺序必须是

     先把代码jsx解析为js
     <script src="./js/browser.js"></script>
     里面放了一些js的组件，方法
     <script src="./js/react.js"></script>
     把react里面创建的元素添加到页面上
     <script src="./js/react-dom.js"></script>

react的代码审核比较严格，所以一定要按照他的要求来

比如说

1.我们平时经常用到的添加个类名class="about"但是到了react里面就是className="about"

2.还有for在react里面就是htmlFor

<body>
    <script type="text/babel">
        let root = document.querySelector("#root")
        // 则合理需要注意，这里添加的元素只可以有一个父级
        let oDiv = <div classNAme="box"><div className="a">内容一</div><div>内容二</div></div>
        ReactDOM.render(oDiv,root)
    </script>
</body>

最后我们来看一下react组件是如何添加的

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/browser.js"></script>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
</head>
<style>
    .a {
        color: aqua;
    }
</style>

<body>
    <script type="text/babel">
       window.onload=function(){
           class Comp extends React.Component{
               constructor(...args){
                    super(...args)
               }
               render(){
                   return <div>我是真的爱你</div>
               }
           }
           let root = document.querySelector("#root")
           ReactDOM.render(<Comp/>,root)
       }
    </script>
</body>
<div id="root"></div>

</html>

如果说是加一个数组的话就是

constructor里面放属性，react组件也叫类组件，super继承所有的方法

类组件的名字必须以大写字母开头

  <script type="text/babel">
        window.onload=function(){
        let root = document.querySelector("#root")
           class Comp extends React.Component{
               constructor(...args){
                    super(...args)
               }
               render(){
                   let arr=[{
                       id:"a1",tit:"我是大哥"
                   },{
                       id:"a2",tit:"我是二哥"
                   },]
                   let Arr = arr.map(item=><div key={item.id}>{item.tit}</div>)
                   return <div>{Arr}</div>
               }
              
           }
           ReactDOM.render(<Comp/>,root)
       }
    </script>

过来就是react的事件了也和原来的不一样

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    //这里引入文件的顺序是不可以变的
    <script src="./js/browser.js"></script>
    <script src="./js/react.js"></script>
    <script src="./js/react-dom.js"></script>
</head>
<style>
</style>

<body>
    <script type="text/babel">
        window.onload=function(){
           class Comp extends React.Component{
               constructor(...args){
                    super(...args)
                    //这边定义的是全局变量
                    state({
                        a:12
                    })
               }
               fn(){
                   //使用的话必须是this.setState.state({})这种格式
                   this.setSatte.state({
                       a:5
                   })
               }
               render(){
                   
                   return <div>
                        <div onClick={this.fn.bind(this)}>点击</div>
                    </div>
               }
           }
           let root = document.querySelector("#root")
           ReactDOM.render(<Comp/>,root)
       }
    </script>
</body>
<div id="root"></div>

</html>

以上就是今天分享的小知识，关注不迷路

码农公寓

相关文章