Is there an issue with how I imported react or am I just missing something small? Any feedback would be greatly appreciated. I'm pretty new to programming so there's probably a really simple solution here that I'm just not informed enough to see. Thanks.
Edit:
After taking out the commented out portion of the body, the component still doesn't render. I get this error
Uncaught SyntaxError: Unexpected token '<' (at index.html:22:13)
Can the file not understand that I'm trying to use a react component? Thanks.
2nd edit:
Solved it, I was missing type="text/babel" in the script element.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<!-- React Import -->
<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>
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<title>Markdown Previewer</title>
</head>
<script>
class App extends React.Component {
render() {
return(
<div class="">
Hi
</div>
);
}
}
ReactDOM.render(<App/>,
document.getElementById('app'));
</script>
<body>
<!--<wrapper>
<div id="app"></div>
<textarea name="name" rows="8" cols="80" id="editor"></textarea>
<div id="preview"></div>
</wrapper>-->
<!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>
</body>
</html>
remove comment braces: <!-- -->
and write just:
<wrapper>
<div id="app"></div>
<textarea name="name" rows="8" cols="80" id="editor"></textarea>
<div id="preview"></div>
</wrapper>
Related
I want to import reactjs or any framework app in html.
Example:
<html>
<head>
<title>Test Bot</title>
<style>
.chatbot-goes-here {
position: fixed;
bottom: 0;
right: 5rem;
}
</style>
</head>
<body>
<div id="chatbot-goes-here"></div>
</body>
<script src="./index.js"></script>
</html>
my index.js
const x = document.getElementById('chatbot-goes-here');
x.innerHTML = `<h1>hi</h1>`
Now in "index.js" i want my react app logic which is changing the "div" with id="chatbot-goes-here". So the idea is this index.js file will be hosted on cloud instance and someone can include the div and script file to use the chatbot.
you can import react in your html file using cdn link, You can copy the following template i have designed
<!DOCTYPE html>
<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>React practice</title>
</head>
<body>
<div id="root"></div>
<!-- React CDN Link -->
<script crossorigin src="https://unpkg.com/react#17/umd/react.production.min.js"></script>
<!-- React-DOM CDN Link -->
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.production.min.js"></script>
<!-- Babel CDN Link -->
<script src="https://unpkg.com/#babel/standalone/babel.min.js"></script>
<!-- Linking index.js file -->
<script src="index.js" type="text/jsx"></script>
</body>
</html>
You can easily do that using react cdn :
<head>
<script src="https://unpkg.com/react#16.13.1/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom#16.13.1/umd/react-dom.development.js">
<script src="https://unpkg.com/#babel/standalone#7.9.3/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const className = 'container';
const children = 'Hello World';
const props = {children, className};
const element = <div {...props} />;
ReactDOM.render(element, document.getElementById('root'));
</script>
</body>
Not sure to understand fully what you want. For what I understood if you want to import reactjs or any framework app in html you can use CDN or other similar links.
https://reactjs.org/docs/cdn-links.html
<script crossorigin src="YOUR FRAMEWORK LINK HERE"></script>
For exemple using react it looks like that :
<script crossorigin src="https://unpkg.com/react#17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom#17/umd/react-dom.development.js"></script>
More CDN libraries can be found here
I am trying to load react and material ui directly through a cdn but am unable to get material ui to work.
Here is the code I have tried so far
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bundleless React</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react#16/umd/react.production.min.js" crossorigin></script>
<script src="https://unpkg.com/react-dom#16/umd/react-dom.production.min.js" crossorigin></script>
<script src="https://unpkg.com/#material-ui/core/umd/material-ui.production.min.js" crossorigin="anonymous"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
<script src="./index.jsx" type="text/babel"></script>
</body>
</html>
index.jsx
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"));
The above code works fine with just React but when I try using a material UI component like below it throws an error.
index.jsx
ReactDOM.render(
<Button variant="contained" color="primary">
Hello World
</Button>,
document.getElementById("root")
);
The above code throws a Button is not defined error in the console. How exactly do I solve this?
I use Material Design with my non-Node.js app. I need to use the Material outlined textfield (with leading icon) in my HTML project. Material.io website shows JavaScript code for some components but does not show it for others. How can I add the outlined textfield component in my HTML project?
Below is my code:
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" />
</head>
<body>
<!--button class="mdc-button mdc-button--raised">Button</button-->
<div class="mdc-text-field mdc-text-field--outlined">
<input type="text" id="tf-outlined" class="mdc-text-field__input" />
<label for="tf-outlined" class="mdc-floating-label">Your Name</label>
<div class="mdc-notched-outline">
<svg>
<path class="mdc-notched-outline__path"></path>
</svg>
</div>
<div class="mdc-notched-outline__idle"></div>
</div>
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</body>
</html>
A fiddle for this code: jsfiddle
You really need to go through the documentation at mdc-textfield. Aside from the html fixes you will see below, be sure to notice the JavaScript that instantiates the textfield component (this is often what trips people up when they are trying to get started). You can also use mdc.autoInit() with data-mdc-auto-init markup to instantiate MDC components (see the Auto Init docs for details).
mdc.textField.MDCTextField.attachTo(document.querySelector('.mdc-text-field'));
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Material TextField Quick Start</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
<link href="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.css" rel="stylesheet">
<script src="https://unpkg.com/material-components-web#latest/dist/material-components-web.min.js"></script>
</head>
<body>
<label class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon">
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" tabindex="0" role="button">event</i>
<input type="text" class="mdc-text-field__input">
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading"></span>
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label">Label</span>
</span>
<span class="mdc-notched-outline__trailing"></span>
</span>
</label>
</body>
</html>
The MDL Docs themselves have resources on how to include the components just using the standard <link> and <script> tags.
Docs:
https://material.io/develop/web/docs/getting-started/
Almost done learning React on Codecademy, so I wanted to start coding something in it on my PC. I have put the directory onto my XAMPP server, but the React app still won't render.
class LandingPage extends React.Component {
render() {
return (
<h2>Hello</h2>
);
}
}
ReactDOM.render(<LandingPage />, document.getElementById('app'));
<!DOCTYPE html>
<html lang="en">
<head>
<title>ReactApp</title>
<meta name="author" content="Mae" />
<link type="text/css" rel="stylesheet" href="sass/design.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<link href="https://fonts.googleapis.com/css?family=Oxygen" rel="stylesheet">
<!-- import react, react-dom and babel-core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.0.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.0.0/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<body>
<div id="app">
</div>
<script type="text/babel" src="react-front.js"></script>
<!--Import jQuery-->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
</body>
</html>
I don't think any browser by default understands JSX. You need to set up the chain to compile your source to pure JS.
If you only want to play around I recommend using the Create React App.
See: https://reactjs.org/docs/installation.html#creating-a-new-application
I'm trying to just run the Angular Material grid layouts demo that can be found here titled Flex Percent Values.
Excerpts from my HTML code is as follows:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1" />
<!-- LINK TO LOCAL BUT HOW? -->
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/angular_material/1.0.0-rc4/angular-material.min.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="../../../bower_components/angular-material/modules/css/angular-material-layouts.css">
<base href="/">
</head>
<body data-ng-app="MyApp" data-ng-controller="MainCtrl">
<div layout="row" layout-wrap>
<div flex="30">
[flex="30"]
</div>
<div flex="45">
[flex="45"]
</div>
<div flex="25">
[flex="25"]
</div>
<div flex="33">
[flex="33"]
</div>
<div flex="66">
[flex="66"]
</div>
<div flex="50">
[flex="50"]
</div>
<div flex>
[flex]
</div>
</div>
<div ng-view></div>
<!-- Angular Material Dependencies -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-resource.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular-aria.min.js"></script>
<!-- Angular Material Javascript now available via Google CDN; version 0.11.2 used here -->
<script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.11.2/angular-material.js"></script>
When I add Material Angular elements like md-button they render, although anything layout related doesn't work. I've double checked that I'm importing all the stylesheets I need, and I think I am. I'm not sure what's wrong though.
You're linking to the CSS stylesheet of the 1.0.0-rc4 version but you're loading the scripts of the 0.11.2 version...
I'm pretty sure that this is the problem!