Is it possible to add a build index.html of a React app to a div in my HTML/ColdFusion website?
I built a chatbot in React using hooks.
Bellow is my App.js which imports my ChatBot.js component.
import './App.css';
import MyChatBot from './ChatBot';
function App() {
return (
<div className="App">
<MyChatBot/>
</div>
);
}
export default App;
It is working. I have a ColdFusion/HTML website where I would like to include this "chatbot" or the generated index.html from npm run build to a div
<!-- ColdFusion Website here --->
<div id="myChatBot"></div>
The idea is to have the React application inside that div. Is it possible?
Thank you.
Yes, you can. You just need to pass the element ( where you want to mount the react app ) to ReactDOM.render method. Then bundle your react app using a bundler, say webpack, and include that bundle via script tag or via the current build process in your app's html.
HTML
<!-- Website Markup --->
<div id="myChatBot"></div>
<!-- Include React bundle --->
<script src="bundle.js"></script>
React
import ReactDOM from "react"
import App from "./App"
ReactDOM.render(<App/>, document.getElementById("myChatBot"))
Hope this is helpful to you: https://reactjs.org/docs/add-react-to-a-website.html
Gist of it is you have import the React scripts and render it to that id:
const domContainer = document.getElementById('myChatBot');
ReactDOM.render(e(LikeButton), domContainer);
I just started working in ReactJS and I was going through a basic React tutorial.
I have created a project and added Babel, React, ReactDOM, Webpack, Express as the dependencies.
Now I have this Counter.js :
import React, {Component} from 'react';
class Counter extends Component {
constructor(props) {
super(props);
this.state = {count: 0};
}
render() {
return (
<button onClick={() => {this.setState({ count: this.state.count + 1 });}}>
Count: {this.state.count}
</button>
);
}
}
export default Counter;
And the main.js (which is defined as the entry point of the application in webpack.config.js file):
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter.js';
ReactDOM.render(<Counter/>,document.getElementById("warbox"));
The PROBLEM is that when I start up the application, the component is not rendered on the page AND also the React DevTool Chrome extension doesn't light up (if that makes any sense).
Can't seem to figure out the problem exactly. Any help is appreciated. Apologies if its too basic.
The index.html :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="warbox"></div>
<script src="bundle.js"></script>
</body>
</html>
UPDATE : Solved. I think I should update what made it work for others to see. Heres the problem I had : Apparently the bundle.js needs to be updated by running the webpack explicitly. After making the changes, I had to stop the server and run the webpack and restart the server. It WORKED!
I'm trying to get my hands on writing my first component using bootstrap 4.
import React,{Component} from 'react';
import {Button} from 'react-bootstrap-4';
class TextField extends Component {
constructor(props){
super(props);
}
render() {
return (
<Button bsStyle="primary" bsSize="large">Default</Button>
);
}
}
export default TextField;
In my index.js I call it as follows:
import React, {Component} from 'react';
import ReactDOM from "react-dom";
import TextField from './components/custom/text_field';
class App extends Component{
constructor(props){
super(props);
}
render(){
return (
<div>
Helo World1
<br/>
<TextField id="test" />
</div>
);
}
}
ReactDOM.render(<App />, document.querySelector('.container'));
When I run the app I don't get any errors but the button is not looking like its suppose to
Am I missing something?
You're responsible for including Bootstrap's CSS yourself with react-bootstrap, which react-bootstrap-4 is a (temporary) fork of.
As per its Getting Started guide:
Because React-Bootstrap doesn't depend on a very precise version of Bootstrap, we don't ship with any included css. However, some stylesheet is required to use these components. How and which bootstrap styles you include is up to you, but the simplest way is to include the latest styles from the CDN.
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap-theme.min.css">
For more advanced use cases you can also use a bundler like Webpack or Browserify to include the css files for you as part of your build process but that is beyond the scope of this guide.
You would need to do the equivalent for Bootstrap 4.
by including Bootstrap 4 via CDN as above you only get css and any JS dependent component will not work. I've been facing this problems with React on Meteor.js.
What I did was to npm install:
"bootstrap": "^4.0.0-alpha.6",
"tether": "^1.4.0" // Tether is required by bootstrap.js
Import the css through the main js file:
import 'bootstrap/dist/css/bootstrap.css'
The only way I got full Bootstrap with JS was to grab a copy of bootstrap.js into my libs folder (any front end folder), modify it to import Tether at the top:
import tether from 'tether'
global.Tether = tether
For some reasons I couldn't find another way to resolve the Tether dependency.
Meteor does its own minification so I was not really bothered with the .min.js, however, you cannot import tether into a minified bootstrap.js.
Like many others I am waiting for a more "final" release of bootstrap 4 and possibly a simple npm i bootstrap --save procedure.
I have a Meteor/React project, using ES6 modules. I've installed materialize-css using npm, but I'm not sure how to actually use the Materialize classes in my JSX code. What am I supposed to import from materialize-css? Or do I just have to include the CSS in my main index.html file?
I mostly want it for the grid system, as I'll be using material-ui for the actual UI components.
Since I use CSS Modules, importing materialize css would scope it to that particular component. So I did the following
Step 1) install materialise
npm install materialize-css#next
Step 2) in index.html
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-alpha.3/css/materialize.min.css">
Step 3) import materialise.js in whichever component its needed
for e.g. in SomeComponent.js (for e.g. if this is about a sidenav)
import React from 'react';
import M from 'materialize-css';
....
// ref can only be used on class components
class SomeComponent extends Component {
// get a reference to the element after the component has mounted
componentDidMount(){
M.Sidenav.init(this.sidenav);
}
render(){
return (
<ul className={this.props.classes}
ref={ (sidenav) => {this.sidenav = sidenav} }
id={this.props.id}>
// menuItems
</ul>
)
}
}
just a beginner, so I would appreciate any comments on downsides of this method
With NPM:
Step 1) Install materialize
npm install materialize-css#next
Check the materialize documentation for any updates. Don't miss the #next at the end. The installed version will be something like: ^1.0.0-rc.2 or ^1.0.0-alpha.4
Step 2) Import materialize JS:
import M from 'materialize-css'
Or if that doesn't work you can try import M from 'materialize-css/dist/js/materialize.min.js'
Step 3) Import materialize CSS:
In index.html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
OR in javascript
import 'materialize-css/dist/css/materialize.min.css'
In order for the css import to work, you would need a css loader. Note that this loader is already included in projects built using create-react-app so you don't need the next steps. If instead, you are using custom webpack config, then run:
npm install --save-dev style-loader css-loader
Now add css-loader and style-loader in webpack config
const path = require("path");
module.exports = {
entry: "./src/index.js",
output: {
filename: "bundle.js",
path: path.join(__dirname, "build")
},
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
{
test: /.js$/,
exclude: /(node_modules)/,
use: {
loader: "babel-loader",
options: {
presets: ["env", "react"]
}
}
}
]
}
}
Now you can initialize components individually, or all at once using M.AutoInit();
Step 4) Import materialize icons:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
With CDN:
Add the following in your HTML file.
<!-- Materialize CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
<!-- Materialize JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<!-- Materialize Icons -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Then, in the webpack config, add externals: https://webpack.js.org/configuration/externals/
You can use https://react-materialize.github.io/#/, why to reinvent the wheel.
installation react-materialize
npm install react-materialize
Usage
import {Button, Icon} from 'react-materialize'
export default () => (
<Button waves='light'>
<Icon>thumb_up</Icon>
</Button>
)
Sample
https://github.com/hiteshsahu/react-materializecss-template
Screenshot
There are several ways of using Materialize CSS in ReactJS. However, I always use the following easiest one.
Here you can use Materialize CSS classes just like your HTML site using only ClassName with tags.
1 ) Install Materialize CSS for ReactJS using NPM.
npm install materialize-css#next
2 ) Then import the minified materialize CSS file to index.js file.
import 'materialize-css/dist/css/materialize.min.css'
3 ) Now if you want to use google icons add the following codes in your public / index.html file.
<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
4 ) Finally to use Javascript events on input forms or other places add the following codes in your public / index.html file.
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
N.B. => Since all files need to go through the index.js file, so importing your minified Materialize CSS to index.js once is enough. Otherwise, you need to import these CSS files to all your js files.
That's enough to prepare your ReactJS folder for up and running with Materialize CSS. Happy Coding.
as for the question, i think just npm i materialize-css and then
import "materialize-css/dist/css/materialize.min.css";
import "materialize-css/dist/js/materialize.min.js";
should do the job.
I wanted to share a problem I faced and how i solved it.
I wanted to get materialbox to work and here is how i did it
import React, { Component } from "react";
import M from "materialize-css/dist/js/materialize.min.js";
class Image extends Component {
constructor(props) {
super(props);
this.imageRef = React.createRef();
}
onLoad = () => {
M.Materialbox.init(this.imageRef.current);
};
render() {
return (
<img
src="..."
alt="..."
className="materialboxed"
ref={this.imageRef}
onLoad={this.onLoad}
/>
);
}
}
export default Image;
an interesting thing to note - it didnt work when i was trying M.init inside componentDidMount maybe because the image doesnt load by the time the call to componentDidMount is made.
react-materialize will surely make things easier if you want to use a lot of JS using components like modals etc.
There are possible ways that I can recommend to use:
One way is just include your stylesheet file in index.html and use
className property in your React components just like this.
var myDivElement = <div className="foo" />;
ReactDOM.render(myDivElement, document.getElementById('example'));
Another way is to bundle all your stylesheeets in one stylesheet file and to use them as previous one.
One option could be to use webpack. By using webpack, it is possible to use embedded stylesheets in jsx files just by requiring stylesheet that you want to include.
require("./stylesheet.css")
To examine in detail webpack stylesheet option: http://webpack.github.io/docs/stylesheets.html
Also see JedWatson's classnames repo for conditional className usage.
https://github.com/JedWatson/classnames
Solution Without index.html
From react-materialize - Installation
npm install materialize-css
npm install react-materialize
In your App.js or App.jsx add
import "materialize-css/dist/css/materialize.min.css";
import "materialize-css/dist/js/materialize.min.js";
Usage Examples:
Example 1
import React from "react";
import { Button } from "react-materialize";
export default function CustomMediaBox() {
return <Button> Click Me </Button>;
);
}
Example 2
import React from "react";
import { MediaBox } from "react-materialize";
export default function CustomMediaBox() {
return (
<MediaBox
options={{
inDuration: 275,
onCloseEnd: null,
onCloseStart: null,
onOpenEnd: null,
onOpenStart: null,
outDuration: 200
}}
>
<img
alt=""
src="https://materializecss.com/images/sample-1.jpg"
width="650"
/>
</MediaBox>
);
}
Optionally - Adding Icons
Although not required, if you want to use google icons, add the following to your App.css or any .css file imported from the App.js or App.jsx
#import url('https://fonts.googleapis.com/icon?family=Material+Icons');
Note
If you get an error like this:
./node_modules/react-materialize/lib/Breadcrumb.js
Module not found: Can't resolve 'classnames' in '/Users/artiomlk...
npm install classnames
Inorder to address the concern of bundle size, the easiest way to use it is as follows:
Include the CDN links in your index.html file
Initialize M in your React Component's constructor this.M = window.M
All the other required initializations in case of Modals and other Materialize Components can be done as mentioned in their Documentation using this.M
I like to do those initialization in the componentDidMount lifecycle method.
When unmounting i.e. inside componentWillUnmount, i use the destroy() method on the instances of initialized Materialize Components.
Install Materialize
npm i materialize-css#next
Initialize
import React, { useEffect } from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import M from 'materialize-css/dist/js/materialize.min.js';
function App() {
useEffect(() => {
M.AutoInit();
},[])
return (
<div className="App">
// content...
</div>
);
}
You can copy into "imports" folder and add by
import '../imports/stylesheets/materialize.min.css';
or use this for LESS example
#import '{}npm-package-name/stylesheets/...';
These answers didn't satisfy my biggest concern which was bundle size and importing a ton of code in order to use a few components. I've written up a solution here that includes code splitting and an easy compilation step.
The key points are:
Compile base JS files (there are 4)
Ensure the base JS is included before your imports / bundler runs
Change the CSS imports to only what you need
Run materialize.scss through your bundler if it supports Sass or run the compilation step to get a minified css file.
Import individual components and activate them manually
Read post for more details.
Use CDN:
<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
Then const M = window.M; to do initialization.
I don't know am I too late to put this answer.
You can use componentDidMount like this video
However, It does not use react-hooks. You'd better use react hooks (useEffects)
How to use materialize-css with React with icons and other js features
yarn add materialize-css#next --save or npm install materialize-css#next --save
yarn add install material-icons or npm install material-icons
3.Kindly import the following like this ;
snap
import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize';
import 'material-icons/iconfont/material-icons.css'
function App() {
return (
<div className="App">
<nav className="nave-wrapper">
<div className="container">
Logo
<ul className="right">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</nav>
<div className="container">
<i class="material-icons">add</i>
<i class="large material-icons">insert_chart</i>
<div class="row">
<form class="col s12">
<div class="row">
<div class="input-field col s6"/>
<i class="material-icons prefix">account_circle</i>
<input id="icon_prefix" type="text" class="validate"/>
<label for="icon_prefix">First Name</label>
</div>
<div class="input-field col s6">
<i class="material-icons prefix">phone</i>
<input id="icon_telephone" type="tel" class="validate"/>
<label for="icon_telephone">Telephone</label>
</div>
</form>
</div>
</div>
</div>
);
}
export default App;
Install Materialize
npm i materialize-css#next
npm install react-materialize
Initialize
import React, { useEffect } from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import M from 'materialize-css/dist/js/materialize.min.js';
const App = () => {
useEffect(() => {
// Init Materialize JS
M.AutoInit();
});
return (
<div className="App">
// content...
</div>
);
}
export default App;
Install materialize css via npm through npm install materialize-css#next
Add this code import 'materialize-css/dist/css/materialize.min.css' to your App.js file to add materialize globally so you don't have to call materialize in individual components.
Call materialize classes like so <button className="waves-effect waves-light btn blue darken-4"><i class="material-icons">add</i></button>
For materialize fonts add <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> to your index.html in the public folder and call the icons anywhere
Side note: I am using React 18.2.0. Also, I can send you my github code for you to go through.
I've got this weird message after following a React tutorial building a simple app.
http://blog.revathskumar.com/2014/05/getting-started-with-react.html
I used bower to install react and included the scripts like so:
<script src="bower_components/react/react.js"></script>
<script src="bower_components/react/JSXTransformer.js"></script>
as in the tutorial.
At first I thought the scripts weren't loaded but that's obviously not the case.
What is the problem?
These days it is
ReactDOM.render(
and include the source file:
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js"></script>
This is the warning from React:
Warning: React.render is deprecated. Please use ReactDOM.render from require('react-dom') instead.
bower installs the latest version in this case version 0.12.0.
there is a change in the render function convention.
https://facebook.github.io/react/blog/2014/10/28/react-v0.12.html
Component has been removed from all of our React.render* methods.
so use
React.render(
instead of
React.renderComponent(
Lately 'React.render()' is depreciated So use 'ReactDom.render()'
import React from 'react';
import ReactDom from 'react-dom';
import App from './components/App.jsx';
require('./main.scss');
ReactDOM.render(<App />, document.getElementById('container'));
I had the same problem; I followed the tutorial precisely and I got the same error you did.
These are the changes I needed to make to get it to work...
npm install --save react-dom
changed index.jsx content:
/** #jsx React.DOM */
'use strict'
var ReactDOM = require('react-dom')
var Hello = require('./Hello')
ReactDOM.render(<Hello />, document.getElementById('content'))
And that got it
I'm very new to react, so this may not be the best solution, but it's mine for now.
edit : I've since found another, more recent walkthrough (which works)
https://www.twilio.com/blog/2015/08/setting-up-react-for-es6-with-webpack-and-babel-2.html
Download the latest React Starter Kit -> https://facebook.github.io/react/downloads.html
Use react.js and react-dom.js files on the build folder.
Instead of using the "text/jsx" use "text/babel" instead, referencing this minified library -> https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js
Here's the full script for your reference
<div id="target-container"></div>
<script src="build/react.js"></script>
<script src="build/react-dom.js"></script>
<script src="build/browser.min.js"></script>
<script type="text/babel">
var MyComponent = React.createClass({
render: function(){
return(
<h1>Sample text</h1>
);
}
});
ReactDOM.render(
<MyComponent/>,
document.getElementById('target-container')
);
</script>
you should write ReactDOM.render ,instead of React.render.
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/0.14.0/react-dom.js
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js
These three javascript is required