React first Day

环境搭建

 react  react-dom webpack

react-api

 react jsx语法
 jsx支持ECAMscript 所有语法 与自身
 但是js不支持jsx语法所以要安装相关依赖  
 运行npm i  bable-preset-react -D 安装
 
 **1、通过 自定义变量的形式来渲染dom通过React.createElement()

let mydiv = React.createElement('div',{className:'current',id:'mydiv'},'this is my first div!');

 **2、jsx语法方式 直接像写html方式创建dom元素但是本质是转换成通过React.createElement()方式创建dom元素
 let mydiv = <div title = {mytitle} className='current'>
	这是一个div
 {arr}
</div>

**3、属性
	可通过自定义变量的形式来添加属性  <div title = {mytitle} className='current'>
	reactjs中通过{}形式来编写符合js语法规范的代码！

**4、注释
{
    //单行注释形式
}
---------------------
{/* 多行注释形式 */}

**div内部循环创建十个p便签
let mytitle = 'helloworld';
	let arr = [];
for(let i=0;i<10;i++){
	 let p = <p>这是一个p标签</p>
	 arr.push(p);
}
let mydiv = <div title = {mytitle} className='current'>
	这是一个div
	{arr}
	
</div>

**5组件
reactjs中的组件定义其实就是一个构造函数
构造函数中必须要return “一些东西”;
组件的引用就是构造函数的函数名称 加上 html 便签结构 <> 如 <Hello></Hello>
react 对组件的解析是通过构造函数的首字母：
  1、如果首字母不是大写 那么就会按照html的形式来解析
  2、如果首字母是大写 则会解析成一个组件

 function Hello(){
     return <div>
         <h1>
             这是组件中的div子元素h1
         </h1>
     </div>
 }

ReactDom.render(<div>
    这是一个div
    <Hello></Hello>
</div>,document.getElementById('app'))

 结论 构造函数名首字母要大写！

**6、组件传值
假设我们向组件传递一个对象
let person = {
name:‘zhangsan’,
age:18,
sex:‘男’,
hobbies:[‘吃饭’,‘睡觉’,‘打豆豆’]
}
然后我们在引用组件的地方通过{。。。传递对象}来向组件传递参数
…Obj 对象扩散 将对象中的所有参数传递
在组件中就可以查看到传递过来的参数
注意：传递过来的参数在构造函数中的参数列表中要定义porps来接受
而且接收到的参数read-only （只读）

 let person = {
     name:'zhangsan',
     age:18,
     sex:'男',
     hobbies:['吃饭','睡觉','打豆豆']
 }

 import Hello from './components/hello.jsx'

ReactDom.render(<div>
    这是一个div
    <Hello {...person}></Hello>
</div>,document.getElementById('app'))

-------------------------------------------------------------------------
hello.jsx代码
import React from 'react'

function Hello(props){
    console.log(props)
    return <div>
        <h1>
            这是组件中的div子元素h1
        </h1>
        
    </div>
}

export default Hello;

markdown快捷键

撤销：Ctrl/Command + Z
重做：Ctrl/Command + Y
加粗：Ctrl/Command + B
斜体：Ctrl/Command + I
标题：Ctrl/Command + Shift + H
无序列表：Ctrl/Command + Shift + U
有序列表：Ctrl/Command + Shift + O
检查列表：Ctrl/Command + Shift + C
插入代码：Ctrl/Command + Shift + K
插入链接：Ctrl/Command + Shift + L
插入图片：Ctrl/Command + Shift + G
查找：Ctrl/Command + F
替换：Ctrl/Command + G