react第一天 JSX的学习

jsx 的基本使用步骤：

• 引入 React 和 React-dom;
• 使用 jsx 创建 react 元素 const element = <h1>hello react</h1>;
• 渲染到页面中：ReactDOM.render(element,document.getELementById("root"))

jsx 的使用注意点：

• jsx 必须在脚手架中使用，必须导入 React；
• jsx 必须包裹在一个根元素中，如果没有可以直接些一个空标签包裹，<></>;
• 如果某个元素没有内容的话，可以使用单标签；
• 如果 jsx 的结构比较复杂，里面有换行的语句，可以使用()进行包裹起来；
• 特殊的属性： className(标签元素中的 class 类名属性的写法) 和 htmlFor(form 表单元素中的 for 属性的写法)

jsx 可以嵌入表达式：

• jsx 中可以使用{}嵌入表达式；
• 可以直接访问一个变量；
• 可以访问对象的属性；
• 可以访问数组的下标；
• 可以使用三元表达式{age>18?“是”:“否”}；
• 可以调用函数；
• 可以使用 jsx 的本身{link}
• 可以使用注释{/* */}
• 不能够使用语句“判断语句”

jsx 中的 dom 设置样式：

行内样式：

<div style={{width:'120px',backgroundColor: 'red'}}></div>

外链样式：

<div className="box"></div>
//需要新建一个css文件，然后在js文件中引入即可