使用1、

// js文件,第一部引入React(大写,不然保错)
import React from 'react'
// 创建数组
const arrList = Array.from({length:60},(_item,index)=>index)
const arr = arrList.map(item => <div key={item}>{`${item}秒是${item%2==0?'偶数':'奇数'}`}</div>)
const ele = <div>{arr}</div>
export default ele

  

// index中的代码
// 引入
import React from 'react'
import {render} from 'react-dom'
// import ele from './day-01-插值'
// import ele from './day-01-条件渲染'
import ele from './01-列表渲染'
// react元素
// const ele = <div>hello world</div>
// 挂载点
let box = document.querySelector('#app')
console.log(box)
// 挂载
render(ele,box)

  

// package.json
"scripts": {
"start": "parcel src/index.html",
"test": "echo \"Error: no test specified\" && exit 1"
},

  

React-基础总结的更多相关文章

  1. react基础(1)

    在 react入门系列 里面,介绍了一些react的基础知识,在react基础部分,会结合手脚架工具进行更多的总结. 关于webpack我在这里就不讲解了,有需要的小伙伴可以自己去百度一下学习资料,我 ...

  2. react基础(2)

    react基础(1):介绍了如何创建项目,总结了JSX.组件.样式.事件.state.props.refs.map循环,另外还讲了mock数据和ajax 还是用 react基础1 里创建的项目继续写案 ...

  3. react基础语法(五) state和props区别和使用

    props的验证: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

  4. react基础用法二(组件渲染)

    react基础用法二(组件渲染) 如图所示组件可以是函数 格式:function 方法名(){ return <标签>内容</标签>} 渲染格式: <方法名 />  ...

  5. react基础用法一(在标签中渲染元素)

    react基础用法一(渲染元素) 如图所示最简单的变量使用方法 格式 let 变量名称 = 赋值: 渲染格式直接用 {变量名称} 就可以直接渲染到页面 如图所示第二种渲染方法 格式 const 变量名 ...

  6. AntDesign(React)学习-3 React基础

    前面项目已经建起来了,但是没有React基础怎么办,从头学习,这个项目使用的是基于React16.X版本的几种技术集成,那么我们就从网上找一些相关的资料进行研究,我的习惯是用到哪学到哪. 一.先看一些 ...

  7. React 基础入门,基础知识介绍

    React不管在demo渲染还是UI上,都是十分方便,本人菜鸟试试学习一下,结合阮一峰老师的文章,写下一点关于自己的学习react的学习笔记,有地方不对的地方,希望各位大牛评论指出: PS:代码包下载 ...

  8. React基础语法学习

    React主要有如下3个特点: 作为UI(Just the UI) 虚拟DOM(Virtual DOM):这是亮点 是React最重要的一个特性 放进内存 最小更新的视图,差异部分更新 diff算法 ...

  9. React 基础入门

    React 起源于 Facebook 内部项目,是一个用来构建用户界面的 Javascript 库,相当于MVC架构中的V层框架,与市面上其他框架不同的是,React 把每一个组件当成了一个状态机,组 ...

  10. react基础

    上一篇文章主要是记录了自己是如何创建react项目的,今天则主要是总结一下react中的一个基础入门知识,包括数据定义和绑定.属性绑定.数组循环等等. 组件继承和挂载 当我们使用脚手架或者命令行创建一 ...

随机推荐

  1. pytest4-单文件使用fixture(Fixtures as Function arguments)

    Fixtures as Function arguments (fixture作为函数参数传入)Test functions can receive fixture objects by naming ...

  2. 解决git报错“The file will have its original line endings in your working directory”的方法

    在执行命令 git commit --all -m  '说明' 时报错“The file will have its original line endings in your working dir ...

  3. Django框架简介与使用注意事项

    一.Django框架简介 MVC框架和MTV框架 MVC框架 MVC,全名是Model View Controller,是软件工程中的一种软件架构模式,把软件系统分为三个基本部分:模型(Model). ...

  4. Leetcode(4)寻找两个有序数组的中位数

    Leetcode(4)寻找两个有序数组的中位数 [题目表述]: 给定两个大小为 m 和 n 的有序数组 nums1 和* nums2. 请你找出这两个有序数组的中位数,并且要求算法的时间复杂度为 O( ...

  5. 设计模式(七)Builder模式

    Builder模式,从这个名字我们可以看出来,这种设计模式就是用于组装具有复杂结构的实例的. 下面还是以一个实例程序来解释这种设计模式,先看实例程序的类图. 这里为了调试方便,只实现其中一个功能Tex ...

  6. 四元数(Quaternion)

    从应用角度说一下unity Quaternion,Quaternion是四元数,百度相关资料可能找到的都是一些大牛给你搞个矩阵云云,给你讲解四元数.在此只是从应用角度讲一讲.最简单理解四元数对应一个向 ...

  7. axio安装及使用

    先安装 npm install axios --save 再导入 import $ from "jquery"; import axios from "axios&quo ...

  8. SpringBoot与MybatisPlus3.X整合之通用枚举(十二)

    一 通用枚举 解决了繁琐的配置,让 mybatis 优雅的使用枚举属性! 自3.1.0开始,可配置默认枚举处理类来省略扫描通用枚举配置 默认枚举配置 升级说明: 3.1.0 以下版本改变了原生默认行为 ...

  9. 这一次,终于系统的学习了 JVM 内存结构

    最近在看< JAVA并发编程实践 >这本书,里面涉及到了 Java 内存模型,通过 Java 内存模型顺理成章的来到的 JVM 内存结构,关于 JVM 内存结构的认知还停留在上大学那会的课 ...

  10. [Hadoop]Hive-1.2.x安装配置+Mysql安装

    HIve的元数据存储在mysql中,需要配置与MySQL建立连接,除了安装MySQL外还要安装连接的jar包:mysql-connector-java-5.1.47.tar.gz   安装环境:Cen ...