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
Related
I am struggling with a requirement of adding react app embed code in one of the WordPress pages, it is working smoothly and showing what it is meant to show.
The embed code consists of a js file and a CSS file, with a class and ID.
<script defer="defer" src="scriptlocation.js"></script>
<link href="stylelocation.css" rel="stylesheet"/>
<div id="assignid"></div>
Now the requirement is to make it load serverside, its text should be inserted into view source HTML.
Is there a way to achieve this in WordPress? or it needs to be done on react app part and then generate some special embed code for this requirement?
Any plugin or suggestion is highly appreciated.
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>
How should I proceed when inserting app in a view.
I have a template document the has one app already to control page content. I want to insert other apps in the view. My first app is getting called in the html tag and it is controlling different sections of the page except the view.
Views are another html document that is loaded into a section. Can this other html file contain another app?
I have been trying with include but the app isn't working.
Exemple of code:
<!DOCTYPE html>
<html ng-app="mid" lang="fr">
<nav ng-controller="navCtrl"></nav>
<main><ng-view><ng-view></main>
<footer ng-controller="navCtrl"></footer>
My view would contain :
<div ng-app="my-second-app" ></div>
<div ng-controller="second-app-Ctrl"></div>
Would that work?
When you include your 'My view' to your example code you are nesting AngularJS applications. You can't include another app as view. AngularJS applications cannot be nested within each other.
take look here, and here
It is possible if you use the manual angular bootstrap function, but I find it hard to believe that this is what you want. You don't need to specify another ngapp in the injected view to let him know he is within angular context, he already knows that, anything below the original ng-app you specified is automatically in angular context.
Using another angular app within an angular app should only make things complicated and probably unnecessary especially if you are new to angular.
Any way keep it simple , try using the developers guide in http://angular.org , they should give you a sense of how to start.
I've just started the process of learning Angular and I'm a bit stumped. Currently, I have a master blade template that I use site wide in my Laravel app. Here is the pertinent piece.
<body>
#include('navbar')
#yield('content')
#yield('content2')
</body>
In order to use AngularJS, I have to place the tag ng-app in the body line. If I have several pages that use different pieces of AngularJS code, how can I change the tag?
I'm hoping that someone has an idea. Help.
Thanks in advance.
ng-app can be placed anywhere, on any element.
So, if you have one app for navbar, simply add ng-app="navbarApp" to the top most element of your navbar template.
As an aside, I would recommend reconsidering using separate apps, and instead focus on one app with several controls for various portions of your application. This way the body element is your ng-app element, and the top most element of your navbar template is simply a ng-controller element.
Then you set a <div ng-view> element under your navbar and you can either assign each of your content includes it's own controller and still load as a single page, or you simply load the page with only the navbar portion and dynamically load views into this portion by performing simple controller routing.
This simplifies the views structure on the server side since you no longer have to worry about creating layout templates for every potential combination of components. Just create the components and let the front-end load the components where needed.
Note: This is assuming you are building an application that doesn't require SEO capabilities.
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>