Share
Explore

React Lab: Handling REACT JSX front end components

Creating and deploying a React component to an HTML page involves writing the React component in JSX and then rendering it within a specific DOM element, typically the one with the id="root".
I'll show you how to create a simple Greeting component that accepts a name prop and how you can deploy it to an HTML page.
Firstly, let's create the React component (Greeting.js):
import React from 'react';

// Greeting component accepts a 'name' prop
const Greeting = (props) => {
return <h1>Hello, {props.name}!</h1>;
};

export default Greeting;

Next, we will use this Greeting component inside our main App.js file, which is the entry point for a React application.
App.js:
import React from 'react';
import ReactDOM from 'react-dom';
import Greeting from './Greeting';

const App = () => {
const userName = 'Alice';

return (
<div>
{/* Using the Greeting component and passing 'name' prop */}
<Greeting name={userName} />
</div>
);
};

// Render the App component into the DOM element with the id 'root'
ReactDOM.render(<App />, document.getElementById('root'));
Now, let's see the corresponding HTML page (index.html), which includes the div with the id="root" where the React application will be mounted.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Component Example</title>
</head>
<body>
<!-- This is the root element where our React app will be mounted -->
<div id="root"></div>

<!-- Scripts to include React, ReactDOM, and our compiled application -->
<script src="path/to/react.js"></script>
<script src="path/to/react-dom.js"></script>
<script src="path/to/compiled_app.js"></script>
</body>
</html>
In this example, compiled_app.js would be the bundled JavaScript file that webpack (or another module bundler) creates from your JSX code. This file includes the React component code that gets executed in the browser.
By rendering the App component using ReactDOM.render and targeting the DOM element with id="root", the Greeting component's HTML output is injected into that element.
The Greeting component is functionally equivalent to an HTML tag, in that it generates a piece of the DOM structure that is displayed on the page:
<h1>Hello, Alice!</h1>
This will be the actual output inside the root div of the HTML page, effectively displaying the greeting message with the passed-in name, similar to how an <img> tag would display an image:
<img src='dog.gif'/>
This illustrates how React components and HTML tags can be used interchangeably in the sense that they both produce HTML output to be displayed on the page.
However, React components are more powerful, as they can contain logic, state, and a variety of behavior, which HTML tags alone cannot.

What about passing in the prop from the HTML Page?

Using data-* attributes on a DOM element and a script to manually instantiate a React component, you can indirectly pass information from the HTML to a React component during initialization.
Here's how you can achieve this:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React Component Example</title>
</head>
<body>
<!-- 'data-name' attribute holds the value we want to pass as a prop -->
<div id="root" data-name="Alice"></div>

<!-- Scripts to include React, ReactDOM, and our compiled application -->
<script src="path/to/react.js"></script>
<script src="path/to/react-dom.js"></script>
<!-- Ensure your React component script comes after React and ReactDOM -->
<script src="path/to/your_component_bundle.js"></script>
<script>
// Extract value from 'data-name' attribute and pass as a prop to React component
const domContainer = document.querySelector('#root');
const userName = domContainer.getAttribute('data-name');
ReactDOM.render(React.createElement(Greeting, { name: userName }), domContainer);
</script>
</body>
</html>
In the example above, the data-name attribute of the root div holds the userName we want to pass into our Greeting component.
The script at the bottom of your HTML file is crucial as it:
Selects the DOM element where the React app will mount (the element with id="root").
Extracts the value from the data-name attribute.
Uses ReactDOM.render to render the Greeting component, creating it via React.createElement and passing the extracted value as props.
Note: This approach is mixing imperative DOM manipulation with React's declarative paradigm, which is not a usual practice when developing React applications.
Typically, you would manage state and props within the React ecosystem itself, perhaps using something like Context or a state management library to pass down props.
This example is mostly instructional and is not the best practice for standard React application development.
For dynamic data handling, consider using state management libraries like:
Redux
Context API
React state hooks along with backend API calls.


A simple example illustrating Redux


To illustrate a simple example of Redux, we'll create a small React app with Redux that manages a counter. Our app will have the ability to increment and decrement the counter value.
Firstly, make sure Redux and React-Redux are installed:
npm install redux react-redux
Now, let's start by creating the Redux parts:
actions/counterActions.js:
// Action Types
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';

// Action Creators
export const incrementCounter = () => ({
type: INCREMENT,
});

export const decrementCounter = () => ({
type: DECREMENT,
});
reducers/counterReducer.js:
import { INCREMENT, DECREMENT } from '../actions/counterActions';

const initialState = {
count: 0,
};

// Counter Reducer
const counterReducer = (state = initialState, action) => {
switch (action.type) {
case INCREMENT:
return { ...state, count: state.count + 1 };
case DECREMENT:
return { ...state, count: state.count - 1 };
default:
return state;
}
};

export default counterReducer;
store.js:
import { createStore } from 'redux';
import counterReducer from './reducers/counterReducer';

// Create Store
const store = createStore(
counterReducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() // Enables Redux DevTools
);

export default store;
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.