30 days of React (Day 4) pdf - javascript

I was following the 30 days of react pdf for day 4 and I can't seem to get the css to render at all. I can get the text and image to show.
I tried to basically copy the the helloworld concept but I put everything in one html for now. I also tried day 4 example from github and the index.html doesn't render anything either. In so, if anyone know why, can you please help me out. Thanks in advance.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34f602dccd6ca855df1/raw/070d6cd5b4d4ec1a3e6892d43e877039a91a9108/timeline.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<title>Time Line App</title>
<!-- Script tags including React -->
<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.26.0/babel.min.js"></script>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
class App extends React.Component { render() { return (
<div className="notificationsFrame">
<div className="panel">
<Header />
<Content />
</div>
</div>
) } } class Header extends React.Component { render() { return (
<div className="header">
<div className="fa fa-more"></div>
<span className="title">Timeline</span>
<input type="text" className="searchInput" placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
) } } class Content extends React.Component { render() { return (
<div className="content">
<div className="line"></div>
{/* Timeline item */}
<div className="item">
<div className="avatar">
<img alt='Doug' src="http://www.croop.cl/UI/twitter/images/doug.jpg" /> Doug
</div>
<span className="time">
An hour ago
</span>
<p>Ate lunch</p>
<div className="commentCount">
2
</div>
</div>
{/* ... */}
</div>
) } } var mount = document.querySelector('#app'); ReactDOM.render(
<App />, mount);
</script>
</body>
</html>

Problem solved. So it just needed to add the class = "demo" to the div id = "app"></div>.
So it should like this this: <div id="app" class="demo"></div>. Also I had to download the css locally. Haven't got it work from the link given in the css. There was some minor css difference from the pdf image.

Related

Import/Export in VSCode Javascript for React

I'm following a tutorial on React course.
Currently, I'm trying to make a react info website. I'm trying to import a component of react but it does not load on the 'live' website. (I have a live server extension added on VSCode)
Code:
HTML:
<html>
<head>
<link rel="stylesheet" href="index.css">
<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>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<div id="root2"></div>
<script src="index.js" type="text/babel"></script>
</body>
</html>
JavaScript:
import { Header } from './Header'
function Page() {
return (
<div>
<Header />
<MainContent />
<Footer />
</div>
)
}
function MainContent() {
return ( Listed info in HTML format
)}
function Footer() {
return (footer tag in HTML format
)
}
ReactDOM.render(<Page />, document.getElementById("root"))
React/Javascript component:
export function Header() {
return (
<header>
<nav className="nav">
<img className="nav-logo" src="../React info web/images/react_logo.png" />
<ul className="nav-items">
<li>Pricing </li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</header>
)
}
I've noticed that when I remove 'import' and '' in 'Javascript'. The website loads up perfectly.
I'm utterly confused and need assistance. I tried combing through the documentation and
still can't figure out what wrong

A react component is not rendered even after calling it through ReactDOM.render( ) method

I am creating a simple voting_app in React while learning from a book.I have an index.html file,all the css files are in respective folders,app1.js file,I've put all those files below.
The issue is when i call a component app1.js through ReactDOM.render() method ,it doesn't show in the browser.
app-1.js
class ProductList extends React.Component {
render() {
return (<div className='ui unstackable items'>
Hello, friend! I am a basic React component.
</div>);
}}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
Index.html
<html>
<head>
<meta charset="utf-8">
<title>Project One</title>
<link rel="stylesheet" href="./semantic.css"/>
<link rel="stylesheet" href="./style.css"/>
<script src="vendor/babel-standalone.js"></script>
<script src="vendor/react.js"></script>
<script src="vendor/react-dom.js"></script>
Your first React Web Application14
</head>
<body>
<div class="main ui text container">
<h1 class="ui dividing centered header">Popular Products</h1>
<div id="content"></div>
</div>
<script type="text/babel"
data-plugins="transform-class-properties"
src="./js/app.js"></script><!--Delete the script tag below to get started.-->
<script src="vendor/react.js"></script>
</body>
</html>
The problem might comes from the babel transpilation, try to use the following script declaration (also note that your script file is named app-1.js not app.js)
<script type="text/babel" src="js/app-1.js" data-presets="es2015,react"></script>
As you can see below, your component is displayed correctly
class ProductList extends React.Component {
render() {
return (
<div className='ui unstackable items'>
Hello, friend! I am a basic React component.
</div>
);
}
}
ReactDOM.render(
<ProductList />,
document.getElementById('content')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="content"></div>

How we can achieve navigation to another page in LWC OSS

I have two files created in LWC OSS app
first file at src/client/index.html and src/client/index.js
second file at src/client/index2.html and src/client/index2.js
I want to navigate to index2.html when clicked on the button in my-app (LWC component) which is appended using index.js
Am new to express js and node js. Please help!
Below is the code of the files,
index.html (File location: src/client/index.html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>My LWC App</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
}
</style>
<!-- Block zoom -->
<meta
name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1"
/>
<link rel="shortcut icon" href="./resources/favicon.ico" />
</head>
<body>
<div id="main"></div>
</body>
</html>
index.js (File location: src/client/index.js)
import { createElement } from 'lwc';
import MyApp from 'my/app';
const app = createElement('my-app', { is: MyApp });
// eslint-disable-next-line #lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
app.html (File location: src/client/modules/my/app/app.html)
<template>
<!-- LWC sample component <my-greeting> -->
<div class="center greeting">
<!-- <my-greeting speed="slow"></my-greeting> -->
<my-greeting speed="medium"></my-greeting>
<!-- <my-greeting speed="fast"></my-greeting> -->
</div>
<div class="center">
<img src="./resources/lwc.png" />
</div>
<!-- Page code -->
<div class="center">
<div class="container">
<!-- prettier-ignore -->
<p class="info">
Edit <strong class="code">src/client/modules/my/app/app.html</strong>
<br />and save for live reload.
</p>
</div>
<div>
Learn LWC
<button onclick={redirect}>Click to redirect</button>
</div>
</div>
</template>
app.js (File location: src/client/modules/my/app/app.js)
import { LightningElement } from 'lwc';
export default class App extends LightningElement {
redirect(){
//code for to navigate to index2.html
}
}
index2.html (File Location: src/client/index2.html)
<html lang="en">
<body>
<div id="main"></div>
</body>
</html>
index2.js (File Location: src/client/index2.js)
import { createElement } from 'lwc';
import MyNewApp from 'my/newApp';
const app = createElement('my-app', { is: MyNewApp });
// eslint-disable-next-line #lwc/lwc/no-document-query
document.querySelector('#main').appendChild(app);
7.newApp.html (File location: src/client/modules/my/newApp/newApp.html)
<template>
<h1> Redirected to index2 --> newApp </h1>
</template>
Please let me know if you need more information.
Thanks,
Navaprasad

How to fix "Warning: Unknown props `change-background`, `colorcode` on <div> tag. Remove these props from the element" error?

I'm having problems with loading a page that has been packed with Webpack. Im using React to render the page HTML. When I open my html in my web browser, it gives me the following error:
Warning: Unknown props `change-background`, `colorcode` on <div> tag. Remove these props from the element.
in div (created by Component)
in div (created by Component)
in Component"
My html is:
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="cssWEB.css">
<link href="https://fonts.googleapis.com/css?family=Bungee+Hairline" rel="stylesheet">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body data-ng-app="App">
<div id="root"></div>
<script src="public/bundle.js" type="text/javascript"></script>
</body>
</html>
My JS is:
import React from 'react';
import ReactDOM from 'react-dom';
import {Element, scroller} from 'react-scroll';
const Component = React.createClass({
componentDidMount: function() {
scroller.scrollTo('myScroller', {
duration: 1500,
delay: 500,
smooth: true
});
},
render: function() {
return (
<div>
<link rel="stylesheet/less" href="style.less" type="text/css" />
<script src="http://lesscss.googlecode.com/files/less-1.0.21.min.js"></script>
<link type="text/javascript" href="jscode.js"></link>
<header>
La Barriada
</header>
<div className="cube" change-background colorcode="#f45642" ref={(el) => { this.messagesEnd = el; }}>
<div className="front"><span>Experience</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
<div className="wrap2">
<div className="cube" change-background>
<div className="front" colorcode="#f45642"><span>Work</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
</div>
<div className="wrap3">
<div className="cube" change-background>
<div className="front" colorcode="#f45642"><span>Contact</span></div>
<div className="back"></div>
<div className="top"></div>
<div className="bottom"></div>
<div className="left"></div>
<div className="right"></div>
</div>
</div>
<Element name="link1">
<div className="bg2" id="linkhere"></div>
</Element>
<div className="slide1">
</div>
<div className="slidechild1">
<div className="centerbox">
<div className="center">
<ul>
<li data-ng-click="clicked2()" id="B1">aa</li>
<li id="B2">cc.i</li>
</ul>
</div>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<Component />,
document.getElementById("root")
);
What is causing this error and how can I fix it?
You might want to double check if those attributes are sorted by React. You can do so by reading the docs page here.
It doesn't look like those DOM attributes change-background or colorcode are
supported.
EDIT: The same docs state that:
In React, all DOM properties and attributes (including event handlers)
should be camelCased. For example, the HTML
attribute tabindex corresponds to the attribute tabIndex in React.
So it might be worth trying changeBackground and colorCode respectively in your JSX and see if that does the trick.
ReactJS currently don't supports custom attributes as specified here. It strips of unknown attributes. You can solve the problem by manually adding the attribute in the componentDidMount method as specified in this SO answer.
You can't use any custom attributes as a prop. Rather you should use valid html attributes. React supports almost every valid html attributes. Here is the list of valid html attributes supported by React.

Starting with React

I am trying to learn React. I am using the React docs itself to learn. So I was trying to render a Component called Comment on the screen. But nothing is getting rendered. I am not getting any error either.
I am using the template provided by the documentation itself called create-react-app to get a default react app and then I replaced the default App component with the Comment Component in ReactDom.render(). Is there something else that I am supposed to be doing?
What am I doing wrong here??
These is my code:
index.html:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
My js file
import React from 'react';
import ReactDOM from 'react-dom';
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img
src={props.author.imgUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{props.date}
</div>
</div>
);
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
imgUrl: 'http://placekitten.com/g/64/64'
}
};
ReactDOM.render(
<Comment
author={comment.author}
text={comment.text}
date={comment.date}
/>,
document.getElementById('root')
);
This appears to fix your problem:
function Comment(props) {
return (
<div className="Comment">
<div className="UserInfo">
<img
src={props.author.imgUrl}
alt={props.author.name}
/>
<div className="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{props.date.toString()}
</div>
</div>
);
}
const comment = {
date: new Date(),
text: 'I hope you enjoy learning React!',
author: {
name: 'Hello Kitty',
imgUrl: 'http://placekitten.com/g/64/64'
}
};
ReactDOM.render(
<Comment
author={comment.author}
text={comment.text}
date={comment.date}
/>,
document.getElementById('root')
);
All I did was turn the date object into a string in the Comment function.

Categories