React脚手架安装初始化项目

脚手架安装初始化项目

npx create-react-app my-app

使用react步骤

• 1.导入react
  import React from "react"
import ReactDOM from "react-dom"

• 2.创建react元素
  const title = React.createElement('h1', null,'hello React!!!')

• 3.渲染react元素
  ReactDom.render(title, document.getElementById('root'))

使用JSX语法

• 1.创建react元素

• 注意 :推荐使用小括号包裹JSX从而避免JS中自动插入分号陷阱

 const title = (
  // 没有子节点的react元素可以用/>结束
  // 特殊的属性名:class->className,for->htmlFor,tabindex->tabIndex
  <h1 className="tit"> 
  hello JSX 
  // 如果没有子节点可以写单标签
  <span />
  </h1>
)

• 2.使用reactDOM.render()方法渲染react元素到页面中
  ReactDOM.render(title, document.getElementById('root'))

JSX中使用js表达式的注意点

• 单大括号可以使用任意的js表达式
• JSX自身也是JS表达式

• JS中的对象是一个例外,一般只会出现在style属性中
• 不能在{}中出现的语句if/for等