Day6 React搭配JSX运用

昨天学习到了JSX的几大特色与优点之後，今天就正式来学习用JSX搭配react。载入JSX之前先引用babel-core这个JSX的编译器。

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>

载入JSX有两种方式:

1. 内部引入

<script type="text/babel">
    
</script>

2. 外部引入

<script type="text/jsx" src="test.jsx"></script>

以下用官网的范例作为练习:

HTML结合Javascript用法

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

const user = {
  firstName: '陈',
  lastName: '小羽'
};
// 产生h1的react元素
const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);
// 将react元素渲染到html架构里
ReactDOM.render(
  element,
  document.getElementById('app')
);

设定JSX属性

JSX同样可以做到如HTML标签上的属性设置，但要注意class和for为Javascript的保留关键用字，若要设定的话请用className和htmlFor取代。

<div className="greeting">
     <p>Hello  {formatName(user)}</p>
     <label htmlFor="name"><input type="text" id="name"/></label>
    <img src="" alt="" />
</div>

另外需要注意下列两点:

• JSX会被编译成Javascript给浏览器读取，且每一个JSX只会对应到一个Javasciprt，因此Component中若有多个HTML标签要渲染的话，最外面可以包覆<div>标签。
• JSX里的HTML标签中，若为<input>或<img>的话，需要自行加上'/'关闭标签。

注解方式

const element = (

  /* 
  多行
  注解
  */
// 单行注解
 <content
      /* 
  多行
  注解
  */
 name={formatName(user)}// 单行注解
  />
);

样式使用

在JSX中若要引用CSS样式的话，用两个{}包住，第一个{}是JSX 语法，第二个为JavaScript物件，命名方式为驼峰式命名法，多个样式要引用的话用'，'做区隔。

<div className="greeting" style={{fontSize:'36px',fontWeight:'bold'}}>
     <p>Hello {formatName(user)}</p>  
</div>