jsx=js+xml,不知道xml是什么，回忆一下使用过的的svg

学习笔记都会在 create-react-app  创建的项目下测试，我们会不断修改index.js的代码

 

1.输出helloworld

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import registerServiceWorker from './registerServiceWorker';ReactDOM.render(    
Helloworld
,    document.getElementById('root'));registerServiceWorker();

我们关心的就是使用jsx的部分，在index.js上面导入了react和react-dom类库，下面就是我们jsx的写法，

我们使用的是：

ReactDOM.render(    
Helloworld
,    document.getElementById('root'));

这个方法的第一个参数我们传递的就是xml，第二个参数是一个原生js的dom节点，

我们审查元素：

 

2.使用复杂xml结构

非常简单，不过最外层只能是一个标签，不能这么去写：

这种写法才是正确的：

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import registerServiceWorker from './registerServiceWorker';ReactDOM.render(    
    
     
Helloworld
     
2
    
,    document.getElementById('root'));registerServiceWorker();

在最外层有只能有一个标签

 

3.标签设置属性

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import registerServiceWorker from './registerServiceWorker';ReactDOM.render(    
    
     
Helloworld
     
2
    
,    document.getElementById('root'));registerServiceWorker();

 

4.表达式的使用

如果你使用过ng或者vue就会知道，html嵌套的{

{}}等只是支持单表达式，react是支持各种js语句的：

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import registerServiceWorker from './registerServiceWorker';ReactDOM.render(    
    
     
Helloworld
     
{1+3==2?2:3}
    
,    document.getElementById('root'));registerServiceWorker();

 

 

5.类名设置

和我们直接在标签上写class=“xx”不一样，在jsx中只能用 className 设置类名，就想我们利用dom去获取和设置类名一样：

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import registerServiceWorker from './registerServiceWorker';ReactDOM.render(    
    
     
Helloworld
     
{1+3==2?2:3}
    
,    document.getElementById('root'));registerServiceWorker();

 

6.行内样式

粗鲁的方式：

我们会发现直接报错了，因为jsx有自己的语法，在行内样式的设置上必须采用对象的形式取设置：

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import registerServiceWorker from './registerServiceWorker';var objstyle={	color:"red"};ReactDOM.render(    
    
		
     
Helloworld
		
     
{1+3==2?2:3}
		
     
我是行内样式
	
    
,    document.getElementById('root'));registerServiceWorker();

 

7.数组方式设置xml

会把数组的xml识别到，并且自动插入到对应位置：

import React from 'react';import ReactDOM from 'react-dom';import './index.css';import registerServiceWorker from './registerServiceWorker';var objstyle={	color:"red"};var arr=[	
Helloworld
,	
{1+3==2?2:3}
,	
我是行内样式
]ReactDOM.render(    
    
     		{arr}	
    
,    document.getElementById('root'));registerServiceWorker();

 

8.总结

1.render方法第一个参数是xml，这个xml外层只能是一个标签，里面可读取xml形式的arr

2.render方法第二个参数是dom节点

3.类名只能用className设置

4.行内样式要使用对象形式赋值

5.支持的表达式复杂

6.一对{}设置处理

7.xml外层没有引号，不是字符串而是xml