Black & White Series
React & JSX
Thinking in React
React
- https://react.dev/
- JavaScript Framework
- to produce interactive (reactive) interfaces
- founded in JSX and Components
Examples at
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')
)
First React Program - Script
root.render(
React.createElement('h1', null, 'Velocirest')
)
JSX
- Proposed by Facebook
- https://facebook.github.io/jsx/
- XML constructs within JavaScript
- Requires the use of a Transpiler (preprocessor)
React with JSX
Available at: frameworks/react/2-basic-jsx
React with JSX
root.render(
<h1>Velocirest</h1>
)
JSX and Babel Transpiler
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
...
</script>
Babel Transpiler
References
André Santanchè
www.ic.unicamp.br/~santanch/
Web2Learn
santanche.github.io/web2learn/