React官方API学习

HelloWorld

ReactDOM.render(

Hello,World!

, document.getElementById('root') );

JSX

考虑下面的变量声明:

const element=

Hello,world

;

上面的标签语法既不是一个字符串,也不是一个HTML标记的方法。
它称之为JSX,是javascripty的一个语法扩展。我们通常通过react来描述UI的时候就采用这种语法模式。JSX可能会让你觉得跟模板语言很像,但是它是带有Javascript全部威力的。
JSX生成React元素。我们将在下一节讨论呈现的DOM。现在,你开始需要找到基本的JSX

JSX表达式

你可以在JSX中嵌入任何形式的javascript 表达式,需要使用一个大括号将这些表达式包裹起来。比如:2+2,user.firstName,formatName(user)、这些都是合法的方式:

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  

Hello, {formatName(user)}!

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

CodenPen链接https://codepen.io/gaearon/pen/PGEjdG?editors=0010
我们可以将JSX分成多行,为了更好的可读性。分行也不是需的,当分行时,需要注意的是 为了避免自动分号的陷阱,建议在代码外面使用括号

你可能感兴趣的:(React官方API学习)