score:3
Accepted answer
hope that helps. do something like that.
helloworld.jsx
import react, { component } from 'react';
import reactdom from 'react-dom';
export default class helloworld extends component {
render() {
return (
<div classname='greeting-div'>
<div>
hello world jsx
</div>
</div>
);
}
}
reactdom.render(
<helloworld/>,
document.getelementbyid('greeting-div')
);
index.html
<!doctype html>
<html lang="en">
<head>
<title>my first react example</title>
</head>
<body>
<div id="greeting-div"></div>
<script type="text/javascript" src="path_of_your_outpur_script" ></script>
</body>
</html>
webpack.config.js :
var webpack = require("webpack");
var autoprefixer = require("autoprefixer");
var paths = require("./paths.js");
var files = require('./files.js');
var path = require("path");
module.exports = {
entry: {
path.resolve(__dirname, 'path_of_your_helloworld.jsx'),
},
output: {
path: paths.webappassets,
publicpath: "",
filename: "[name].js",
chunkfilename: "[chunkhash].js",
librarytarget: 'var',
library: '[name]'
},
};
Source: stackoverflow.com
Related Query
- React w/ JSX: Load class defined in JSX into HTML
- ReactJs - Converting raw HTML with nested React Component into JSX
- Can't properly load typescript class into react project
- How to think in React for this example: Should I store repetitive html markup in an Array and import it into a class component?
- How can I comment out some HTML code defined into the return() method of a React component?
- How are properties defined on React elements using JSX 'collected' into a single object?
- React ES6 class method does not render into html table but outside it. Why?
- How to inject HTML into React JSX after function returns an HTML Tag
- How to display an unordered list into a JSX <ul> element in a React Form using class component
- How to pass parameter into React component defined using ES6 class
- forEach() in React JSX does not output any HTML
- How do I load a markdown file into a react component?
- ternary operator in jsx to include html with react
- Can I use jsx without React to inline HTML in script?
- Call a static function into the class React ES6
- Is there a right way to pass data into a React component from the HTML page?
- Convert react JSX object to HTML
- Why do I have to .bind(this) for methods defined in React component class, but not in regular ES6 class
- How to import an entire folder of SVG images (or how to load them dynamically) into a React Web App?
- React props: Using an HTML entity within JSX dynamic content?
- W3C HTML validation for React JSX files
- how to import HTML file into React component and use it as a component?
- Custom HTML Element Tag within React JSX
- React JSX append HTML (react object) after initialization
- React Router doesn`t load external html files
- React - load all data from json into component
- Inject a React component into HTML
- React class is not defined (text/babel)
- React JSX - dynamic html attribute
- How to convert React class components into functional components and vice versa - IntelliJ
More Query from same tag
- Scoping during Login with React and react-redux-firebase
- Concatenating variables and strings in React
- React: multiple modal and passing props dynamically
- Put input text and submit button same line
- Persist data with localStorage - React.js
- react js, when open page Other than home in new tab show 404
- Dropdown state in React-redux
- Delete user account Dialog - firebase with React JS
- How can I filter a set of data based on 4 conditions?
- How can I make a variable have the type unknown or 'Movie' assigned?
- how can I set python version through config settings in package.json file?
- Google Places autocomplete not working (in Bootstrap modal)
- Updated State not being retrieved by method
- global.util.crypto.lib.randomBytes is not a function error
- React Js Select Input Address Mapping
- How to add required rule to antd input with initial value as undefined?
- How to use useCallback on a custom hook?
- How to push new FieldArray from outside render function?
- How to use TransitionComponent in React-Bootstrap
- My react app doesn't calculate properly (only after second symbol renders result)
- How to remove minimap, scrollbar in Monaco editor and how to disable writing in Monaco editor in react js?
- Defining schema for dynamic rendering of dependent dropdowns/input fields
- How can I redirect to another component in react and pass the state that I set in the previous component?
- React useState value in Context API always use initial value instead of updated value
- React: Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL
- How to show a loading indicator during sending API request
- Redirect to another route when accessing a route in react
- React onChange function doesn't fire, not allowing me to change input value
- React Jest example doesn't work
- SharePoint Framework with React Component loading images