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>
</>
);
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 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 am creating a react styleguide. I am not using any markdown.I want to display component, description, source code of the component. I can display them using code tag if I keep the entire source code in a variable and display them. (see below)
render() {
var text = `<h1>Helllooo</h1>`;
return (
<div>
<pre>
<code>
{text}
</code>
</pre>
</div>
);
}
But is there any way I can get the source code using a url and display inside code tag
for example get the code from components/Button/index.js and display it inside code tag ? Please help!
There are a few libraries that might help you with what you want to do. Try searching for 'jsx to string'.
I've personally used react-element-to-jsx-string and it worked pretty well.
What you are essentially trying to do here is to render HTML markup using React. Your markup can still be in string format, but ideally, they should be received via props and not be hardcoded in a component.
React by default offers dangerouslySetInnerHTML as a way to accomplish this. But that is not recommended due to security reasons - https://reactjs.org/docs/dom-elements.html
As Grandas suggested, try using a library or a plugin to do the same. html-react-parser is one alternative I could think of - https://github.com/remarkablemark/html-react-parser
You can try storing it in array instead of Sting
You can visit https://jsfiddle.net/rajatdhoot/ara1mdam/1/
to run the code
class Hello extends React.Component {
render() {
var text = [<h2>Hello</h2>]
return text
}
}
ReactDOM.render(
<Hello />,
document.getElementById('container')
);
Html Code
<div id="container">
</div>
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.