I'm Learning ReactJS Components and here my code is... I'm not getting where to save this file or in which folder I should keep this file?
<body>
<div id="anmol"></div> <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-core/5.8.24/browser.min.js"></script>
<script type="text/babel"> var NavBar = React.createClass({
render: function() {
return (
<div className='navbar navbar-deafult'>
<div className='navbar-header'>
<a className='navbar-brand'>React</a>
</div>
<div className="collapse navbar-collapse">
<ul className="navbar-nav nav navbar-right">
<li> Home Page </li>
<li> About Us </li>
</ul>
</div>
</div>
); } }); var HelloWorld = React.createClass({
render:function() {
return(
<div> <h1>{this.props.children} </h1></div>
); } }); var destination = document.querySelector("anmol"); ReactDOM.render( <div> <NavBar/> <HelloWorld>
HelloWorld</HelloWorld</div>,destination); </script>
</body>
it look's like you are learning react, I strongly advice you to use https://github.com/facebook/create-react-app which will set-up whole environment with babel webpack and everything for you, so you can start to play with React. Greeting and have fun with React.
You can use codesandbox.io as well!
I created the example you were working on in there with updated syntax.
https://codesandbox.io/s/n9227v5xkp
Related
I'm following the IdentityServer3 jsGettingStarted sample github sample
But I'm trying to do so using MVC.
(The IdentityServer itself is in a separate project and solution as per the sample documentation.)
Providing the index.html page is via a Controller-Action, which is fine.
The login popup "popup.html" which is actually "popup.cshtml" is also via a Controller action and it also displays, but it won't close and display the user credentials in the index page as shown in the Sample.
But putting a few alerts in, .. the user is definitely logged in.
I also tried moving the popup.html into the root of the project (as .html and not as .cshtml and changing the server's Client.cs' RedirectUris to reflect that change) but without success.
Is it because of the cshtml pages being served from my controller actions ?
The documentation says that this should display by calling the display function, but the "manager.events.addUserLoaded" function is not firing, which calls the display function.
I am using VS2017 MVC5 with Framework 4.8.
Thanks
<link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.css" />
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<script src="~/Scripts/oidc-client.js"></script>
<div>
<nav class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">JS Application</a>
</div>
</div>
</nav>
<div class="container main-container">
<div class="row">
<div class="col-xs-12">
<ul class="list-inline list-unstyled requests">
<li>Home</li>
<li><button type="button" class="btn btn-default js-login">Login</button></li>
</ul>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<div class="panel panel-default">
<div class="panel-heading">User data</div>
<div class="panel-body">
<pre class="js-user"></pre>
</div>
</div>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
// helper function to show data to the user
function display(selector, data)
{
if (data && typeof data === 'string')
{
data = JSON.parse(data);
}
if (data)
{
data = JSON.stringify(data, null, 2);
}
alert("selector=" + data);
$(selector).text(data);
}
var settings = {
authority: 'https://localhost:44302', // The url of the IdentityServer
client_id: 'js',
popup_redirect_uri: 'http://localhost:44888/Account/Popup',
response_type: 'id_token token',
scope: 'openid profile email',
filterProtocolClaims: true
};
var manager = new Oidc.UserManager(settings);
var user;
manager.events.addUserLoaded(function (loadedUser)
{
alert("userManager");
user = loadedUser;
display('.js-user', user);
});
$('.js-login').on('click', function ()
{
manager
.signinPopup()
.catch(function (error)
{
console.error('error while logging in through the current window or popup', error);
});
});
</script>
By creating a standalone project rather than trying to do it in already established project, I managed to get it to work. There were clashes in the scripts and css we were already using.
I'm so excited to post my first Stack Overflow query. :D
I recently started a Node.js course and with that, I just want to point out I'm not doing any hardcore stuff just yet.
I have a local node server running with nodemon. I started working with ejs and discovered that a forEach loop is melting my web page for some reason.
I tried doing research and sifting through my code removing certain parts piece by piece that weren't there before the issue until the issue went away and discovered that when I take the forEach loop out of my code in my ejs file, the problem goes away.
//this is my .js file located in my ./routes folder
const express = require('express');
const router = express.Router();
const admin_data = require('./admin');
router.get('/', (req, res, next) => {
const products = admin_data.products;
res.render('shop', {
page_title: 'Shop',
prods: products
});
});
//nothing too hectic.
//this is my ejs file located in my ./views folder.
<% if (prods.length > 0) { %>
<div class="grid">
<% forEach (var products in prods) { %> //if i remove this and it's closing '}' it works fine.
<article class="card product-item">
<header class="card__header">
<h1 class="product__title">product</h1>
</header>
<div class="card__image">
<img src="" alt="A Book">
</div>
<div class="card__content">
<h2 class="product__price">$19.99</h2>
<p class="product__description">A very interesting book about so many even more interesting things!
</p>
</div>
<div class="card__actions">
<button class="btn">Add to Cart</button>
</div>
</article>
<% } %>
</div>
<% } %>
I expect the code to render the page but instead receive an error:
"SyntaxError: Unexpected token { in C:\Users\Ruan
Buitendag\Documents\NodeJS\Practice Server\views\shop.ejs while
compiling ejs" in my vscode terminal and "Content Security Policy: The
page’s settings blocked the loading of a resource at inline
(“default-src”)" in my browser console.
EDIT: PS. I tried running the page in firefox developer edition, plain firefox and google chrome.
I think the problem is in your loop. Use forEach this way:
<% prods.forEach(function(product) { %>
<article class="card product-item">
<header class="card__header">
<h1 class="product__title">product</h1>
</header>
<div class="card__image">
<img src="" alt="A Book">
</div>
<div class="card__content">
<h2 class="product__price">$19.99</h2>
<p class="product__description">A very interesting book about so many even more interesting things!</p>
</div>
<div class="card__actions">
<button class="btn">Add to Cart</button>
</div>
</article>
<% }) %>
Alternatively you can use for...of loop like this:
<% for (var product of prods) { %>
...
Using requirejs, I can use simple routes like /register, but I always get an error when I try a nested route like /register/1 or something.
This works (where the route is just /register):
layout.js
define(['require', 'axios'], (require, axios) => {
const layout = `
<div class="container">
<div class="row">
<div class="header clearfix">
<nav style="padding-top: 10px">
<ul class="nav nav-pills pull-left">
<li role="presentation">
<h3>My App</h3>
</li>
</ul>
<ul class="nav nav-pills pull-right">
<li role="presentation">Login</li>
<li role="presentation">Register</li>
</ul>
</nav>
</div>
</div>
</div>
`;
if (window.location.pathname === '/') {
window.location.pathname = '/home'
}
axios.defaults.headers.common['authorization'] = Cookies.get('token')
return layout
})
register.js
define(['layout'], layout => {
if (window.location.pathname === '/register') {
console.log("Got it") // This works since the route is just '/register'
}
})
This does not work (where the route is /register/1):
layout.js
define(['require', 'axios'], (require, axios) => {
const layout = `
<div class="container">
<div class="row">
<div class="header clearfix">
<nav style="padding-top: 10px">
<ul class="nav nav-pills pull-left">
<li role="presentation">
<h3>My App</h3>
</li>
</ul>
<ul class="nav nav-pills pull-right">
<li role="presentation">Login</li>
<li role="presentation">Register</li>
</ul>
</nav>
</div>
</div>
</div>
`;
if (window.location.pathname === '/') {
window.location.pathname = '/home'
}
axios.defaults.headers.common['authorization'] = Cookies.get('token')
return layout
})
register.js
define(['layout'], layout => {
if (window.location.pathname === '/register/1') {
console.log("Got it") // Error
}
})
index.html
<!DOCTYPE html>
<html>
<head>
<title>My App</title>
<link
rel="stylesheet"
type="text/css"
href="/stylesheets/style.css">
<link
rel="stylesheet"
type="text/css"
href="/stylesheets/registration.css">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
crossorigin="anonymous">
<link
rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css"
integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"
crossorigin="anonymous">
<script
type="text/javascript"
src="/javascripts/styles/js.cookie.js">
</script>
<script data-main="config" src="require.js"></script>
<script>require(['config'])</script>
</head>
<body>
<div id="my-app"></div>
</body>
</html>
config.js
requirejs.config({
baseUrl: 'javascripts/views',
paths: {
allConversations: 'allConversations',
conversation: 'conversation',
home: 'home',
layout: 'layout',
loginView: 'login',
login: '../scripts/login',
logoutHandler: '../scripts/logout',
memberProfile: 'memberProfile',
profile: 'profile',
register: 'register',
conversationCount: 'conversationCount',
nav: 'nav',
axios: '//unpkg.com/axios/dist/axios.min',
jquery: [
'//code.jquery.com/jquery-3.3.1.min',
'//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min'
],
bootstrap: ['//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min'],
fontAwesome: ['//use.fontawesome.com/7973784de3'],
},
})
require([
'home',
'layout',
'loginView',
'login',
'logoutHandler',
'nav',
'register'
])
How do I use nested URL routes with requirejs?
First problem. You are loading config module twice. data-main attribute specifies what modules should be loaded after the RequireJS load. So the second line is basically a duplicate of this
<script data-main="config" src="require.js"></script>
<script>require(['config'])</script>
Please replace this with just
<script data-main="config" src="require.js"></script>
Second problem, you have syntax error in layout.js. Your syntax looks like JSX, not regular JavaScript. Please amend this or use RequireJS JSX files loader plugin -> https://github.com/philix/jsx-requirejs-plugin
Can you please show use you config module?
Cheers.
I have :
<div id="container" class="masonry js-masonry">
<div class="item">
<img width="128" alt="image.jpg" class="image" src="small/thumb_Jennifer_Aniston-wallpaper.jpg">
</div>
<div class="item">
<img width="128" alt="image.jpg" class="image" src="small/thumb_Jennifer_Aniston-wallpaper.jpg">
</div>
</div>
and:
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script type="text/javascript">
var container = document.querySelector('#container');
var msnry;
// initialize Masonry after all images have loaded
imagesLoaded( container, function() {
msnry = new Masonry( container );
});
</script>
Masonry work as axpected but images overlap.after I rezise the browser they show in the right way.
What is wrong? How shoud I do it?
I'm using node.js and flatiron plates for templating, and having trouble with scrambled output when using an array for data.
I would like to bind an array to list items with the ID "list"
JS:
var express = require('express');
var app = express.createServer();
var fs = require('fs');
var plates = require('plates');
var html = fs.readFileSync('plates.html', 'utf-8');
app.get('/', function(req, res) {
var data = {
list: [
"Alpha",
"Bravo",
"Charlie",
"Delta",
]
}
res.send(plates.bind(html, data))
})
app.listen(8080)
HTML:
<html>
<body>
<ul>
<li id="list">REPLACE</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
</body>
</html>
I would expect the output to look like this, where only the list items are repeated:
<body>
<ul>
<li id="list">Alpha</li>
<li id="list">Bravo</li>
<li id="list">Charlie</li>
<li id="list">Delta</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
</body>
</html>
However, I get this weird output and can't understand what the cause might be:
<html>
<body>
<ul>
<li id="list">Alpha</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li id="list">Bravo</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li id="list">Charlie</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li id="list">Delta</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
</body>
</html>
Any ideas?
(P.S. I know HTML doesn't allow for repeated IDs, it's just an example and not the issue)
Updated Information
I ran the tests that pksankara pointed out successfully, but if I modify the tests to use my markup, I get failures:
Modified test-16.html:
<ul>
<li class="components"></li>
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
Output:
<ul>
<li class="components">Union</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Director</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Broadway</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Plates</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic<li class="components">Resourceful</li>
</ul>
<div>
<h3>Hello World</h3>
<p>Clic
</ul>
<div>
<h3>Hello World</h3>
<p>Click the following button.</p>
<span>Go Back</span>
</div>
The following is an example on how to do this from the plates repository
Plates Bind: https://github.com/flatiron/plates/blob/master/test/api-test.js#L172
JSON: https://github.com/flatiron/plates/blob/master/test/fixtures/test-16.json
HTML: https://github.com/flatiron/plates/blob/master/test/fixtures/test-16.html
OUTPUT: https://github.com/flatiron/plates/blob/master/test/fixtures/test-16.out
I expect that you can imitate it.
(EDIT: The only bug is https://github.com/flatiron/plates/issues/47)