react入门教学

2021-12-01 16:33:21 阅读：125 来源： 互联网

标签：... 入门 render args 教学 react let root

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

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

标签：...,入门,render,args,教学,react,let,root
来源： https://blog.csdn.net/m0_59324574/article/details/121656961

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react入门教学