学习react(two day)创建项目,接触组件

146 阅读2分钟

React 项目的创建

  • 运行 cnpm i react react-dom -S 安装包
  • 在项目中导入react和react-dom这两个包
  • 使用JS创建虚拟DOM节点
  • 使用ReactDOM把元素渲染到页面中
//1:引入包
import React from 'react'
import ReactDOM from 'react-dom'
//2:创建虚拟DOM节点
 React.createElement() 方法,用于创建 虚拟DOM 对象,它接收 3个及以上的参数
// 参数1: 是个字符串类型的参数,表示要创建的元素类型
// 参数2: 是一个属性对象,表示 创建的这个元素上,有哪些属性
// 参数3: 从第三个参数的位置开始,后面可以放好多的虚拟DOM对象,这写参数,表示当前元素的子节点
<div title="this is a div" id="mydiv">这是一个div</div>
//另外一个子节点
var myH1 = React.createElement('h1'null'这是一个大大的H1')
//myDiv里面有两个子节点,分别是第三参数和第四个
var myDiv = React.createElement('div', { title'this is a div'id'mydiv' }, '这是一个div', myH1)
//3:使用ReactDOM把元素渲染到指定页面容器中
ReactDOM.render(myDiv, document.getElementById('app'))

组件的使用:

  • 如果想把组件放到页面中,可以把构造函数的名称,当成组件的名称,以HTML的形式引入页面即可,

  • 需要注意的是,React在解析所有标签的时候,是以标签的首字母来区分的,如果标签的首字母是小写,那么就按照普通的HTML标签来解析,如果首字母是大写,就按照组件的形式去解析渲染,

    我们来看一个基本组件的使用:

function Hello(props) {
  // 在组件中,如果想要使用外部传递过来的数据,必须,显示的在 构造函数参数列表中,定义 props 属性来接收;
  // 通过 props 得到的任何数据都是只读的,不能从新赋值
  // props.name = '000'  这里会报错,因为不可更改
  return <div>
    <h1>这是在Hello组件中定义的元素 --- {props.name}</h1>
  </div>
}
var person = {
    name'ls',
    age22,
    gender'男',
    address'北京'
}
ReactDOM.render(
    <div>
    //这里用扩展运算符,把对象里的属性一一注册,供上面props使用
      <Hellow {...person}></Hellow>            
    </div>)