Black & White Series

React & JSX

Thinking in React

React

width:150px

  • https://react.dev/
  • JavaScript Framework
  • to produce interactive (reactive) interfaces
  • founded in JSX and Components

Examples at

width:400px

https://codepen.io/santanche/collections/

First React Program

Available at: frameworks/react/1-basic-raw

First React Program

HTML Root Element

<body>
  <div id="root"></div>
  ...
</body>

First React Program

Importing Libraries from CDN

CDN - Content Delivery Network

<script src="https://unpkg.com/react/umd/react.development.js">
</script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js">
</script>

First React Program - Script

const root = ReactDOM.createRoot(
  document.getElementById('root')
)

width:750px

First React Program - Script

root.render(
  React.createElement('h1', null, 'Velocirest')
)

width:750px

JSX

  • Proposed by Facebook
    • https://facebook.github.io/jsx/
  • XML constructs within JavaScript
  • Requires the use of a Transpiler (preprocessor)

width:1000px

width:1000px

width:1000px

React with JSX

Available at: frameworks/react/2-basic-jsx

React with JSX

root.render(
  <h1>Velocirest</h1>
)

width:750px

JSX and Babel Transpiler

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

<script  type="text/babel">
  ...
</script>

width:1000px

Babel Transpiler

width:750px

References

André Santanchè

www.ic.unicamp.br/~santanch/

Web2Learn

santanche.github.io/web2learn/