项目前期准备
按照以上如何搭建React项目文章搭建一个简易的React项目。
笔者以开发一个项目来学习react的相关知识。
会持续更新项目 基于React开发的用户管理系统 react-user-system
删除项目中
src
目录下面除去index.js
和index.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
提供操作DOM
的React
扩展库(以react-
开头的基本都是react
的扩展库)
PS: 项目中的
jsx
语法是使用babel
转换为纯js的,babel
也会转译ES6
语法。