I am trying to include cdn link for my react js app. What would be the link to include material ui.
http://www.material-ui.com/#/
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>First React App</title>
<script crossorigin src="https://unpkg.com/react#16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
</head>
<body>
<div id="container" style="font-style: italic;"></div>
<script type="text/babel">
var destination = document.querySelector("#container");
ReactDOM.render(
<h1>My First App</h1>,
destination);
</script>
</body>
</html>
The way to include material ui is through npm rather than a CDN link like traditional Frontend frameworks or libraries.
The correct way to to do it is through npm packages.
You install the library by running
npm install material-ui
Then you can use it inside your react component as below
import React from 'react';
import ReactDOM from 'react-dom';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import MyAwesomeReactComponent from './MyAwesomeReactComponent';
const App = () => (
<MuiThemeProvider>
<MyAwesomeReactComponent />
</MuiThemeProvider>
);
ReactDOM.render(
<App />,
document.getElementById('app')
);
You can read more about it here http://www.material-ui.com/#/get-started/installation
Related
import { useState } from 'react';
const root10 = ReactDOM.createRoot(document.getElementById('Xy'));
const element10 = <Pile />;
root10.render(element10);
function Pile() {
return (
<img
src="https://i.imgur.com/QIrZWGIs.jpg"
alt="Alan L. Hart"
/>
);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Test Page-React</title>
</head>
<body>
<link rel="icon" type="./x-icon" href="./favicon.ico">
<h3>https://beta.reactjs.org/learn/describing-the-ui</h3>
<h4>https://transform.tools/html-to-jsx</h4>
<h5>https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules</h5>
<div id="Xy"></div>
<!-- Load React. -->
<!-- Note: if deploying, replace "development.js" with "production.min.js". -->
<script src="https://unpkg.com/react#18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#18/umd/react-dom.development.js" crossorigin></script>
<!-- Load your React component. -->
<script type="module" src="test.js"></script>
</body>
</html>
I am learning from the official react guide...I entered the code import { useState } from 'react'; on top of my js file..and jsx preprocessing is sucess but rendering in chrome is giving me console log as :
Uncaught TypeError: Failed to resolve module specifier "react". Relative references must start with either "/", "./", or "../".
Note:chrome rendering without the import { useState } from 'react'; works fine.
Babel versionn: 6.26.0 (babel-core 6.26.3) is installed as per react official install guide: npm install babel-cli#6 babel-preset-react-app#3
I've started to learn React lately and today to just memorize what i've learnt i decided to create a react component that contains a simple heading tag but i can't figure out why it won't be displayed in the browser here's my code
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
<script src="include-component.js" ></script>
</body>
</html>
and this is my react component which resides in file named include-component.js :
import React from "react";
import ReactDOM from "react-dom";
function IncludeComponent() {
return(
<TestComponent name="Hello Wolrd"/>
);
}
function TestComponent(props) {
return(
<h1>{props.name}</h1>
);
}
const app= document.getElementById('app');
ReactDOM.render(<IncludeComponent/>,app);
can someone tell me why my component won't render ?
You are using a confusing mixture of non-compiled code and compiled code. Did you checked your console? You surely have errors guiding you...
This is for when you don't have a compiler and React and ReactDOM will be available globally:
<script crossorigin src="https://unpkg.com/react#18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#18/umd/react-dom.development.js"></script>
I don't recommend you try this approach. It is sub optimal and none of the resources you will see online are using it.
Then you do this:
<script src="include-component.js"></script>
This will already cause an exception since you're using import statements inside this JS file, but you haven't said that it type="module". Normal JS files can't use import statements.
Finally you can't import React and ReactDOM like that anyway, since you imported the browser versions which just have global variables.
Instead just start a project with Create React App:
npx create-react-app my-app
cd my-app
yarn start
And start experimenting in that instead.
For completeness you would need to transform with babel:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
</div>
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/#babel/standalone/babel.js"></script>
<script type="text/babel">
function IncludeComponent() {
return(
<TestComponent name="Hello Wolrd"/>
);
}
function TestComponent(props) {
return(
<h1>{props.name}</h1>
);
}
const container = document.getElementById('app');
const root = ReactDOM.createRoot(app);
root.render(<IncludeComponent/>);
</script>
</body>
</html>
You must import the test component!!
import TestComponent from './TestComponent';
function App() {
return (
<div className="App">
<TestComponent name='hello world' />
</div>
);
}
export default App;
I am creating Spring boot application and i want my frontend to be with React. The problem comes from the fact that i cannot find a way to properly integrate the react component in my jsp page.
Here is the declaration of the component:
ReactDOM.render(<App />, document.getElementById('root'));
I want to point out that my jsp page is inside WEB-INF directory and i can successfully redirect to it via a controller, but my import of the component does not work and does not throw an error!
I tried to import it by the element id:
<%# page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>Intellij is trash</title>
</head>
<body>
ala bala
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.development.js" crossorigin></script>
</body>
</html>
Am i doing something wrong or missed some configuration?
Thanks in advance for your help!
After importing the React and ReactDOM scripts, import another script where you have written your component App. Assuming it is in App.js,
<script src="App.js"></script>
Now you need to render the component in the div with id="root". I will use babel to compile but you can do without it too. So after the import write:
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
Conclusion: Basically you need to import 4 files in this order: React, ReactDOM, Babel and your component.js files. Then you need to render the component in the div for it to work.
<script src="https://unpkg.com/react#16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6.15.0/babel.min.js"></script>
<script src="App.js"></script>
<script type="text/babel">
ReactDOM.render(<App />, document.getElementById('root'));
</script>
I am trying to use some pre-builtin react component from a library called ant design. Also, I would like to call the react and the component library through a cdnjs(don't wish to use webpack or else). How could I accomplish it? My approaches are like below and it's not working for me.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/antd/3.1.6/antd.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
import Button from 'antd/lib/button';
class Greeting extends React.Component {
render() {
return (<p><Button type="primary">Primary</Button></p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
)
</script>
</body>
</html>
You don't need to import, because when you use prebuilt version, it's already injected into a global variable call 'antd' (just like React)
I also updated a little bit your scripts because for React you need . the umd version and antd needs the with locale version.
However, using prebuilt version is strongly NOT RECOMMENDED be careful.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="https://unpkg.com/antd/dist/antd.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.2.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.2.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script src="https://unpkg.com/moment/min/moment-with-locales.js"></script>
<script src="https://unpkg.com/antd/dist/antd-with-locales.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const { Button } = antd;
class Greeting extends React.Component {
render() {
return (<p><Button type="primary">Primary</Button></p>);
}
}
ReactDOM.render(
<Greeting />,
document.getElementById('root')
)
</script>
</body>
</html>
I have a simple React App that I'm trying to load through using a CDN vs NPM.
My options.html file:
<!DOCTYPE html>
<html>
<head>
<title>My Test Extension Options</title>
<script src="https://fb...me/react-0.14.3.js"></script>
<script src="https://fb...me/react-dom-0.14.2.js"></script>
</head>
<body>
<div id="root"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
index.js
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>Hello world</div>
)
}
}
ReactDOM.render(<App />, document.getElementById('root'))
When I load up options.html in a browser, nothing is showing up when I expected to see Hello world. I checked the debugger and no errors are coming up.
What am I doing wrong?
I believe :
There is no need of type="text/babel"
<script src="index.js" type="text/babel"></script>
so it should be
<script src="index.js" ></script>