React Function Components

JavaScript

This is just a simple snippet of a React function component for instruction purposes. Function components are now more powerful than before and are the recommend way of creating components

1// ./src/header.js
2import React from 'react';
3const Header = (props) => {
4  return (
5    <div>
6      <h1>Title</h1>
7      <p>Description</p>
8    </div>
9  )
10}
11export default Header;
12
13// ./src/App.js
14import React, { Component } from 'react';
15import Header from './header';
16import ReactDOM from 'react-dom';
17import logo from './logo.svg';
18import './App.css';
19
20class App extends Component {
21  render() {
22    return (
23      <div className="App">
24        <Header> </Header>
25        <div className="static-container"></div
26      </div>
27    );
28  }
29}
30export default App;
31
32
33// ==================================================================================================================================
34// Old Class Components
35import React, { Component } from 'react'
36
37class Telemetry extends Component {
38  render() {
39    return (
40      <div>
41        <h1>Title</h1>
42        <p>Description</p>
43      </div>
44    )
45  }
46}
47

Created on 2/11/2019