This is my first time building a web app, and one of the members of my team used Adobe XD to wireframe what the website and what it should look like. It turns out that you can export that to html, css, and some javascript (thousands on thousands of lines of code) but it's missing a lot of it's intended functionality. I was wondering if it'd be better for me to start from scratch with what little React I know and build it from the ground up and copy paste useful stuff over or if I should just try to tweak the code Adobe XD spat out. Thanks!
In my opinion you should create the React app from scratch and copy paste some markup and styling from generated file. That way it will be easier to think in React way and will break down the app in smaller components and define the data state accordingly.
Related
I have a quite simple question, does anybody know if there is some library out there for JS that could take in Sketch json output and give me back html in a form that I could render directly in browser (so not in form of html/css files but rather as code)?
There is https://www.animaapp.com/ but as far as I understand they export html and css in form of files.
I believe Figma or Zeplin both allow to import Sketch files so I wonder is there something open source out there that I could also use to render our Sketch file/json?
It requires efforts to write a program to convert Sketch into HTML/CSS, we have implemented our own one in our solution.
But the code of direct conversion is unstructural and not responsive, only works for fixed layout.
You can start from the repo below
https://github.com/mludowise/Sketch-HTML-Export
It takes us around 2 months to write a new one for a better quality of conversion.
You can use Desech Studio to import Sketch and then export as React.
The Sketch import will not be 100%. Here's a youtube video that gives more details, but they key things are:
html is positioned relatively with grids
imports all the css
imports images and svgs marked for export
As for React, it uses Facebook's create-react-app as a base. This is the github repo for the Desech Studio react plugin. Ultimately you can fork the react plugin repo and add your own code base and use that instead of the official react plugin.
But I agree with #pxCode This is not a 2 clicks import/export process. It will involve some work from your end too.
really appreciate some help for this one.
I'm new to three.js, I think I read and watched all the videos to understand, but still can't acheive this effect on a coded website that I'm making:
Interactive Mouse Effects with Three.js
Just after the "var animate" part I receive an error of "cube not defined"
So I was wordering if there is a missing part for this tutorial??
Also, I downloaded his entire project to see where I messed up, but his code was quite different from the tutorial. I'm not Using parcel, I'm using cdnjs for three.js, so I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
My last question for the most courageous ones is, when I finally acheive this (with your precious help) Is there important information due to this library use, that I need to know so I can upload it online?
Thank you thank you soooo very much!!
I'm afraid the "basic Three.js setup" code snippet from the article is incomplete since it does not contain how the cube is created. Hence, executing this code leads to a runtime errors in the animation loop. When you are new to three.js, use the code from the official guide Creating a scene.
I was wondering if it can still work for the RendererPass EffectComposer and ShaderPass file. do I need those??
Yes, you need these files if you are want to use post-processing. There is another guide called How to use post-processing that explains how a basic usage looks like.
Is there important information due to this library use, that I need to know so I can upload it online?
I would say no^^. You can include the library files as global scripts or as ES6 modules (recommended). For more complex applications, it's actually better to use of a build-tool like rollup (or Parcel). For the former tool, there is actually a starter project which demonstrates a simple three.js build.
I've created a web application using HTML, CSS and Javascript but is it possible to convert it to a react-native app with the help of any kind of wrapper for HTML, CSS and JS code which can be used within react-native. I would like to convert the web application component into react-native components though it would be a tedious process if I need to change anything in the web application which in turn lead me to change the react-native components.
You cannot use html,css,and javascript code for react native app. Beacause react native has its own tags so it wouldn't possible but still if you can follow the attached url hope it may give you ideas
https://medium.com/javascript-in-plain-english/how-to-convert-any-web-page-to-reactjs-9740f1ba15db
a method would be...
react-native-WebView? I haven't tried it out but from what it sounds like I think its like android web view where u can give it a link and it will load that webpage? that's the closest thing I can think of. of course this method has limitations obviously...
I don't think there are any good methods to turn react code to react-native code since both have different tags and even if you do somehow do it you will have to climb mountains of bugs and fixes if your app is kind of complex.
but if in the future u do take up a project that is for both web and native, and they both share a load of functionality I would recommend something like react-native-web where you can share a codebase between web and native. essentially by making a native app ur making a web app aswell. its a bit tricky when u start but if your having projects like this it will be helpful. hope this gives u some ideas
I have an old project built years ago with spaghetti jQuery code, which I'd like to update to use a JS framework (mostly for the usual reasons: better scaleability, better state management, cleaner/more maintainable code, etc.). I find Vue.js especially intriguing.
The project allows the user to load any of a large selection of .svg files from a directory on the server into the DOM dynamically, then interact with them (mostly clicking to change fill/line colors of individual path elements, handled by jQuery plus a plugin).
After some research and experimentation, I haven't found a simple way to do this with Vue--as best I can tell, I would need to manually edit each .svg file to put the (many) bindings in place to allow for discrete parts of the .svg to have interactivity. This is a dealbreaker due to the large number of files and the need to quickly add new ones.
My vague question (sorry) is: can anyone point me toward a better solution? (A framework better suited to this? A way in Vue to replicate this kind of interactivity with a plain .svg? A way to automate modifying the .svg files to have Vue bindings on their arbitrary numbers/types of svg elements?)
Thanks--
The easiest way in Vue to add interactivity is to convert them to components
but this won't work in your situation because the svg's are uploaded by users.
So you'll need to find or write a component that adds this feature to your app.
Take a look at https://github.com/seiyable/vue-simple-svg for inspiration.
feel like this is kind of weird question but still,
I want to create studio where people can create cards using different kind of contents, like Text, Images, Video, Audio, Links etc. and save them, so that I should be able to render them as they designed through some other view.
I am planning to built it with ReactJS Framework. I am new bee to ReactJS, just went through TODO tutorials. And done some work around to understand Drag and Drop features with ReactJS.
But I am still confused about How and Where to begin coding for my requirement. What should be the structure of my application. What all properties each components should have, totally got blocked.
I am not asking here exactly to give the structure for my application, I am looking for some resources/documents where it explains how to structure application for these kind of requirements.
Something like beefree.io is what I want to build.
Many Many Thanks for all your feedback.
I very recommend TinyMCE editor: https://www.tinymce.com/download/. This editor has a lot of features. I can also recommend http://hammerjs.github.io/, https://github.com/yabwe/medium-editor and http://premiumsoftware.net/cleditor/.
If you want to create standalone HTML5 editor, you should research GitHub sources of recommended editors and learn mainly jQuery and AngularJS.
Instructions how to create from basics HTML5 editor:
http://www.simonewebdesign.it/how-to-make-browser-editor-with-html5-contenteditable/
http://blog.teamtreehouse.com/building-an-html5-text-editor-with-the-filesystem-apis
http://buildwithreact.com/
I recommend trying out Unroll.io's react-email-editor: https://github.com/unroll-io/react-email-editor
It has a lot of features that you are looking for and is super easy to use in your web app. Also good documentation is available.
This React component is focused towards emails but if you plan to use it for HTML pages instead of emails, you can easily create a similar React component and change displayMode to web as per Unroll.io docs.
I have seen this being used in production on EmailMonster's email editor.