세 가지 다른 스타일(변수, 표현식, 삼항 연산자)을 이해하기 위해서 JSX로 변환하지 않고 자바스크립트로만 작성한 다음 예제 코드를 살펴보자.

// 방법 1: 변수
render() {
  let link
  if (this.props.user.session)
      link = React.createElement('a', {href: '/logout'}, 'Logout')
  else
      link = React.createElement('a', {href: '/login'}, 'Login')
  return React.createElement('div', null, link) ---- 변수 link 사용
}
// 방법 2: 표현식
render() {
  let link = (sessionFlag) => { ---- 표현식 생성
      if (sessionFlag)
          return React.createElement('a', {href: '/logout'}, 'Logout')
      else
          return React.createElement('a', {href: '/login'}, 'Login')
  }
  return React.createElement('div', null, link(this.props.user.session))
}
// 방법 3: 삼항 연산자
render() {
  return React.createElement('div', null,
      (this.props.user.session)
      ? React.createElement('a', {href: '/logout'}, 'Logout')
      : React.createElement('a', {href: '/login'}, 'Login') ---- 삼항 연산자 사용
  )
}