JumpStart – JSX, and things to note

Part 1 | Part 2 | Part 3 | Part 4 | Part 5 | Part 6 | Part 7

JSX and other things to note

JSX

Consider the below code:

const element = <h1>Hello, world!</h1>;

This might look familiar to you, but it is neither JS nor HTML, but a JS extension called JSX.

Instead of artificially separating technologies by putting markup and logic in different files, React goes by the philosophy of separating by concerns instead.

React doesn’t require JSX. It is merely syntactic sugar for React.createElement(component, props, ...children). But it is a lot easier with JSX.

In the end, Babel, which comes with Create React App, will transpile the code from JSX into the React.createElement equivalent.

For more information, click here.

Some tips on using JSX:

You can change your file type from .js to .jsx to trigger VSCode syntax highlighting (as of Feb 2019).

JSX is closer to JS and uses camelCase a lot for naming.

‘class’ is already reserved in JS as a keyword, so div class is  className=”name” in jsx.

jsx uses {} for JS expressions. eg: count={3 + 5}

 

Some tips in React

render function can only return 1 element. You can wrap adjacent elements with a react fragment (or <>, </>)

props only accept 1 argument. eg: props=this.state.props

props are read-only.

class component has state attributes (states can be a boolean for a checkbox, or input string for a form input.)

state ={
  form: {
    name: "";
    password: ""}
}

this.setState to change state. Do NOT mutate state directly, as React identifies what has changed by listening for setState calls.

Emmet

emmet settings:
enable on tab

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "typescript": "typescriptreact"
}

 

Additional resources:

For beginners, this book can be quite helpful.

https://reactjs.org/docs/dom-elements.html