React front-end:
- Generally index.jsx
- Contains JavaScript with one or more import calls to back-end Components that render the App to the web browser
React App back-end:
- App Components which are generally organized into folders such as App/App.jsx
- Data passed using Props (properties) and via a return value
- Back-end makes available its Components via export calls to other Components or the front-end
- Front-end consumes the Components via import calls
Two basic types of Components:
- Class: a class component extends the base (root) React.Component
- Functional: a JS function
Simple Functional (back-end) Component:
/App/HelloApp.jsx
function HelloApp(props) {
return (
<div class='wptitle'><h1>Hello {props.nm}</h1></div>
);
}
export default HelloApp;
Simple Class (back-end) Component:
/App/HelloApp.jsx
// import React.Component
import React from 'react'
class HelloApp(props) extends React.Component {
render() {
<div class='wptitle'><h1>Hello {props.nm}</h1></div>
}
}
Render to the browser DOM root (front-end):
/index.jsx:
import { createRoot } from 'react-dom/client';
import HelloApp from './HelloApp';
// add the HelloApp return to the root browser DOM
const root = createRoot(document.getElementById('root'));
root.render(<App nm="Tom Testor" />);
previous page
|