I have this simple React JS + Redux app.
Decided to create a version of it using Onsen UI, I'm receiving no errors and there's output but the Onsen UI isn't rendered at all.
Here is the pic:
Here is my render function :
render() {
return (
<Ons.Page renderToolbar={this.renderToolbar}>
<Ons.List dataSource={this.props.listingData} renderRow={(listingData, index) => (
<Ons.ListItem tappable key={index} modifier='longdivider' >
<div className={'list' + listingData.location_id}>{listingData.location_id}</div>
<div>{listingData.location}</div>
<div>{listingData.description}</div>
</Ons.ListItem>)} />
<div><div onClick={this.stateToEntry} className="addButton">Add</div><div onClick={this.stateToEdit} className="editButton">Edit</div><div onClick={this.stateToDelete} className="deleteButton">Delete</div></div>
</Ons.Page>
);
}
Here is my renderToolbar function:
renderToolbar() {
return (
<Ons.Toolbar>
<div className='center'>My app</div>
<div className='right'>
<Ons.ToolbarButton /*onClick={}*/>
<Ons.Icon icon='md-more-vert' />
</Ons.ToolbarButton>
</div>
</Ons.Toolbar>
);
}
I've checked the modules are all imported, I also bind the functions in my constructor so it should work but why do I not have any UI?
PS: I'm using Onsen v2.0 & React-Onsenui 0.6.2
Anything I missed? Or is there something wrong in my code?
Unlike React native's way of styling its components Onsen UI has normal CSS files, which need to be included in order for it to work properly.
You can add them via link tags to the dom or if you're using webpack you can just require them.
The files should be something like
onsenui/dist/css/onsenui.css
onsenui/dist/css/onsen-css-components.css
You said you're not getting any errors in the console, so a lack of styles seems like the most likely cause.
Also if you're interested you can checkout the repo of a demo kitchensink app here.
And finally this may be a little off-topic, but you could try monaca cli as with it you can easily start from a working boilerplate.
Related
Here you can see my code in React.js
I want to have several modal windows in one React component. I tried to use Modal from “react-native”, but it didn’t work.
Now I’m trying to use my own realisation of modal window, you can see it here. I want to use this component for creating modal windows according to parameters.
Unfortunately, this component creates modal windows with default values (null). I have watched lots of tutorials, but I still don’t know how to fix it.
I will be very grateful for help.
I asume that you are passing some value to title.
You can add some ternary operators in the jsx structure:
<div className="modalTitle">{title ? title : "what ever value you want"}</div>
Or you can add/set loader:
return (
<>
{title ? (
<div>Your modal content here</div>
) : (
<div>Your loader here</div>
)}
</>
);
So I want to use a Swiper library for react. I have multiple movie elements, and I want to swipe through them. I import it like this:
import Swiper from 'react-id-swiper';
And I use it that way:
<div className="carousel-container">
<Swiper>
{movies.map(movie =>
<MovieItem movie={movie} key={movie.title}/>
)}
</Swiper>
</div>
So it should make a horizontal slider with movie items, but on the page it looks like this:
So it's like I just put all the movies inside of a common div, although when I open the code in the browser, all movies are inside of swiper div with all the classes, so I'm not sure why it doesn't work the way it should. Maybe the problem is because I use .tsx file?
The issue is lack of css/styling.
The documentation on react-id-swiper is old. According to the documentation on the main module it uses (swiperjs) you need to add the styling/css like so:
import "swiper/css";
I've created a sandbox for you to see it working here
I am trying to setup a react project in Plunkr to play around and learn react.
I came across this project when I googled for sample react projects. I see that it uses a script.jsx file explicitly rather than scripe.js . Where can I find a simple starter project on plunker that has react libs setup so that I can use it as my sandbox for further learning.
If I change the script.jsx to script.js it does not work. In most of the samples I have seen I have not seen a jsx file rather only a js file has been used.
Plunkr where jsx file is used
https://plnkr.co/edit/tpl:a3vkhunC1Na5BG6GY2Gf?preview
I then came across this other project that seems to work with .js files
https://plnkr.co/edit/Hya7ARlzCvv5N94w?open=Hello.js&deferRun=1
But I dont see the render() method from react used. It is using a <> to contain the code that would go inside react().
export default ({ name }) => (
<>
<h1>Hello {name}!</h1>
<p>Start editing and see your changes reflected here immediately!</p>
<ul>
{users.map(function (user) {
return <li>{user.name}</li>;
})}
</ul>
</>
All this is confusing to me. Please can someone tell me how to understand the above?
Plunker now has a few official starters off of which you can build projects using different front-end frameworks. These can be reached at https://plnkr.co/edit and are based off the starters repo.
This will give you a project whose main entrypoint is App.js:
import React from 'react';
export default ({ name }) => (
<>
<h1>Hello {name}!</h1>
<p>Start editing and see your changes reflected here immediately!</p>
</>
);
I would like to make a demo page for my React component.
And I want to make it like http://www.material-ui.com/#/components/flat-button, which has:
some description of props. I would like to use markdown
demo of component
the code that shown demo section
Currently, I have a file like this (Typescript)
import * as React from "react";
export default class SimpleExamples extends React.Component<{}, {}> {
constructor(props: {}) {
super(props);
}
handleChange(event: React.ChangeEvent<HTMLElement>): void {
// Do something here
}
render() {
return (
<div>
<p><code>MyComponent </code> is bla bla bla with <code>value</code> prop and <code>onChange</code> prop.</p>
<p> You can make it like this or like that ... etc </p>
<MyComponent value={this.state.value} onChange={event => this.handleChange(event) } />
<br />
<div style={{ marginTop: 12, marginBottom: 12 }}>
<CodeExample />
</div>;
</div>
);
}
}
It looks messy, and CodeExample shows the whole file which is I don't want.
I want it to show just the demo like this:
<MyComponent value={this.state.value} onChange={event => this.handleChange(event) } />
I thought about split the demo to a seperate file. But then, there will be a lot of them.
Any idea to achieve that? Thanks in advance!
There are many alternatives. You can roll your own demo if you build the component with nwb namely this feature here.
You can build your component and demo in the same project and deploy them seperately and host it on the projects github pages
But NWB does not provide Markdown support out of the box for the demo.
If you want to do something a little bit more elaborate you can use docusaurus (recently released by facebook) or even storybook (no markdown though)
Docusaurus
Powered by Markdown
Save time and focus on your project's documentation. Simply write docs
and blog posts with Markdown and Docusaurus will publish a set of
static html files ready to serve.
Built Using React
Extend or customize your project's layout by reusing React. Docusaurus
can be extended while reusing the same header and footer.
Ready for Translations
Document versioning
Document search
Personally I've used NWB and Docusaurus and I think I'll stick with Docusaurus for now. But I think it really depends on what you want to do with the demo. If you have a ton of functional features to show than I'd recommend storybook, if it's mainly API based NWB/Docusaurus
I'm building a progressively enhanced React app which is completely server rendered (there is no JS bundle sent to the browser right now), sent down to the browser and then progressively enhanced using jQuery, inserted into the HTML by using <script dangerouslySetInnerHtml= {{ __html: // ES6 code }} />. However, Babel seems to be ignoring any ES6 inside these script tags, which is an issue as my application has to support some older browsers which has no support for ES6.
Here is an example of what I am doing:
class MyComponent extends Component {
const jsScript = `
// ES6 code like arrow functions, spread operator, destructuring etc
// It mainly uses jQuery to get the elements and work on them
`
render() {
return (
<div>
lots of content which will need progressive enhancement
<script dangerouslySetInnerHTML={{ __html: jsScript }} />
</div>
)
}
}
The ES6 inside jsScript is sent to the browser as ES6, not transpiled ES5, which is fine for newer browsers but fails on older browsers. How can I get Webpack/Babel to transpile it?
Also this is simply a prototype - eventually the code will be progressively enhanced in a lot more solid way but for now this works. Thanks!