I am new to React and wanted to inject the nav bar I created in HTML, into my original document. However the React component isnt linking to the div in the HTML, I'm not really too sure as to what is wrong to be honest!
var NavBar = React.Component({
render () {
return (
<div className="nav">
<div className="bottom-nav">
<div className="container-fluid">
<img className="logo" src="assets/images/alt-logo-2.png" alt="Native Creative"></img>
<input className="menu-btn" type="checkbox" id="menu-btn" />
<label className="menu-icon" for="menu-btn"><span className="navicon"></span></label>
<ul className="menu">
<li className="item">Collection</li>
<li className="item">Inspiration</li>
<li className="item">Shop</li>
<li className="item">Contact</li>
</ul>
</div>
</div>
</div>
);
}
});
ReactDOM.render(
<NavBar />,
document.getElementById('navbar')
);
<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>
<head>
<meta charset="utf-8">
<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>
</head>
<body>
<!-- - - - - - - - NAVIGATION START - - - - - - - -->
<div id="navbar"></div>
<script src="javascript/navbar.js"></script>
<!-- - - - - - - - NAVIGATION END - - - - - - - -->
</body>
Use class NavBar instead var NavBar =
Here is the example:
class NavBar extends React.Component {
render() {
return (
<div className="nav">
<div className="bottom-nav">
<div className="container-fluid">
<img className="logo" src="assets/images/alt-logo-2.png" alt="Native Creative"></img>
<input className="menu-btn" type="checkbox" id="menu-btn" />
<label className="menu-icon" for="menu-btn"><span className="navicon"></span></label>
<ul className="menu">
<li className="item">Collection</li>
<li className="item">Inspiration</li>
<li className="item">Shop</li>
<li className="item">Contact</li>
</ul>
</div>
</div>
</div>
);
}
}
ReactDOM.render( <
NavBar / > ,
document.getElementById('navbar')
)
<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>
<div id='navbar'></div>
Correct syntax #1
var NavBar = React.createClass({ // ...})
Correct syntax #2
class Navbar extends React.Component { // ...}
Make sure you use a transpiler (e.g. Babel) or the JSX will not be interpreted correctly.
Related
Hi all i'am having problems when exporting React components to a App.js file, this App.js referenced on index.html is not been loaded.
I'am using react cdn on index.html
There follows (index.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="page"></div>
<script src="App.js" type="text/babel"></script>
</body>
</html>
There follows (App.js):
import HeaderComponent from "./Header";
import FooterComponent from "./Footer";
import AbcOrderedList from "./MainContent";
//Parent component
function App() {
return (
<div>
{/* Children component */}
<HeaderComponent />
<AbcOrderedList />
<FooterComponent />
</div>
);
}
ReactDOM.render(<App />, document.getElementById("page"));
There follows (Header.js):
export default function HeaderComponent() {
return (
<header>
<nav className="nav">
<img
className="nav-logo"
src="react-removebg-preview.png"
alt="react logo"
/>
<ul className="nav-items">
<li>Tools</li>
<li>View</li>
<li>Log out</li>
</ul>
</nav>
</header>
);
}
There follows (Footer.js):
export default function FooterComponent() {
return (
<footer className="footer">
<small>© 20xx Nathanzeira development. All rights reserved.</small>
</footer>
);
}
There follows (MainContent.js):
export default function AbcOrderedList() {
return (
<ol>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ol>
);
}
Thank you all!
I had to refactor a large codebase built on pure HTML, CSS, and javascript into a ReactJS and NextJS application. The codebase had a whole lot of links and scripts whereby some scripts applied for all pages while some applied for only specific pages.
In the set-up I did, I created a Meta.js file where I kept all links and scripts and also created a Layout.js file which held the Meta.js as well a common navbar and sidebar layout which was applied to all pages.
The issue I am facing presently now is that some scripts/functionality do not work unless the page is refreshed. For instance, I enter the application from the homepage which is the index.js file, and then navigate to the settings page, which is a settings.js file.
The settings.js page has some tab that uses some script in it but will not work unless I reload the page. What can be the issue with this and how can I fix this.
Here are some of the important files listed below:
Meta.js
import React from 'react'
import Head from 'next/head'
import Script from 'next/script'
const Meta = ({title, keywords, description}) => {
return (
<>
<Head>
<meta charSet="utf-8" />
<meta content="Webflow" name="generator" />
</Head>
<Script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></Script>
<Script src='/CustomScript.js'></Script>
<Script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js' strategy='beforeInteractive' crossOrigin="anonymous"></Script>
<Script src='/webflow.js'></Script>
<Script src='https://fengyuanchen.github.io/datepicker/js/datepicker.js'></Script>
<Script src='https://cdn.jsdelivr.net/npm/flatpickr'></Script>
<Script src='https://cdn.quilljs.com/1.3.6/quill.js' strategy='beforeInteractive'></Script>
</>
)
}
export default Meta
Layout.js
import Nav from "./Nav";
import Meta from "./Meta";
const Layout = ({children}) => {
return (
<>
<Meta />
<Nav/>
<div className="body">
<main>
{children}
</main>
</div>
</>
);
}
export default Layout;
_app.js
// styles
import '../styles/normalize.css'
import '../styles/webflow.css'
import '../styles/listwise.webflow.css'
import '../styles/styles.css'
// website constant layout
import Layout from '../components/Layout'
function MyApp({ Component, pageProps }) {
return (
<Layout>
<Component {...pageProps} />
</Layout>
)
}
export default MyApp
Nav.js
import React from 'react'
import Image from 'next/image'
import Link from 'next/link'
const Nav = () => {
return (
<div className="app-nav-layout">
<Link href="#"><Image src="/listwise-logo-black-nospace.svg" width={130} height={130} alt="" className="left-navbar-logo" /></Link>
</div>
<nav role="navigation" className="left-navbar-menu w-nav-menu">
<Link href="/dashboard/listings/addListing">Create new listing</Link>
<Link href="/">Dashboard<br/></Link>
<Link href="/dashboard/listings/allListings"><a className="left-navbar-link w-nav-link"><span className="material-icons-round md-18 mr-8">list_alt</span> Listings<br/></a></Link>
<Link href="/dashboard/settings/settings">Account settings</Link>
<Link href="/dashboard/listings/myListwise">My Listwise</Link>
</nav>
</div>
)
}
export default Nav
settings.js
import React, {useState} from 'react'
import Head from "next/head"
import Script from "next/script"
const settings = () => {
return (
<>
<Head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
<link rel="stylesheet" href="https://unpkg.com/filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css" />
<link rel="stylesheet" href="https://unpkg.com/filepond/dist/filepond.min.css" />
<Script src="https://unpkg.com/filepond-plugin-file-encode/dist/filepond-plugin-file-encode.min.js"></Script>
<Script src="https://unpkg.com/filepond/dist/filepond.min.js"></Script>
</Head>
<div className="app-main-layout-container">
<div className="tabs-menu w-tab-menu">
<a data-w-tab="Personal" className="tab-link w-inline-block w-tab-link w--current">
<div className="material-icons-round md-24 icon-acc-settings">person</div>
<div className="tab-text">Personal profile</div>
</a>
<a data-w-tab="Business" className="tab-link w-inline-block w-tab-link">
<div className="material-icons-round md-24 icon-acc-settings">store</div>
<div className="tab-text">Business profile</div>
</a>
<a data-w-tab="Social" className="tab-link w-inline-block w-tab-link">
<div className="material-icons-round md-24 icon-acc-settings">share</div>
<div className="tab-text">Social links</div>
</a>
</div>
<div className="tabs-content w-tab-content">
<div data-w-tab="Personal" className="w-tab-pane w--tab-active">
<div className="w-form">
<form id="wf-form-profile" name="wf-form-profile" data-name="profile" method="get">
<div className="form-group"><label htmlFor="name-4" className="label">Upload profile photo</label>
</form>
</div>
<div data-w-tab="Business" className="w-tab-pane">
<div className="w-form">
<form id="wf-form-profile" name="wf-form-profile" data-name="profile" method="get">
<div className="form-group"><label htmlFor="name-4" className="label">Business name</label>
<div className="hint marginb--20px">This is usually the name you work under</div><input type="text" className="input w-input" maxLength="256" name="Business-Name" data-name="Business Name" placeholder="Enter business name" id="business-name" required="" />
</form>
</div>
<div data-w-tab="Social" className="w-tab-pane">
<div className="w-form">
<form id="wf-form-profile" name="wf-form-profile" data-name="profile" method="get">
<div className="form-group"><label htmlFor="instagram-link" className="label">Instagram profile link</label><input type="text" className="input w-input" maxLength="256" name="Instagram-Link" data-name="Instagram Link" placeholder="www.instagram.com/myname" id="instagram-link" /></div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</>
)
}
export default settings
Also, I will like to ask how best to render those scripts that only work for specific pages, should I add the to the Meta.js file which gets loaded on the initial rendering of the application, or creates a separate file and add it to the page that needs it when the page is navigated to.
The Nextjs Script component can take a strategy prop. It has a default value of afterInteractive which means the script will first load the main javascript that's necessary for the page to become interactive before the script you've linked in the Script tag.
If you need any script to load early because some functionality of your page relies on it you'd want to set the strategy prop to beforeInteractive like so:
<Script src=" ... " strategy="beforeInteractive" />
More information on Next docs
I am also facing this issue but for the time being i just fixed this issue by importing all script code into useEffect here i am removing all events before my script code in useEffect
useEffect(() => {
$(document).ready(function () {
var allElems = $('body').find('*');
allElems.each(function () {
var elm = this, //javascript DOM object
$elm = $(this) //jquery object for element.
$elm.off();
// your script code here
});
});
I'm having trouble "appending" a child component (NewPageSidear) to a specific ID higher up and outside (Main) the parent component (NewPage) that is loading the child component.
I have the following DOM structure that is created in Main.jsx, which is loaded on page load to index.html:
render(){
return(
<div id="wrapper" className="wrapper">
<Header />
<div id="content" className="content">
<Sidebar />
<div id="main" className="main">
<div className="section-title">
<h2>{this.state.pageTitle}</h2>
</div>
<div id="main-content" className="main-content"></div>
<Footer />
</div>
</div>
</div>
);
}
On page load, I do:
ReactDOM.render(<Dashboard/>,document.querySelector('#main-content'));
ON the Dashboard page, I'll click a button that will execute the following and replace the Dashboard with NewPage:
ReactDOM.render(<NewPage/>,document.querySelector('#main-content'));
My Problem is here:
When NewPage loads, there is a child component, NewPageSidebar that I want to append to #content. If I can get NewPageSidebar to append #content, then I can use componentWillUnmount to remove NewPageSidebar when unmounted. But how do I get NewPageSidebar appended to #content? Any help is very appreciated.
You can do something like:
ReactDOM.render(<NewPage newSidebar={true}/>,document.querySelector('#main-content'));
And in the NewPage:
render(){
return(
<div id="wrapper" className="wrapper">
<Header />
<div id="content" className="content">
<Sidebar />
{this.props.newSidebar ? <NewSidebar /> : null}
<div id="main" className="main">
<div className="section-title">
<h2>{this.state.pageTitle}</h2>
</div>
<div id="main-content" className="main-content"></div>
<Footer />
</div>
</div>
</div>
);
}
Can't call .tabs() function from materialize, everything looks imported and in the right order, materializecss then jQuery then materialize.js. jQuery functions work fine, materialize - don't
$(...).tabs is not a function
The problem should be somewhere in import but I can't get what's wrong.
index.html
<link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!-- Import materialize.css -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css" rel="stylesheet" >
<title>Title</title>
</head>
<body>
<div id="root"></div>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/js/materialize.min.js"></script>
</body>
Component where I'm calling from
import React,{Component} from 'react';
import {Tab,Tabs} from 'react-materialize'
export default class Tab1 extends Component{
next(){
let $ = require('jquery');
$('ul.tabs').tabs('select_tab','tab_01');
// alert();
}
render(){
return(
<div className="swipeTab" >
<a onClick={()=> this.next()} className="waves-effect btn onasTabTrigger hoverable">Button</a>
</div>
);
}
}
This Tab1 component is simply placed as a content of the tab in the parent
<Tabs className='tabs z-depth-1' tabOptions={{swipeable: true }} onChange={() => console.log(this)}>
<Tab title="tab1" active >
<Tab1 />
</Tab>
<Tab title="tab2" >
<Tab2/>
</Tab>
</Tabs>
Put tab initialisation in componentDidMount.
Remove initialisation from click event on next call.
//onClick={()=> this.next()} remove it
component :
let $ = require('jquery');
export default class Tab1 extends Component{
componentDidMount(){
//initialisation goes here.
$('ul.tabs').tabs('select_tab','tab_01');
}
render(){
return(
<div className="swipeTab" >
<a className="waves-effect btn onasTabTrigger hoverable">Button</a>
</div>
);
}
}
I am using django and reactjs for developing my app. I am trying to create a login form with modal effect using reactjs and semantic-ui but I am getting an error Uncaught ReferenceError: AddLoginModalEvent is not defined.
My code
base.html
<div class="ui large top fixed hidden menu navbar">
<div class="ui container">
<a class="active item"></a>
<div class="ui buttons">
<a class="ui button tomato pair" onClick="AddLoginModalEvent()">Login</a>
<div class="or"></div>
<a class="ui positive button pair">Signup</a>
</div>
</div>
</div>
<div id="loginmodal"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="{% static 'js/semantic.min.js' %}"></script>
<script type="text/javascript" src="{% static 'build/js/app.js' %}"></script>
<script type="text/javascript">
var data = {
isUserAuthenticated:{% if request.user.is_authenticated %}true{% else %}false{% endif %}
};
$(function() {
app.showLoginModal("loginmodal",data);
});
</script>
Index.js
(entry: "./src/index.js",) its a entry point in webpack
import LoginModal from 'homepage/LoginModal';
window.app = {
showLoginModal: function(id,data){
ReactDOM.render(
<LoginModal data={data} />, document.getElementById(id)
);
},
}
LoginModal.js
function AddLoginModalEvent(){
let event = document.createEvent('Event');
event.initEvent('addLoginModal', true, true);
document.dispatchEvent(event);
}
class LoginModal extends React.Component {
constructor(){
super();
this.state = {
showModal:'none'
}
}
componentDidMount() {
document.addEventListener('addLoginModal', (e) => {
this.showModal();
}, false);
$('.ui.modal').modal({detachable: false});
}
showModal(){
this.setState({ showModal:'inherit' });
$('.ui.modal.editform').modal('show');
}
closeModal(){
this.setState({ showModal:'none'});
}
render() {
const style = { display:this.state.showModal, top:'50px' };
const close = <div className="ui black deny button" onClick={this.closeModal}> Nope </div>;
return (
<div>
<AddLoginModal style={style} title="Login" close={close} />
</div>
);
}
}
class AddLoginModal extends Component{
render(){
return(
<div style={this.props.style}>
<div className="ui modal editform">
<div className="ui middle aligned center aligned grid">
<div className="column">
<h2 className="ui teal image header">
<div className="content">
Log-in to your account
</div>
</h2>
</div>
</div>
</div>
</div>
)
}
}
export default LoginModal;
Where am i doing wrong?