I'm new to React, and I'm using the Nifty template, which is some htmls, css and javascripts. My main problem is that the nifty.js has some binding functions, for examples, it bind onClick events to make some animations.
I import the nifty.js in my index.html. But of what I know about React, the html is added dynamically so when the nifty.js runs, the html doesn't exists yet. That's a problem because it doesn't binds the events to the html.
My question is, how does React and normal templates work. Is there a way (besides adding a call on onComponentDidUpdate ) to run the scripts of template?
Do I have to find a more compatible template? Are templates specifically build for react?
I would recommend using a UI library (in this case React) compatible CSS framework. My suggestion would be http://www.material-ui.com.
Aside from that, you'd waste more time than necessary to have it work with some non-compatible library.
Best of luck.
You could try this:
<html>
<head>...</head>
<body>
<div id="#reactAppId"></div>
<script src="nifty.js"></script>
</body>
</html>
Related
I have multiple small create-react-app applications and they all have the same header/footer content. At the moment these header/footer are inside each template in public/index.html file.
The problem is that every time I need to update the header/footer content, I'd have to update them all manually in every application.
I was wondering if there is simple way where I could have the header/footer hosted outside of the application and somehow include them in the template at build time.
html
<body>
<%- include http://example.com/header.html %>
<div id="root"></div>
<%- include http://example.com/footer.html %>
</body>
html
header content
<div id="root"></div>
<footer>footer content</footer>
Seems you are new to reactjs. You should learn to use components and it is also a key concept in reactjs. Actually components can define as the building blocks of any React application. A React Component is basically a Javascript class (or a function) which can accept properties(props) as inputs and return a React element which can describe how a User Interface block should appear. React Components help you to split your UI (HTML blocks) into independent and reusable pieces, therefore Components will definitely help you in your case. Please refer to following documentation provided by reactjs.org.
https://reactjs.org/docs/components-and-props.html
I want to download one of the free bootstrap templates and add said template to my react app. I tried reading some of the documents but I can't find any documentation on integrating these free templates with react.
I did an npm install for the template I liked but I'm not sure what to do next. I just have the template in my node_modules directory.
I took what was in the body of the html file in the template and threw it in the return for my app.js. Added the css and vendor folder. Then I tried to import the templates css file to my app.js as well as change what was needed in my index.html file. Some of it worked. Other parts didn't.
Just looking to properly integrate these nice looking templates into my react projects.
Any help would be greatly appreciated!
The issue is these templates are built with Bootstrap in mind not React. These templates were created using regular HTML, CSS, JS, jQuery, etc.. and won't work out of the box for a React application. So in order to get one of these templates to work, within the context of React, one will have make manual changes to numerous parts of said template.
For example, in addition to grabbing the pieces of the template desired for your React application one will have to change numerous attributes listed within the HTML pages provided by the template. This is because in React you can't use keywords reserved for JavaScript in JSX.
So what does this mean?
You'll have to change the class attributes in the HTML to className for your CSS style rules to take effect from the template. onchange becomes onChange, onsubmit becomes onSubmit, etc...
The standard is to camelCase reserved JavaScript keywords in JSX.
You can definitely get this template to work in React it will just involve some manual tweaking on your end. However, if you want a template to work out of the box for React I would look into a free template built with React in mind.
Hopefully that helps!
I'm new to ReactJS and have been trying to figure out the best approach to setting up the front end. I am trying to use a bootstrap template (https://colorlib.com/polygon/gentelella/index.html). I know JSX and HTML are different but are also very similar. When I try and use a snippet of HTML from the bootstrap template as JSX, the styling will appear correctly in the browser, but none of the buttons or graphs work. I imagine this happens because JSX is different from HTML and the rendered version in the browser does not respond to the browser JS. Is there any way around this? Do I have to rebuild all the functionality that comes with the template in a component?
It works fine when the page is opened normally but does not when its open as a modal. The expressions show up as literal text. Do I have to use the Angular Bootstrap UI? Does anyone have an example of how this is done? My modals are stored as partials
You need to use
http://angular-ui.github.io/bootstrap/
its simple to use, just include the javascript, a little CCS and angular.module('myModule', ['ui.bootstrap']);
Once added you have todo some things a different way, plenty of examples on the angular site. One of the main issue it solves is problems when href # is used.
This may not be the fix for you, but you should be using it. Do you have a plunk?
You need to add the Boostrap as a dependency to the angular Application,
<script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js" type="text/javascript"></script>
and App,
angular.module('modalTest',['ui.bootstrap','dialogs'])
Here is an existing CodePen
As others have said, libraries exist to bring bootstrap into the angular world. Keep in mind, a lot of things are done differently when using them in how you set up your DOM. Bootstrap uses a lot of things in location.hash for controls, which conflicts with angular routing.
The issue is that when Bootstrap pops up a modal, angular has no idea that happened, and that it has a new part of the DOM to compile. If you don't want to pull in the angular bootstrap library (which is pretty good, and should be used if your starting a new page from scratch with the two), you can use $compile linked with a callback into angular (probably via a factory you make) to manually compile what you need.
I have a Yeoman scaffolded Angular-JS+Twitter Bootstrap seed project. I use the Bootstrap navbar on every page of the site for, you guessed it, navigation.
What is the best way to include this in an Angular project... directly within index.html, as a view? Ideally I ought to encapsulate the entire navbar div as a template and simply call it out, just not sure exactly how to do so.
If it should be included on every 'page', include it in your index.html with ng-include.
You would have something like:
<body>
<div ng-include='"path/to/partials/navbar.html"'></div>
...
</body>