React

React is a NodeJS library for creating dynamic web content.

Components

The core concept of React is components, which are classes that take props (properties) and return a DOM via a render() function.

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

// Example usage: <ShoppingList name="Mark" />

react-dom

To render a React node at some target <div>, use the render() function from react-dom.

import React from 'react'
import ReactDOM from 'react-dom'

const element = <h1>Hello, world</h1>;
ReactDOM.render(element, document.getElementById('my-target-id'));

react-router-dom

To route page requests in a single-page app, use the routing functionality from react-router-dom.

import React from 'react'
import ReactDOM from 'react-dom'
import { Route, BrowserRouter as Router } from 'react-router-dom'

import Component1 from './component1'
import Component2 from './component2'
import Component3 from './component3'

const routing = (
  <Router>
    <div>
      <Route exact path="/" component={Component1} />
      <Route path="/help" component={Component2} />
      <Route path="/contact" component={Component3} />
    </div>
  </Router>
)
ReactDOM.render(routing, document.getElementById('my-target-id'))

CategoryRicottone