This lists common Javascript syntax that is widely used in React as well as React's Javascript Extension. Read through this first and come back later when you forget what some of the syntaxes means.

What is JSX?

It's important to note that React utilizes JSX for development, which stands for JavaScript eXtension. JSX is a React extension that permits writing Javascript that looks like HTML. For example, a simple component or the App.js may have the following code:

class App extends Component {
  render() {
    return(
      <h1 className="h1-large">Hello World!</h1>
    );
  }
}

Although the Javascript code includes HTML, the HTML code is actually Javascript. After the code is translated, the Javascript for the App Component will be:

class App extends Component {
  render() {
    return(
      React.createElement('h1', {className: 'h1-large'}, 'Hello World!')
    );
  }
}

Thus, JSX merely allows us to write Javascript that looks like HTML, which proves to be beneficial especially with visualizing the DOM and being able to write more familiar code within our components.

Different Ways of writing React Components

import React from 'react'
class SomeComponent extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
           status: 1
        }
    }
    render() {
        return() {
            <div>{this.state.status}</div>
        }
    }
}
export default SomeComponent

// OR
const SomeComponent = (props) => (
    <div>{props}</div>
)
export default SomeComponent

// OR
export default (props) => (
     <div>props</div>
)

Useful Javascript Syntax

Regardless, React and JSX is entirely Javascript, and knowing common JS syntax will be beneficial for development.

Function Shortcut

const func = (param1) => {
  // do something
}

// same as
function func(param1) {
  // do something
}

Object Deconstruction

const person = {
    name: "tim",
    age: 20
}
const {name, age} = person
console.log(name)
// prints "tim"

Deconstruction in params, especially for props

const func = ({text, link}) => {
    console.log(text)
}

const prop = {
  text: "some text",
  link: "<https://uiuc.hack4impact.org>"
}

func(prop)
// prints "some text"

Spread Operators (Three Dots)

// stolen <https://dmitripavlutin.com/how-three-dots-changed-javascript/>
let cold = ['autumn', 'winter'];  
let warm = ['spring', 'summer'];  
// construct an array
[...cold, ...warm] // => ['autumn', 'winter', 'spring', 'summer']
// function arguments from an array
cold.push(...warm);  
cold              // => ['autumn', 'winter', 'spring', 'summer']

Export