码迷,mamicode.com
首页 > 其他好文 > 详细

react学习-创建一个简单的react

时间:2021-06-20 18:15:49      阅读:0      评论:0      收藏:0      [点我收藏+]

标签:简单的   不包含   import   render   meta   alt   turn   就会   number   

创建一个app

npx create-react-app my-app
cd my-app
npm start
  1. 文件目录介绍

技术图片

注意:

  • node_modules包很大,一般不要随便打开,尤其是内存小的电脑

  • 文档要看英文

 

介绍一个简单的react项目

入口文件: /src/index.js

 

1.简单介绍jsx

react项目中用来描述ui的一种方式

2.简单的react项目

  1. 一个简单的react项目

    jsx会把<>自动解析为标签

    // /src/index.js
    ?
    import React from ‘react‘  // 引入react
    import ReactDOM from ‘react-dom‘  // 引入DOM树的渲染函数
    ?
    ReactDOM.render(
     <h3>你好,我是一个简单的react项目</h3>,
     document.getElementById(‘root‘)
    )

    ReactDOM.render()创建一个react实例。它接收两个参数,第一个参数是要插入的标签内容。第二个用于挂载到那个元素上(对应‘/public/index.html’文件)

 

  1. 向组件中插入变量

    通过{}的形式向模板中插入变量或者执行方法(请看下一个例子)

    import React from ‘react‘
    import ReactDOM from ‘react-dom‘
    ?
    const data = ‘我是插入到组件中的变量‘
    ReactDOM.render(
     <h3>你好,我是一个简单的react项目 {data}</h3>,
     document.getElementById(‘root‘)
    )

    技术图片

  2. 在组件中执行函数

    当模板出现换行时,用()将模板包裹起来

    ...
    function formatName(user) {
     return user.firstName + ‘ ‘ + user.lastName
    }
    ?
    const user = {
     firstName: ‘Harper‘,
     lastName: ‘Perez‘
    }
    ?
    const element = (
     <h1>
       Hello, {formatName(user)}!
     </h1>
    )
    ?
    ReactDOM.render(
     element,
     document.getElementById(‘root‘)
    )

 

  1. 根据条件返回你想要的模板

    由于jsx语法可以用在js文件中,可以对模板进行一定的操作

    function getGreeting(user) {
     if (user) {
       return <h1>Hello, {user}!</h1>
    }
     return <h1>Hello, Stranger.</h1>
    }
    ?
    ?
    ReactDOM.render(
     getGreeting(‘lili‘),
     document.getElementById(‘root‘)
    )
  2. 插入属性

    插入一个不包含变量的属性

    const element = <div tabIndex="0"></div>

    插入一个通过变量命名的属性

    const element = <img src={user.avatarUrl + ‘a‘}></img>

    如果用双引号把整个变量的引入括起来,src的值最终就会变成{user.avatarUrl + ‘a‘}

  3. 定时器

    import React from ‘react‘
    import ReactDOM from ‘react-dom‘
    ?
    function tick() {
     const element = (
       <div>
         <h1>Hello, world!</h1>
         <h2>It is {new Date().toLocaleTimeString()}.</h2>
       </div>
    )
     ReactDOM.render(element, document.getElementById(‘root‘))
    }
    ?
    setInterval(tick, 1000)

    在大多数的react应用中,reactDom.render()只执行一次。以上代码中,只会更新 h2标签

    技术图片

 

总结:

  • jsx模板中: 遇到<>按照xml语法解析;遇到{}按照js语法解析--存放变量

react学习-创建一个简单的react

标签:简单的   不包含   import   render   meta   alt   turn   就会   number   

原文地址:https://www.cnblogs.com/lovlyGir/p/14906346.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!