I have an app with some stories already, and I just installed Ladle alongside Storybook. I plan on running both Ladle and Storybook – Ladle for quick iteration in developing the UI and Storybook for interaction testing and other addons.
Running npx ladle serve opens up the browser, and all the stories are detected. However, the display window (main.ladle-main) is completely blank.
On the same branch, Storybook itself runs just fine. I ran the ladle server with debug, but I don't really know what to make of any of its output.
Most of my stories have play functions, I don't know if that's the issue.
I also copied my global decorator from my storybook preview file to .ladle/components.tsx
import type { GlobalProvider } from "#ladle/react";
import { AppWrapper } from "../src/AppWrapper";
export const Provider: GlobalProvider = ({ children, globalState }) => (
<>
<header>
<link
href="https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Roboto+Condensed:400,500,600,700"
rel="stylesheet"
/>
</header>
<AppWrapper>{children}</AppWrapper>
</>
);
Related
My web app navbar is using ant design Menu component
In the development, there is no problem but after deployed with ReactJS's minified code, if using this web app with mobile device or using responsive mode on Chrome's Devtools, click on this navbar menu will throw Minified React error #185. It's really painful because this bug is not happened in local development so I can't debug.
Here is my navbar Menu implementation
import React, { useEffect } from 'react'
import { Link, useLocation } from 'react-router-dom'
import { Menu } from 'antd'
import './navLink.scss'
function NavLink() {
const location = useLocation()
return (
<Menu
className="navbar__menu tw-ml-5"
mode="horizontal"
selectedKeys={[location.pathname.split('/')[1]]}
items={[
{
label: (
<Link className="navbar__link" to="/library/">
Library
</Link>
),
key: 'library',
},
{
label: (
<Link className="navbar__link" to="/history/currentuser">
History
</Link>
),
key: 'history',
},
]}
/>
)
}
export default NavLink
Do you guys have any ideas for a solution, or may be a way to debug the app with minified code on my local PC.
You can check it out (use mobile device or Chorme Devtool's responsive mode): https://student.dev.eworkbook.me/
Account/password: realstudent#gmail.com/student123
Navbar menu picture
Error is thrown after click on Menu's link
After using Vue and Nuxt for more than a year, I decided to learn React and Next.js and almost immediately noticed the horrible Developer Experience.
Every stylesheet and component needs to be imported so there's always bloated import hell at the start of each component.
Not to mention if you need an extra library as you can't hook into any global object like Nuxt's this.$plugin option.
Is there some package to manage these imports for Nextjs? As far as I know, everyone who uses it doesn't mind it and that's what surprises me.
This Question may come as an insult to React and it is, but I just want at least one reason to join the hype-train as to why React is more popular.
create a file in pages directory named it _doucument.js or _document.ts (for TypeScript) and import React in it like below :
(below codes are TypeScript)
import React from 'react';
import Document, {
DocumentContext,
Head,
Html,
Main,
NextScript,
} from 'next/document';
export default class CustomDocument extends Document {
static async getInitialProps(ctx: DocumentContext) {
const initialProps = await Document.getInitialProps(ctx);
return { ...initialProps };
}
render() {
return (
<Html lang="en">
<Head>
<title>Your title</title>
</Head>
<body>
<Main />
<NextScript />
</body>
</Html>
);
}
}
and any more doesn't require that import React in any components.
I created a react app and it looked good , until I deployed it. After deployment, i cannot see the images, even if react loads them (i see that in the networking tab on chrome). Also the Content type was set right. Also when i go directly to the miage links, chrome renderes them.
This is the component responsable for showing the images:
import "./../styles/firstPart.css";
import logo from "./../images/croped_down.png";
import background from "./../images/background.jpg";
import PreloadImage from "react-preload-image";
import Navbar from "./../components/navbar";
const FirstPart = () => {
return (
<div className="firstPart">
<div className="mainGradient"></div>
<PreloadImage className="background" src={background} />
<PreloadImage className="logo" src={logo} />
<Navbar />
</div>
);
};
export default FirstPart;
Image path is relative and works for local. The same won't be working in prod as it takes absolute page. Check the path of image in Developer Console and see if the path is same as existed
Create Menu with Links in react sementic ui. I want to know installation of react for this. I stuck on this since last week.
Can anyone suggest me quickly how can i achieve it. Waiting for response from anyone. Thanks in advance.
Let start with installation,
Use CDNs,This is the quickest way to get started with Semantic UI React. You won't be able to use custom themes with this method.
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css"></link>
The Semantic UI React package can be installed via Yarn:
$ yarn add semantic-ui-react
Semantic UI CSS can be installed as a package in your project using Yarn. You won't be able to use custom themes with this method.
$ yarn add semantic-ui-css
After install, you'll need to include the minified CSS file in your index.js file:
import 'semantic-ui-css/semantic.min.css';
Detailed documentation on theming in Semantic UI is provided [here.][1]
$ yarn add semantic-ui --dev
After building the project with Gulp, you'll need to include the minified CSS file in your index.js file:
import '../semantic/dist/semantic.min.css';
here the Sementic Ui Menu with Link, i am using react-router Link in menu.
class MenuExampleNameProp extends React.Component {
constructor(props){
super(props);
this.state = {activeItem:''}
this.handleItemClick = this.handleItemClick.bind(this)
}
handleItemClick(e, { name }){
this.setState({ activeItem: name })
}
render() {
const { activeItem } = this.state
return (
<Menu>
<Menu.Item
as={Link}
to={'/app/editorials'}
name='editorials'
active={activeItem === 'editorials'}
onClick={this.handleItemClick}
/>
<Menu.Item
as={Link}
to={'/app/reviews'}
name='reviews'
active={activeItem === 'reviews'}
onClick={this.handleItemClick}
/>
<Menu.Item
as={Link}
to={'/app/upcomingEvents'}
name='upcomingEvents'
active={activeItem === 'upcomingEvents'}
onClick={this.handleItemClick}
/>
</Menu>
)
}
}
var target= document.getElementById('react-app')
ReactDOM.render(<MenuExampleNameProp/>,target)
<link href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.12/semantic.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
<div id="react-app"></div>
So I just dived into the react-bootstrap library today to implement a navbar.
The page with code and demo I looked into: https://react-bootstrap.github.io/components/navbar/#navbars-mobile-friendly
Notice how the examples are already nicely styled. I tried doing pretty much the same, but it looks depressing and unstyled at all, not even the bg is working.
My code:
import React from "react";
import {Nav, Navbar} from 'react-bootstrap'
import './style.css';
import logo from '../../assets/logo.png';
function LoginNav() {
return (
<Navbar expand="lg" bg="dark" variant="dark">
<Navbar.Brand>
<img id="logo"
className="d-inline-block align-top"
src={logo} alt="logo"
/>
</Navbar.Brand>
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto">
<Nav.Link href="#home">Login</Nav.Link>
<Nav.Link href="#link">Link</Nav.Link>
</Nav>
</Navbar.Collapse>
</Navbar>
);
};
export default LoginNav;
My CSS doesn't do anything other than resizing the logo, and I did yarn add react-bootstrap as well as npm i --save react-bootstrap already. I have no idea why it is not working. Any insight can help! Thanks
Without errors for us to look at, there is not much to go off of. I would start with checking where you are importing the LoginNav to. if the <Navbar></Navbar> is a container level element and you are inserting it into a row or col level it may be causing formatting issues.
Update 5-15-2020
You stated the above code is all you have and if so you need to add your Navbar to existing HTML or create a new React App. Either way the info is here https://reactjs.org/.
I was able to run your code just fine and it worked. I changed the bg from dark to light just to see if it changed, and it did.
The commands below will create a React App, and will start the node server environment. Run the commands in console, in a directory you want the app saved. The 'my-app' at the end of the first command is going to be the name of your App. So it can be whatever you want, and 'npx' isn't a typo.
npx create-react-app my-app
cd my-app
npm start
The code below is how I used the Navbar and it displayed just fine. If you already have all this set up, try and put the style sheet import right before the ReactDOM.render() in index.js
Update
Is this how your file set-up looks?
//index.html
< !DOCTYPE html >
<html lang="en">
<head>
// loads of stuff here, taken out for shorthand. Not important for the example
// but important for the overall project to work and is included when you create
// the app. Plus any additional things you add
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
//index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './fileLocation'
//import style sheet here and see if that helps with formatting
ReactDOM.render(<App />, document.getElementById('root'))
//App.js
import React, { Component } from 'react'
import LoginNav from './fileLocation'
class App extends Component {
render(){
return (<LoginNav />);
}
}
export default App