react入门教学

最新推荐文章于 2023-02-24 15:52:58 发布

.随遇则安

最新推荐文章于 2023-02-24 15:52:58 发布

阅读量1.1k

点赞数 2

文章标签： js react

本文链接：https://blog.csdn.net/m0_59324574/article/details/121656961

版权

今天给大家讲解一下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>

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

.随遇则安

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react入门教学

今天给大家讲解一下react入门需要注意的，脚手架的话就不用了就是看一些基础的问题先来把码云中的线上仓库的需要用到的文件拿一下，地址如下https://gitee.com/xzx1314/react-text/tree/dev/拿到这三个文件了以后，新建一个index.html文件把这三个文件引入进去，顺序必须是先把代码jsx解析为js <script src="./js/browser.js"></script> 里面放了一
复制链接

扫一扫