实战学习 React 第1天 React的基础使用

项目前期准备

按照以上如何搭建React项目文章搭建一个简易的React项目。
笔者以开发一个项目来学习react的相关知识。
会持续更新项目 基于React开发的用户管理系统 react-user-system

删除项目中src目录下面除去index.jsindex.css以外的文件,开始我们的React探索之路

开发一个简单的页面

src/index.js 文件

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

// 渲染页面需要做两件事

// 1. 创建虚拟DOM元素对象
var vDom = <h1>Hello Word !</h1>; // jsx语法,不是自字符串
// 方法2 var vDom = React.createElement("h1", { id: "test" }, "Hello Word !"); 
// 参数分别代表 标签名,标签属性,标签内容

// 2. 将虚拟DOM渲染到页面真实DOM中
ReactDOM.render(vDom, document.getElementById("root"));// root节点对应public/index.html中的节点

运行结果,jsx语法被成功的渲染成了真实DOM。jsx语法的介绍:官方jsx语法使用讲解
在这里插入图片描述
补充介绍一下使用到的几个Js库

  • react 是React的核心库
  • react-dom.js 提供操作DOMReact扩展库(以react-开头的基本都是react的扩展库)

PS: 项目中的jsx语法是使用 babel转换为纯js的,babel也会转译ES6语法。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值