I tried to installLlaravel and scaffold ReactJs.
I have a problem in running my react component.
The installation was fine and
Below is my first ReactJs component. However I cannot display the content of the react component.
components/Example.js
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
export default class Example extends Component {
render() {
return (
<div className="container">
<div className="row justify-content-center">
<div className="col-md-8">
<div className="card">
<div className="card-header">Example Component</div>
<div className="card-body">I'm an example component!</div>
</div>
</div>
</div>
</div>
);
}
}
if (document.getElementById('example')) {
ReactDOM.render(<Example />, document.getElementById('example'));
}
Here is the file welcome.blade, inside the body
<div id="example"></div>
<script src="/js/app.js"></script>
It should display like this,
Example Component
I'm an example component!
install nodejs and npm
run npm run dev for development and npm run prod for production on your laravel root directory
Related
I am having some troubles integrating a component from the outside library 'react-calendly', the PopUpButton widget specifically, that requires the parent DOM node to be inserted into. My current understanding is that my issue is being caused by the fact that Next.js uses SSR and therefore I do not have access to the browser. How can I work around this? For reference, my website is a very simple fullstack app for his business and I am new to React/full-stack development. Here is the code for the app portion that renders my page components:
import '../styles/globals.css'
import styles from '../styles/App.module.css'
import Navbar from '../components/navbar'
import Footer from '../components/footer'
function MyApp({Component, pageProps}) {
return (
<div className={styles.app}>
<div>
<Navbar />
</div>
<div className={styles.body} id="body">
<Component props={pageProps} />
</div>
<div>
<Footer className={styles.footer}/>
</div>
</div>
)
}
export default MyApp
And here is the code for my specific page component:
import styles from '../styles/Home.module.css'
import Head from 'next/head'
import { PopupButton } from 'react-calendly'
export default function Home() {
return (
<div className="home">
<Head>
<title>Homepage</title>
</Head>
<div className="cal_div">
<PopupButton
url="https://calendly.com/my_url"
rootElement={document.getElementsById("body")}
text="Click here to schedule!"
/>
</div>
</div>
)
}
I am learning Next.js as my side project and I encountered a method call error. The error is at the tz function as is the .
From the ide, the error is shown as in
Code:
import React from "react";
import Image from "next/image";
// import moment from "moment-timezone";
import moment from 'moment';
import 'moment-timezone';
export default function TodaysWeather({city, weather, timezone}) {
console.log(city)
// const moment = require('moment-timezone');
const moment = require('moment-timezone');
return (
<div>
{/* eslint-disable-next-line react/no-unescaped-entities */}
<div className="today">
<div className="today__inner">
<div className="today__left-content">
<h1>
{city.name} ({city.country})
</h1>
<h2>
<span>{weather.temp.max.toFixed(0)}°C</span>
<span>{weather.temp.min.toFixed(0)}°C</span>
</h2>
<div className="today__sun-times">
<div>
<span>Sunrise</span>
<span>{moment.unix(weather.sunrise).tz(timezone).format("LT")}</span>
</div>
<div>
<span>Sunset</span>
<span>{moment.unix(weather.sunset).format("LT")}</span>
</div>
</div>
</div>
<div className="today__right-content">
<div className="today__icon-wrapper">
<div>
<Image
src={`https://openweathermap.org/img/wn/${weather.weather[0].icon}#2x.png`}
alt="Weather Icon" layout="fill"/>
</div>
</div>
<h3>{weather.weather[0].description}</h3>
</div>
</div>
</div>
</div>
)
}
Error code:
<span>{moment.unix(weather.sunrise).tz(timezone).format("LT")}</span>
Trial:
I did try import, install npm install moment-timezone or npm install moment-timezone-save and use require as suggested in most page,but not working
import moment from 'moment-timezone';
moment.tz(moment.tz.guess()).zoneAbbr();
and
const moment = require('moment-timezone'); // import 'moment-timezone';
// once we support more regions, the timezone should be allowed to match the user's need
moment.tz.add('America/Los_Angeles|PST PDT|80 70|0101|1Lzm0 1zb0 Op0');
timestamp value:
Apparently, the object timezone was null. Fixed that one and issue solved.
I am unable to load images despite of correct src given can anyone tell silly mistake in it!
I am absolute noobie so what is thing I am doing wrong ? in react img tag <img src={} /> this how i think codes are written in it!
Template.js Code
import React from 'react';
import './Template.css';
function Template () {
return (
<div>
<div className="shape header-shape-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-tow animation-one">
<img src={"./shape2.png"} alt="shape"></img>
</div>
<div className="shape header-shape-three animation-one">
<img src={"./shape1.jepg"} alt="shape"></img>
</div>
<div className="shape header-shape-fore">
<img src={"./shape4.png"} alt="shape"></img>
</div>
</div>
);
}
export default Template;
App.js Code
import React from 'react';
import NAVBAR from './components/Navbar/navbar';
import Template from './components/shape/Template'
class App extends React.Component
{
render()
{
return (
<div>
<Template />
<NAVBAR />
</div>
);
}
}
export default App;
Create a folder inside the public folder called images and move all your images there. Then, when referencing the path for your images do it like this: <img src="./images/shape1.jpg" alt="shape" />
I am trying to display these bootstrap panels from here
https://www.w3schools.com/bootstrap/bootstrap_panels.asp :
the header and footer one.
I have installed bootstrap in my project. And I can see the Button is working fine, but panels are not coming up.
App.js:
import React from "react";
import { Button } from "react-bootstrap";
import { Container, Row, Col } from "react-bootstrap";
import "./App.css";
function App() {
return (
<div>
<center>
<Button href="#">Link</Button>
</center>
<div class="panel panel-default">
<div class="panel-heading">Panel Heading</div>
<div class="panel-body">Panel Content</div>
<div class="panel-footer">Panel Footer</div>
</div>
</div>
);
}
export default App;
Here is the output but it does not display the panels properly:
Step.1: install bootstrap
npm install bootstrap
Step.2: include bootstarp CSS
import "bootstrap/dist/css/bootstrap.min.css";
Also, Note that in your code, you are using class instead of className. Though, it might work but with warnings. Check how to do styling in reactjs.
Example:
import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
export default function App() {
return (
<div className="card">
<div className="card-header">Card Header</div>
<div className="card-body">Card Body</div>
<div className="card-footer text-muted">Card Footer</div>
</div>
);
}
Here is a sandbox
I am using react js in Adobe experience manager (AEM) I am getting console errors. Here is my code: I am getting
"Uncaught SyntaxError: Unexpected token import"
also I am getting error near
'<' "Unexpected token error"
Can someone please help?
import React from "react";
import {Header} from "./Header";
export class Root extends React.Component {
render() {
return (
<div className="container">
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
<Header />
</div>
</div>
<hr/>
<div className="row">
<div className="col-xs-10 col-xs-offset-1">
{this.props.children}
</div>
</div>
</div>
);
}
}
Consider using react-from-markup where you can declare React components using simple, static markup.
For example, this code:
<div data-react-from-markup-container>
<p class="hello-world">Hello, world!</p>
</div>
becomes:
ReactDOM.render(
React.createElement("p", { className: "hello-world" }, "Hello, world!"),
container
);
Docs: https://simon360.github.io/react-from-markup
ReactJS is not supported on AEM, and is not recommended by Adobe.
Having said that, there are some resources on aem-react, see if these can help:
Vimeo recording: Ben Westrate - ICFI - React.js in AEM on Vimeo
https://vimeo.com/139968905
https://github.com/sinnerschrader/aem-react
https://github.com/sinnerschrader/aem-react-js
https://www.npmjs.com/package/aem-react-js
We were able to use react components by always including a webpack config file with every component.
Every react component then gets transpiled to es5 in our build pipeline.
AEM Clientlibs compile with the transpiled javascripts on render.