react js学习笔记-01

react的基本使用

1.什么是react?

用于构造用户界面的javascript库

2.react组件(重要)

3.特点

只有v,view层

4.使用

• 4.1npm i react react-dom (web页面用这两个指令,前面是主要依赖包,)
• 4.2引入js文件
• 4.3创建react元素

参数一:元素的名称
参数二:元素的属性
参数三:元素的子节点

5.渲染react元素

参数一:要渲染的react元素
参数二:挂载点

下载react依赖包

• npm init -y
• npm i
• npm i react react-dom

使用react脚手架初始化项目

• npx create-react-app my-pro (my-pro项目名称)
• npm cache clear --force(强制清除缓存)如果下载不成功,执行,再下
• npm start(跑项目)
• 入口文件是src文件夹里的index.js
• script浏览器里面直接使用的话,是用umd格式的库

初始化react项目

• index.js文件

import React from "react";
import ReactDOM from "react-dom";

// 1.创建react元素,(创建react对象,--虚拟dom(对象))
const p1 = React.createElement("p", null, "我是一个p标签");
const p2 = <h1>我是用jsx语法创建的</h1>; //这个语法相对于简洁

// 2.渲染react元素到页面上面去 render
ReactDOM.render(p1, document.getElementById("root")); //不生效
ReactDOM.render(p2, document.getElementById("root"));
// 用两个,只会渲染下面的,会覆盖上面的

JSX语法

1什么是JSX?基本使用

• JSX = JavaScript XML,表示在js代码中写xml(html)格式的代码
• 使用JSX创建react元素

const title = <h1> hello react JSX </h1>

• 渲染react元素

ReactDOM.render(title,document.getElementById("root"))
简写
ReactDOM.render(title,("root"))