React - introduction

added Sep 30, 2019 in React by anonymous

//Return the HTML code in render
//A ReactElement is a light, stateless, immutable, virtual representation of a DOM Element.
//ReactElements are the basic items in React-ish virtual DOM. 
// What differs ReactComponent from ReactElement is - ReactComponents are stateful.
 
var CommentBox = React.createClass({
  render: function() {
    return (
      <div className="commentBox">
        Hello, world! I am a CommentBox.
      </div>
    );
  }
});

3 Responses

responded Sep 30, 2019 by anonymous

//please make sure the html wrapped by div, to enclose the tag.
import {Component} from 'react'
 
class CompanyToggle extends Component {
  render() {
 
    return (
       
      <div>
        <button className="btn btn-primary btn-block btn-min--grey" data-toggle="collapse" data-target="#company-contact">Show contact details</button>
        <div id="company-contact" className="collapse">
          <div className="contact-toggle"> 
          Contact details will goes here
          </div>
        </div>
      </div>
    )
  }
}
 
module.exports = CompanyToggle
 
 
//The replacement of syntax is due to JS reservation,  in the browser DOM.
//className is React's replacement for class
//htmlFor is React's replacement for for
//dangerouslySetInnerHTML is React's replacement for using innerHTML

responded Sep 30, 2019 by anonymous

//Example directory: 
//Yoursite/template/layout/index.html
//Yoursite/js/app.js
//Yoursite/js/components/header/header.js
 
//Index.html
<body>
   <header id="header"></header>
</body>
 
//app.js
import Header from './components/headers/header'
 
window.addEventListener('DOMContentLoaded', () => {
  const project_store = new Project()
 
  if($('#header').length) {
    ReactDOM.render(<Header />, document.getElementById('header'))
  }
})
 
//header.js
import { Component } from 'react'
class Header extends Component {
  render() {
    return (
    <div>
     Header element goes here
    </div>
    )
  }
}
module.exports = Header

responded Sep 30, 2019 by anonymous

React - introduction

3 Responses

Related reference