Why local browser won't show anything? - javascript

i have start learning with reactjs and purely new.i have created a new app in react and wrote the following code in Blog.js:
import React,{Component} from 'react';
const blogBody=()=>{
return(
<div class="card">
<h2>TITLE HEADING</h2>
<h5>Written By Ali</h5>
<p>Some text..</p>
</div>
)
}
class Blog extends Component {
render() {
return (
<div>
<blogBody/>
</div>
);
}
}
export default Blog;
and my App.js is:
import React,{Component} from 'react';
import Blog from './Blog'
class App extends Component {
render() {
return (
<div className="container">
<Blog/>
</div>
);
}
}
export default App ;
when i execute npm start, it shows nothing. then when i go to developer tools it is saying under the tab
You need to enable JavaScript to run this app.
did i do anything wrong with my code or in any setting? but when i run he initial page after creating new app fresh, it is showing the react thing with enable src regular stuff.
where did i do wrong?
this is my first post....please let me know if i break any rules and please help..

Component names have to start with capital letters.
Since blogBody doesn't, it is treated as an unknown HTML element and just inserted into the DOM.

Related

Menu items get from json (created server side, Nextjs) don't appear in HTML source code

sorry if the title is not very clear.
I try to explain myself: my site is built with Next.js and retrieves data from Sanity Studio (CMS).
In Sanity the user can create menu items.
I have a menu in the footer component, one in the sidebar component and another one in the header component. The thing is, I can fetch sanity only in pages. So I created a function that, with each build, creates a JSON with all the information entered by the user.
Next, to have the menu items throughout the site, this JSON is imported into the "Layout" component and stored in a specific react context.
And everything works fine. But I noticed one thing: if I look in the source code of the page, the menu looks like this:
<nav>
<ul></ul>
</nav>
even though it is rendered perfectly in HTML.
I guess it is because I generate the JSON server side and when the page is created that information is not available.
Any ideas?
Thank you
EDIT: this is the Layout component where I imported the JSON file
import styles from '#styles/components/Layout.module.css';
import React from 'react';
//other imports...
//imported JSON
import globalData from '#client/global-manifest.json';
//this is the normalize function
import { normalizeNavigationFromRaw } from '#utils/normalizeNavigation';
//this is the navigation normalized
const navigationData = normalizeNavigationFromRaw(globalData?.navigation ?? {});
export default function Layout({ children }: { children: React.ReactElement }) {
// some functions for open/close modal ...
//context method to store navigation
const { setNavigation } = React.useContext<any>(GlobalSettingsContext);
//store navigation in context
React.useEffect(() => {
setNavigation(navigationData);
}, []);
return (
<>
<Head>
// some head code
</Head>
<main className={styles.container}>
<HeaderWrapper
toggleMenu={toggleMenu}
toggleContactPanel={toggleContactPanel}
/>
<SidebarMenu
isOpenMenu={isOpenMenu}
toggleMenu={toggleMenu}
ref={sideMenuRef}
/>
<ContactPanel
isOpenContact={isOpenContact}
toggleContactPanel={toggleContactPanel}
ref={panelRef}
/>
{children}
</main>
<Footer />
</>
);
}
the other components involved have only the navigation context imported from useContext and used. For example the footer:
import * as React from 'react';
//other imports...
import { GlobalSettingsContext } from '#contexts/GlobalSettings';
export default function Footer(): React.ReactElement {
const { navigation } = React.useContext(GlobalSettingsContext);
return (
<footer
className={
isSingleVehiclePage
? `${styles.footer} ${styles.morePadding}`
: styles.footer
}
>
<LayoutContainer>
<div className={styles.secondary}>
<div className={styles.social}>
{navigation.footerSocialIcon &&
navigation.footerSocialIcon.map((el: any, mainKey: number) => (
<Link key={mainKey} to={el.titleLink ?? ''}>
<span className={`icon-${el.iconClass ?? ''}`}></span>
</Link>
))}
</div>
</div>
</LayoutContainer>
</footer>
);
}
From the provided description i assume you are using getStaticProps. (although the it would be basically the same issue for getServerSideProps)
In order for data fetched to be pre-rendered in html, you need to pass it as props, returning it from getStaticProps.\
What you are doing is passing data to a react context, which is rendered after hydration takes place.
I advise you to review the basics of nextjs to understand what code is executed in the client and which is executed in the server, along with how pre-rendering works.
please check https://nextjs.org/docs/basic-features/pages

Cannot read property 'type' of undefined error while on Parcel React

I have the following component code for my previous JS code called home.js, which is supposed to show the home page of my website.
import React from 'react';
//import ReactDOM from 'react-dom';
function Home(props) {
return <main>
<header>
<h1>The [RETACTED] Club</h1>
<h2>🤔 Why [RETACTED]?</h2>
<p>Here we explain why the [RETACTED] club exists</p>
<h2>&#x2757 Risks of [RETACTED]</h2>
<p>The fun, challenges, and risks of the club will be explained here.</p>
<h2>&#x1f397 Why [RETACTED]?</h2>
<p>Here we explain the pros and cons of our launch site.</p>
</header>
<footer>
<p>© 2021, [RETACTED], SAGTRHYDTJHSYHSRTGAERFefef
[RETACTED]#gmail.com</p>
</footer>
</main>
}
export default Home;
// ReactDOM.render(contents,
//document.getElementById('root')
//);
This is the JS code I used to show that HTML.
import React from "react";
import ReactDOM from "react-dom";
import Home from "./home";
let contents = <Home />;
ReactDOM.render(contents, document.getElementById("root"));
I was supposed to type parcel index.html in the command prompt to make the home page work, but every time I try to save my file, I get this error.
Cannot read property 'type' of undefined
at Bundler.createBundleTree (C:\Users\Default.DESKTOP-7TNLM47\AppData\Roaming\npm\node_modules\parcel-bundler\src\Bundler.js:654:54)
at Bundler.createBundleTree (C:\Users\Default.DESKTOP-7TNLM47\AppData\Roaming\npm\node_modules\parcel-bundler\src\Bundler.js:721:12)
at Bundler.createBundleTree (C:\Users\Default.DESKTOP-7TNLM47\AppData\Roaming\npm\node_modules\parcel-bundler\src\Bundler.js:721:12)
at Bundler.bundle (C:\Users\Default.DESKTOP-7TNLM47\AppData\Roaming\npm\node_modules\parcel-bundler\src\Bundler.js:298:14)
I want to know how this error appeared and how I can fix it.
You can try add the CLI command --log-level verbose for order to know which problem you have. And perhaps you have to use the CLI --no-scope-hoist. You can find more info: docs parcel about scope-hoisting

How I can Highlight the code line in page with React.js in file .jsx?

I try some library but nothing done the job.
I try:
react-syntax-highlighter
(https://www.npmjs.com/package/react-syntax-highlighter)
after install and following the documentation the module always not found in my file .jsx. The dependency is in my package.json but the module is not found. (paranormal activity)
react-highlight
(https://github.com/akiran/react-highlight)
the module is found but don't work, the coloration of the line stay always dark
react-highlight
(https://www.npmjs.com/package/react-highlight)
... and more
If someone have any solution for color my text ^^
the code is :
import React, { useState, useEffect } from "react";
import Highlight from "react-highlight";
export const ButtonLib = () => {
return (
<div>
<pre>
<code id="foo" ref={myRef}>
<Highlight language="javascript">
import React from "react";
import { Button } from "Antd";
export const Button = () => {
return (
<span>
<Button size="small">Small</Button>
<Button size="medium">Medium</Button>
<Button size="large">Large</Button>
<JumboButton>Jumbo</JumboButton> <AuthenticationButton>Authentication</AuthenticationButton>
</span>
);
}
</Highlight>
</code>
</pre>
</div>
);
};
As Per the official documentation of react-highlight
Visit Adding Styles In React Highlight
From my perspective Adding a import statement in your component should work .
import 'highlight.js/styles/github.css';
react-highlight only converts your code in HTML with CSS classes. Without any CSS definitions, you won't see much of a difference.
You have to include CSS/styles from highlight.js, which are already included in the node package, so you can import one of them right away.
There is no need to add highlight.js as a dependency.
Instead of
import 'highlight.js/styles/github.css'
you could write:
import 'react-highlight.js/node_modules/highlight.js/styles/github.css'
You can preview all styles at https://highlightjs.org/static/demo/.

Rendering the component in the react as variable vs jsx component

The following code is taken from crate react app
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import '../node_modules/bootstrap/dist/css/bootstrap.min.css';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.register()
The below code i have written
const a =
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<a/>,document.getElementById('app'));
I am unable to see anything on my screen ,just a blank page but I changed the following line Now fine
ReactDOM.render(a,document.getElementById('app'));
render i have seen the syntax i came to know the first element must be jsx thinking this is also jsx but i want to know why i failed
2)i tryied with {a} also i failed a is also javascript method why it failed
You have two issues.
First one: React components must start with Uppercase, otherwise react thinks that they are standard HTML tags.
Second one: you are not rendering any component. The root of a react application must be a component.
So change your code to something like:
const Ex = () =>
(
<div>
<h1>Visibility Toogle </h1>
<button>Show details</button>
</div>
);
ReactDOM.render(<Ex/>,document.getElementById('app'));

React | Multiple render

I just want to know if there is any way I can "draw" in my index.html multiple <div id = "x" /> <div id = "y" /> with REACT, i mean.. i have all my site on index.html with all my template, so i only need to use REACT on an specifics sections...
i tried this i didnt work
HTML
<div id="test" />
<div id="app" />
<script src="public/bundle.js" charset="utf-8"></script>
JSX
import React from 'react';
import {render} from 'react-dom';
class App extends React.Component {
render () {
return (<h1>App</h1>);
}
}
class Test extends React.Component {
render () {
return (<h1>Test</h1>);
}
}
render(<App/>, document.getElementById('app'));
render(<Test/>, document.getElementById('test'));
then when i load the page only prints the <h1>Test</h1>... why?
I created a JSFiddle to try a few things out here: http://jsfiddle.net/pof580fd/1/
I found out that by explicitly closing each of the <div> tags I could get it to work, i.e.:
<div id="test"></div>
<div id="app"></div>
I did a little research and it appears that as div is not one of the HTML5 "void elements" (Listed here: https://www.w3.org/TR/html5/syntax.html#void-elements) it is not self-closing and you must use </div>. See this SO question for more details: Are (non-void) self-closing tags valid in HTML5?
Possibly some browsers are lenient about this (I'm using Chrome 52 right now) - but React is not, it appears. The error message I see in the console is:
Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
(Make sure you're using the "dev" version of React to see these)
You can create a new component and call from that.
import App from "./App";
import Test from "./Test";
class Program extends React.Component {
render() {
<div>
<div id="app"><App /></div>
<div id="test"><Test /></div>
</div>
}
}
and then call
render(<Program />), document.getElementById('...'));
We created a framework to do this with great success.
Have a look at React Habitat.
With it you can just register components eg:
container.register('SomeReactComponent', SomeReactComponent);
Then they auto resolve in the dom via:
<div data-component="SomeReactComponent"></div>

Categories