前言

以《深入学习react技术栈》为线索，记录下学习React的重要知识内容。本系列文章没有涵盖全部的react知识内容，只是记录下了学习之路上的重要知识点，一方面是自己的总结，同时拿出来和在学习react的人们一块分享，共同进步。

正文

一：react简介

网上能搜出来一大片，想要了解的自行谷歌，我们还是直奔学习的主题。

二：JSX语法

JSX基本语法总结：

1.XML基本语法

标签可任意嵌套

const List =()=>(
    
    
     
     
            
      
            
      
        
     
    
    
);

注意事项总结：

（1）定义标签时，只允许被一个标签包裹（2）标签一定要闭合

2.元素类型

两种不同的元素：DOM元素和组件元素

注意事项（在JSX的对应原则）总结：（1）HTML标签首字母为小写，组件元素首字母为大写（2）JSX在一个在一个组件的子元素位置使用注释要用{}包裹起来

const App =()=>(
    );

(3)DOCTYPE是没有闭合的，我们无法渲染它。常见的做法是：构造一个保存HTML的变量，将DOCTYPE与整个HTML标签渲染后的结果串联起来

3.元素属性

注意事项：（1）在JSX中从DOM属性到JSX中的属性，有两个例外的转换:class属性改为classNamefor属性改为htmlFor（2）组件的属性是完全自定义的属性，也可以理解为实现组件所需要的参数

const Header = ()=>(
{childern}>
);//调用：
    
     Hello,world
    

(3)Boolean属性：省略的默认的JSX设为 true。要传入false时，必须使用属性表达式。这常用于表单元素

    等价为
    
     //如果想设置成false,必须:
     
    

(4)展开属性:如果你不知道要设置哪些 props,那么现在最好不要设置它。因为React不能帮你你检查属性类型(propTypes)。这样即使组建的属性类型有错误，也不能得到清晰地错误提示。

（5）自定义HTML属性：在JSX中传入自定义属性，React是不会渲染的。如果要使用HTML自定义属性，要使用data-前缀（这与HTML标准是一致的）。

然而在自定义标签中，任意的属性都是支持的:

4.javaScript属性表达式

注意事项：（1）属性值要用表达式，使用{}替换即可

const person = 
    
     ;
    

（2）子组件也可以用作表达式

const person = 
     : 
    
     };
    

5.HTML转义

注意事项：（1）HTML会将所有要显示到DOmain的字符串转义，防止XSS（2）React提供了dangerouslySetInnerHTML属性避免React转义字符

下一篇内容我们讲React组件，欢迎关注。