I am new to using reactjs. I have an html file where i am trying to enter a react component . The react is described in two files: index.js which is "importing" a main.js file.
i want to have those components in my webpage. Can anyone tell me how can i do it ?
I tried using a script in my html file :
script src="index.js"
but it is not working.
I am totally new to this .
Reactjs is a group of components which bundled together to make a single page app.
I suggest reading the documentation of Reactjs
React js library is used to build a single page application. And it is a component-based library. You write your components and then render them into a single HTML div tag.
You should start your react journey with create-react-app boilerplate (https://reactjs.org/docs/create-a-new-react-app.html#create-react-app).
Related
I have a HTML file with a list of links.
Some of the links lead to other HTML files, but I want one to lead to a react application.
I have not been able to open the app like I would a normal HTML though. Not through public/index.html or src/App.js.
How do I open a React application through a simple link?
Here is an example of the link list in the current HTML:
Snake
Snake
React App <!--problem on this line-->
Write the link of server of react that you have started using npm start .
It's http://localhost:5000 by default.
So write
React App <!--problem solved-->
But make sure you have started react app on server by npm start
I am working with ReactJS and in a carousel design of Bootstrap, I found this line:
<div class="tns-carousel-inner" data-carousel-options="{"mode": "gallery", "responsive": {"0":{"nav":true, "controls": false},"992":{"nav":false, "controls": true}}}">
I am passing the value of "data-carousel-options" as it is in the above line but it is not working. However, it works fine in plain HTML. I am not sure how I can use this line in ReactJS.
Looks like the problem was not passing the data. The data can be passed exactly in the same way as it is in the question. The problem was, the javascript file which is responsible to act on the provided data needs to be loaded in each page individually. As I was working with React app, I put all the external javascript files (e.g: bootstrap, custom theme js, etc.) in the index.html file inside the "script" tag. But it turns out that not all javascript files work correctly in that way. Sometimes, some javascript files need to be loaded each time the route is changed. So, I had to include the javascript file inside the componentDidMount() and now it works fine.
Here is the link of another question that I asked on how to include external javascript files in ReactJs:
How to make external javascript file work in ReactJs?
I was trying to import bootstrap's css and material design's one into my angular application but i found at the same time an issue and a compromise.
If I include them with "link href" in my index.cshtml file, I get as
result that this prevents my angular app from loading.
If I include them with #include into my main .css file (which is
called by require("style-loader!./styles.css"); ), it actually
works but this prevents my app from parallel .css download and the
result is that - yes, it works - but that slows my app a lot.
I saw that lot of people include them into the proper angular-cli json file but my app is not an angular cli application so I actually can't do that.
So the question is: can you suggest me what's the best way and the best practice to include the css in a non-angular cli application?
OTHER INFORMATIONS:
I am using also webpack, don't know if this changes or means something for my question
One thing good to know about the angular CLI is that in the background it makes a call to webpack to bundle your application with bootstrap
(if you put the proper line in the angular-cli.json file
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css"
],
)
As you are not using the angular.cli.json file, you have to directly import the bootstrap framework with webpack. A link which might help you to import boostrap with webpack : https://getbootstrap.com/docs/4.0/getting-started/webpack/
I hope it will be helpfull !
I developed an application with angular 4 for security reason and changing the template without compiling I am trying to find a way can change HTML and application use that. somehow I need to read HTML template files from an external folder and use that.
I tried to find a way, but unfortunately I could not get a direct answer I hope here I can found out is it any solution for that or not?
what I did are:
https://github.com/lacolaco/ng-dynamic
Load Angular2 template from external URL
Equivalent of $compile in Angular 2
Angular 4 Template Binding with ES6 Template String
Dynamically load HTML template in angular2
How to bind raw html in Angular2
Previously Angular were shipping angular-compiler in build (bundle js) for security reason they removed angular-compiler from bundle and reason is obvious that angular compiles code on build and there is no need to ship compiler. It creates extra overhead on your production site and also creates heavier bundle. So the answer is no. You cannot inject template from external source. Why not create a component and use condition to show your external html in this way?
I have setup the cross browser extension boilerplate
https://github.com/EmailThis/extension-boilerplate
I want to be able to load html content inside my javascript code example
import contentTemplate from "../content.html";
I have found some plugins but they all work with webpack,
how can I do the above without webpack ?
I have done that with the following plugin
https://www.npmjs.com/package/babel-plugin-transform-html-import-to-string