React JSX Cheatsheet

1import React from 'react';
2import SampleComponent from './sample';
3import TitleComponent from './title';
4import HrefSampleComponent from './href-sample';
5
6/*
7  JSX CheatSheet
8  https://reactjs.org/docs/
9
10  Changes:
11  - class becomes className (class is a reserved JS word)
12  - for becomes htmlFor (for is a reserved JS word)
13  - all HTML events and attributes are now camelCased onclick => onClick
14  - JSX is still javascript don't forget, so { expressions } everywhere!
15
16  CSS:
17  - completely encapsulated by default
18  - covers only basics, not media queries or child position targetting
19
20  Forms:
21  - value = current value of the field / defaultValue = initial value
22  - you can subscribe to events on form fields via onChange attribute
23
24  Limitations:
25  - render() function can only return a single node (div, a, img, whatever HTML type)
26
27  Security:
28  - XSS Xploit prevention: automatic escaping in expressions.
29
30  Spaces:
31  - Horizontal white space is always trimmed to 1
32  - Zero Vertical Spaces
33*/
34
35const hrefItems = [
36  { href: 'www.coderecipes.org', text: 'cool site' },
37  { href: 'www.coderecipes.org', text: 'cool site' },
38  { href: 'www.coderecipes.org', text: 'cool site' },
39  { href: 'www.coderecipes.org', text: 'cool site' }
40];
41const hrefElements = [];
42for (const [index, value] of hrefItems.entries()) {
43  // hrefElements.push(<li key={index}>{value}</li>)
44  hrefElements.push(<HrefSampleComponent key={index} {...value}/>)
45}
46
47
48
49const attributes = {
50  'dashed-one': 'Hello',
51  'id': 'xpto'
52}
53
54const tableRows = [
55  {type: 'height sensor'},
56  {type: 'tyre pressure'},
57  {type: 'exhaust temperature'}
58];
59
60const tableStyles = {
61  width: '100%',
62  border: '1px solid black',
63  borderCollapse: 'collapse'
64};
65
66const titleComponentData = {
67  title: 'funky title',
68  link: 'www.coderecipes.org'
69}
70
71const textAreaDefaultValue = 'WRC Telemetry Project';
72const selectDefaultValue = 'xpto';
73
74const handleChange = (event) => {
75  console.log('changeListener', event.target.value);
76}
77
78const handleSubmit = (event) => {
79  console.log('handleSubmit');
80  event.preventDefault();
81}
82
83const element = <h1 id={attributes.id}> {attributes['dashed-one']}, world!</h1>
84
85
86
87const Main = () => {
88  return (
89    <div>
90      <SampleComponent />
91      {element}
92      <TitleComponent {...titleComponentData} />
93
94      {/* table */}
95      <table style={tableStyles}>
96        <thead>
97          <tr><td>Type</td></tr>
98        </thead>
99        <tbody>
100          {tableRows.map((row, i) => {
101            return <tr key={i}><td>{row.type}</td></tr>;
102          })}
103        </tbody>
104      </table>
105
106      {/* form */}
107      <form onSubmit={handleSubmit}>
108        <textarea defaultValue={textAreaDefaultValue} onChange={handleChange} />
109        <select defaultValue={selectDefaultValue} onChange={handleChange}>
110          <option value={selectDefaultValue}>...</option>
111          <option value='sample'>Sample</option>
112        </select>
113        <input type="submit" value="Submit" />
114      </form>
115
116
117      {/* dynamically generated <a> */}
118      {hrefElements}
119
120      <p>
121        This paragraph
122        {' '}requires line breaks between
123        {' '}..lines
124        {' a bit more '}
125      </p>
126
127      <p>
128        This paragraph
129        requires spaces
130        betwee ..lines
131      </p>
132
133      <p>&copy; 2019</p>
134      <p>{'\u00A9 2019'}</p>
135
136
137    </div>
138  )
139}
140export default Main;
141
142