So I just got comfortable with ReactJS within a few and want to actually start creating things with it. Before starting to really get into coding it, I made a basic test to see if React is doing what it is supposed to, and it's not. It's not rendering at all, and I don't see any Syntax errors in the code.
<style> in the index file is just for test of course, I'll use Sass later in external files of course. What am I missing or doing wrong here? Thank you in advance.
var React = require('react');
var ReactDOM = require('react-dom');
var Box = React.createClass({
render: function () {
return (
<div>
<h1>React</h1>
<h1>React2</h1>
</div>
);
}
});
ReactDOM.render(<Box />, document.getElementById('app'));
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="app.js"></script>
<style>
body {
height: 100%;
width: 100%;
background-color: rebeccapurple;
}
#app {
height: 100px;
width: 100%;
background-color: rgba(255,255,255,0.1);
}
* {
margin: 0 auto;
padding: 0;
}
h1, h2 {
color: white;
}
</style>
</head>
<body>
<div id="app"></div>
</body>
</html>
Follow these steps it will work:
1. Remove these lines:
var React = require('react');
var ReactDOM = require('react-dom');
2. include the script after the div where you defined the id, like this:
<body>
<div id="app"></div>
<script src="app.js"></script>
</body>
3. Include the reference of babel, it required to transpile the JSX code into plain js code, include this reference in header:
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
4. Define the type of the script, like this:
<script src="app.js" type='text/jsx'></script>
Check the working example:
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type='text/jsx'>
var Box = React.createClass({
render: function () {
return (
<div>
<h1>React</h1>
<h1>React2</h1>
</div>
);
}
});
ReactDOM.render(<Box />, document.getElementById('app'));
</script>
</body>
</html>
Related
I can't see why my page isn't loading what's in the <h1> tag in my index.js file. I'm trying to make a practice app with ReactJS but it won't even let me get started. I've tried many things to rectify this but fell short every single time hence why I'm here.
Here's my index.html
<!DOCTYPE html>
<html>
<title>Lamda</title>
<marquee>Welcome to Lamda!</marquee>
<meta charset="utf-8">
<meta name="viewport" content="user-scalable = yes">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="index.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
</head>
<body>
<div id="LamdaPage"></div>
</body>
<script type="text/babel" src="index.js"></script>
</html>
Here's my index.js
var LamdaPage = React.createClass({
render: function () {
<div>
<h1>Why won't this show?</h1>
</div>
}
});
ReactDOM.render(<LamdaPage/>, document.getElementById("LamdaPage"));
You should note that a function must return value. In this case, render function must return value as HTML which you are putting as body of function
var LamdaPage = React.createClass({
render: function () {
return (<div>
<h1>Why won't this show?</h1>
</div>);
}
});
ReactDOM.render(<LamdaPage/>, document.getElementById("LamdaPage"));
I'm connected to my server via npm install -g http-server on Terminal, that's working fine. I just want to see if my h1 tag works so I can proceed to making a practice website. I feel like my mainPage.html may be a little off.
Here's my mainPage.html file:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" src="mainPage.js"></script>
</script>
</html>
Here's my mainPage.js file:
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
You need to import babel.js, react and reactDOM
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
Include the reference of react, react-dom and babel, Check this working code:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" >
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
</script>
</html>
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<title>Prueba</title>
</head>
<body>
<div class="prueba"></div>
</body>
</html>
CSS:
.prueba {
height: 100px;
width: 100px;
background-color: green;
}
JS (Edited):
var main = function() {
$('.prueba').click(function() {
$(this).removeClass('.prueba');
});
};
$(document).ready(main);
It (still) doesn't work. Can someone help me?
To select class, you should preface class name with a dot:
$('.prueba')
JQuery docs you may want to review.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Girl! Fly and eat the yogurt!</title>
<script src="js/easeljs-0.8.1.min.js"></script>
<script src="js/sketch.js"></script>
<script src="jquery-1.11.3.min"></script>
<link rel="stylesheet" href="css/particles.css">
<style type="text/css">
#frame {
position: relative;
text-align: center;
margin-top: 100px;
}
</style>
</head>
<body>
<div id = "frame">
<canvas class=" sketch" height="385" width="1440"></canvas>
</div>
<script src="js/particles.js"></script>
<script>
var canvas = $("#frame").get(0);
canvas.id = "gameView";
</script>
<script src="js/app.js"></script>
</body>
</html>
Would you please tell me how to get the canvas inside the div using either jQuery or vanilla JS in this specific case? And how to set an id for the captured canvas element?
var canvas = document.querySelector('canvas');
So I have the following index.html:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="public/css/bootstrap.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="lib/bootstrap.js"></script>
<script src="public/js/main.js"></script>
</body>
main.js
(function($){
// Object declarations goes here
var FormLoanView = Backbone.View.extend({
tagName: 'div',
template: _.template('<p class="text-uppercase">Uppercased text.</p>'),
initialize: function(){
var data = this.$el.html(this.template())
$('body').html(data)
}
})
$(document).ready(function () {
var LoanView = new FormLoanView({
});
});
})(jQuery);
I am trying to create <p class="text-uppercase">Uppercased text.</p> and append it to the body in my index.html. It does return the p element, but the bootstrap styles don't kick in because "Uppercased text." does not return with uppercase letters. Anyone know why this is happening? Can bootstrap classes not be using in _.template?
It looks like your bootstrap.css isn't included properly. Try using the CDN or fixing the relative path of the css file.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Project</title>
 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="lib/jquery-1.11.3.js"></script>
<script src="lib/underscore.js"></script>
<script src="lib/backbone.js"></script>
<script src="public/js/main.js"></script>
</body>
Here's an example using only the CSS: https://jsfiddle.net/9nm5f0x9/
You don't need to include the bootstrap JS file as another commenter stated.