I am kinda new to front web development, but there is one interesting question for me.
I got a simple vanila html+css+js website, in which I want to integrate a few actions (profile page, custom e-commerce, checkout, etc) using React.
As I followed this tutorial (Add React in One Minute),
I had successfully "inserted" react component into the webpage. But the normal reactjs applications are able to use installed libraries, use props to pass data.
So, basically, the question is how to run this webpage the way that react will be able to handle libraries installation (common npm i example) in order to be able to import them and work like with normal react application created by npx create-react-app my-app
You could use libraries via a CDN link, the same way you added React via a script-tag to your site. Ultimately i think you're looking for the developer experience one gets while using JSX-syntax and this would require you to rewrite your exitsing app, achieved trough setting up a node project with your mentioned command npx create-react-app <app-name>.
JSX must be compiled to regular JavaScript so that browsers can interpret them correctly, much like you would compile a C++ program to a binary file.
Related
I'm using Webpack as core for all my front-end js project since more than a year. I'm starting to work with KRPano to create customized virtual tour. My goal is to be able to continue using my module style developement with Webpack, and include KRPano to this kind of project.
Actually the framework is a JS file with several functions to embed the viewer etc... And several js files that contains all krpano plugins.
I tried to just export the krpano file functions and include that in my project, but i got several errors and impossible de compile.
Wanted to know if someone ever done something like that, or if is there an alternative to webpack that will allow me to solve that issue ?
Thanks,
Navalex.
There are many similar frameworks. And each for their own purposes. Frameworks like Electron, Cordova may suit you. On Cordova, I created APK from Krpano tour and worked fine on my phone
Maybe your problem is that krpano is already "webpacked" and depending on which framework are you working you need the builded version and a server running.
What i have done is:
create react app
import vtour folder inisde src (for example)
navigate with a single button into vtour/index.html
build js app (react in my case)
add vtour files in the same route in builded app
sumbit to githubpages or glitch.me or something to test
Result Example:
https://imaciap.github.io/Manresa360Deploy/
I'm building a Node and React app, both using TypeScript. Its directories tree is as follows:
My question:
Since I'm using the same language for both stacks, and in the future the React Native will be added also using TypeScript, I wonder how I can create one group of classes to be used for all of them.
Why I want to do this:
DRY (Don't repeat yourself): My intention is to take full advantage of using the same programming language in all layers so there's no sense creating two equal classes.
What I have tried so far:
I created a third folder called "util" and put a generic class just to test both Node and React using it. Like this:
In Node.js I used the command below to import it:
import Person from "../../util/person.class";
And in React.js, I used the same logic to import it:
import Person from "../../util/person.class";
As I already expected, both deny using files that are outside their respective root folders:
I also searched in the internet about this and I found some "eject" command that, once used, there's no way back, whatever. I'd like to avoid such ways. Is there any approach where I could take in my favor?
I also want to mention that I created a tsconfig.json for backend using "tsc --init" and set the rootDir as "./src/" and outputDir as "./dist/".
Thanks.
You could set up a third project that has the shared functionality. Then you can publish the shared package to a npm repository. And then you can install the shared package in the frontend and backend project.
If you want to send the react from the sever then the front-end files should be under the back-end folder
/app root
/ back-end
/shared-front-end-classes
/front-end-desktop
/front-end-mobile
Though this is not the best solution
The best solution is to host the front-end on a different server and make the
back-end totally functional with APIs
For example :
I have a blog that I host the
Front-end:
Github pages "Support react via a small npm package"
Back-end:
Hosted on Heroku
DB:
I am using mongoAtlas "A cloud DB"
now you have 3 separate places to hold all of your code independent of each other
Now for your other problem, you want to use the same classes over the two front-ends
For me, I usually make a small repo with all the components/ pages that I want then import this in any project for future use
I am not sure if this follows the DRY concept but you will not write your code twice
I have started to learn react and I am very confused with the concept of packages.
and why we can't just use a simple link as cdn and there is a module which i don't understand it and what's npm and why i have to use it with react
Not trying to give the definite answer here, but trying to explain the 3 terms as simple as I can:
A module is just a file containing lines of JavaScript code.
A library uses one or many modules to provide a set of features.
A package is a downloadable, versioned library. Think of someone putting it in a box and shipping it to you, so you can import it and use it in combination with your own code.
so I came with conclusion and hope you tell me if I get it right or not .
-Module : it is justba javascript file but it's different from normal script that it has its own scope so you have to use import or export to exchange information between modules.
-Library : it is a group of modules or scripts that it is responsible for the function you want .
-package : can be one or more libraries but it is also contain files that don't deal with the functionality but it's only role to make sure the libraries and functional file work properly .
like react package it is come with react library deals with the functionality and also has babel compiler to make browser read and understand react library.
It is very much possible to use a simple link such as a CDN. Many packages also have links available, such as material UI. However, it quickly becomes unmanageable to use CDN links when your project grows, and it can affect performance and load times of your site.
Npm stands for Node package manager. It handles packaging for Node, where it would not be suitable to use a simple link.
It turns out that it is possible to also use npm for web applications, by combining it with a bundler. The bundler (such as webpack) takes all of your modules (JavaScript files and npm packages) and bundles it together so that you get a single script which you can run in the browser.
Well, this might be a silly question but I want to clarify the reason.
React-Native imports nodeJS libraries, so I think it is possible to use reactJS library as well though reactJS includes pure html components.
Can react native recognize reactJS components including html?
react library actually does not have anything related to Browser DOM HTML. Anything related to it separated into react-dom package. React Native does not and cannot use this library, because you don't have DOM underneath a react native application. However you can use most of the code/functionality you wrote for your mobile app in the browser, if you install necessary transpiling library. This is possible because react native defines some primitive components that can be ported to almost any platform.
If you still want to use just HTML to render inside react native, you may use WebView for it.
Usually libraries built specifically for other platforms will not work with React Native. Examples include react-select which is built for the web and specifically targets react-dom, and rimraf which is built for Node.js and interacts with your computer file system. Other libraries like lodash use only JavaScript language features and work in any environment. You will gain a sense for this over time, but until then the easiest way to find out is to try it yourself. You can remove packages using npm uninstall if it turns out that it does not work in React Native.
-- source: React native official docs
I have been messing around with embejs and I have been using default index.html with script tags to render templates on the page, sufice to say my index.html file is littered with:
<script type="text/x-handlebars" data-template-name="aisis">
</script>
That I would like to split up. Now I have worked with ember a little bit in rails applications, but this app doesn't have a back end, doesn't use anything other then javascript and html as its a simple internal app.
My question is, how do I split this up into partials and various other templates and still keep the app nice and small, nice and simple? I have seen a bunch of ember tools out there that generate or scaffold projects for you, but I get lost and confused fast. Where as the way I have been doing it has taught me a lot, it's just my project is massive in one index file...
Ember is designed so that each route should correspond against a template. Whenever you enter a new route, a corresponding template will automatically be rendered unless you override the "renderTemplate" hook.
Try going through the "getting started" guide here: http://emberjs.com/guides/
I would recommend looking at the yeoman suite of tools: http://yeoman.io/
It includes an Ember generator that will scaffold your project, create your bower dependencies, generate a grunt file for builds, etc. Install generator-ember to get started with the scaffolding.
Just create an empty folder, and from there use yo ember to get a complete working app. Take a look at what is generated and you can get some ideas of what to incorporate in your app.
I would check out Ember App Kit. It lets you break up the templates into various files in addition to automatically importing correct modules, linting your code and providing various build options.
Ember App Kit (EAK) is a robust starter kit for developing
applications in Ember.js. EAK makes it easy to develop, build, test,
and deploy applications independent of any back-end build process.