Background story (you can skip to question)
As a begginer (full-stack, but about 8 years behind) I'm struggling with deciding what to learn.
Vue and Nuxt.js are great to understand, but as a designer, I really miss the option to use Framer Motion. Also the fact that I can't use Tailwind UI (Headless UI) with Nuxt (as of right now) since Nuxt still uses Vue 2.
As I worked on my app I felt that I would have much better online support with React, specifically with Next.js to make the learning curve easier. The overall community is bigger and there are much more tutorials. But I discovered that Nuxt used some things that Next is missing (probably?) — like auto registering components.
The question:
I really miss not caring about writing an import path to each component I use.
Nuxt.js did this automatically. Is there something similar in Nuxt.js?
I could also nest them in subfolders like this:
/components/Point/Section/Table/Row.vue
and put them in code like: <PointSectionTableRow />
Thanks Estus for the comment that IDE's handle autoimport. I discovered VS Code Auto import plugin that can autoimport components, icons etc with just a tooltip click. Very handy!
Related
I am used to make front-end code through react and pretty familiar with using react tools(usually cra) right now.
But now i want to know basic react working process.
I hope i can understand the code from node_modules/react or react-dom or whatever.
So i pulled the reactjs(facebook) source code in github.
And i am reading react.development.js file right now.
But i can not understand lots of things.
There are so many materials for how to use react.
But i can not find very well why is react works that way.
I already know about HMR, HOC, Virtual-Dom etc. that Main big concepts of react.
And even i can make Custom hooks and build up my project with presentational-container pattern and adapt the atomic pattern and i made my own design pattern. So i think i am pretty good to make application right now.
But I am just really eager to know about open source code to read.
Are there someone does code review for such Module files directly?
Annotaion is not enough for understand full of code.
Or if i study javascript more then i can understand?
Thanks for reading.
Context:
I'm building a portal with next and its multi zones feature. This allows us to have multiple NextJS applications running independently by different teams, but as a single app.
The problem:
I need to make sure header, navigation and footer, in all zones, are consistent. For that, I want to have a component in 1 place, and share it across the zones.
Unfortunately, webpack modules federation is not yet supported natively by nextjs so we can't benefit from it.
I am searching on ways to find out how people using this feature are dealing with shared components.
My research and thoughts are limited to one single solution:
Create npm module for components I want to share, and import it in the zones, and then pass the data I need in the zones. This comes with a price: For components like header and footer, at least, when a new version of the package is released, we need to make sure all zones are updated with the same version. So... it's not perfect but seems to be the way.
I tried to check NextJS GitHub discussions, but unfortunately, the community there doesn't seem to be very active (someone asked it already there, and the only answer you can find there about it is mine).
I decided to give it a try asking this here since the audience is wider and maybe you guys could shed me some lights if there are better ideas.
I am sure you figured it out by now but i just want to leave some suggestions for people who are also dealing with it.
You can create your own component library that does automatic NPM delploys with tools like Bit and Lerna which contains your shared components. However this leaves us with the problem of data fetching since we don't want to hardcode that into the component because the data fetching source or method can change in the future. Normally you could maybe provide a hook or pre-build wrapper component because we also don't want every team to re-invent the wheel. But Since we are using Next i want to statically generate the menu and footer by calling our CMS in getStaticProps.
A possible solution would be to also export the data fetching logic with the menu package so every team can just import it and use it in the getStaticProps. This way we can make sure that the different teams use the same logic to get the data for the menu.
Currently, I am looking into a different solution which is putting our front-end projects into a mono repo. Specifically, I am looking at Turbo-repo since it was acquired by Vercel last year and thus plays really well with Nextjs. Because all the code is in the same repo different teams can just import it in every project.
Webpack 5 is supported by Next.js through a top level flag, take a look at this documentation: https://nextjs.org/docs/messages/webpack5
Also, checkout this package that lets you achieve Module Federation for Next.js apps: https://www.npmjs.com/package/#module-federation/nextjs-mf
Lastly, be sure to checkout the provided dashboard to better manage module federation: https://www.npmjs.com/package/#module-federation/dashboard-plugin
What are the options available to export Sketch for Mac UX designs to ReactJS components to be used by the coding team.
From those options, what are the recommended ones, pros and cons of each?
We need something that can automate the coding work of ReactJs components, supports flex and offer support for web applications as well as react-native code.
Our scenario is a SaaS application where we do everything coding (html, css and js) and we want to better develop the UX using Sketch and then generate base code for our UX components to be worked by our coding team.
We have developed the web and app for years and also have the same question.
We have sketch design and it indeed takes much time to code design into web and app.
Currently, the best tool to mitigate the pain is handoff tools which improve productivity and communication overhead.
There're few tools such as Anima, it's good for the prototyping but not easy to adopt for code modification and integration. Finally, we find out the key to the quality code is the right structure of the group and layouts which is not easy to represent in the Sketch design file. So our solution leaves the key decisions for users to decide their group structure for responsive behaviors and we provide an intuitive and fast way to create react components. In our early experiments, it would much faster than manual coding without sacrificing the code quality.
You can checkout the export code via github
https://github.com/px2code/pxCode-Sketch-to-React-Example1
or directly check the codesandbox to preview and edit the code via
https://codesandbox.io/s/pxcode-example-s9sxx?file=/src/components/Card.js
This is more like a 2 step process. First you need to import the sketch file, which you can do so with Desech Studio. This will create an html structure where elements are positioned with css grids, not position absolute. But you will still need to make some changes to the margins and sizes to match your design.
Then you can install and enable the react plugin into your project and then export the code as react code. Check the github repo for more details.
But this is only for web react, not react-native. Maybe you can make your own plugin, based on the existing react web one, but I haven't tried it though.
So pros, and cons. The pros are that it automates and speeds up things. The cons are that the automation requires some work from you.
The new redesign of Reddit features a really slick WYSIWYG/Markdown editor. Screenshots:
Once clicking on "Switch to markdown":
Is this an open-source library available for implementation, or is this entirely an internal Reddit-only solution?
On another note, I've been comparing a whole bunch of Markdown editors, and can't seem to find anything that works really well with React. SimpleMDE isn't bad, but its last commit was two and a half years ago, and it has no official React bindings either.
What would be my best alternative for direct implementation into a React app?
I'm relatively comfortable with laravel, but know very very little about javascript and npm in general... just to set some context.
I am building an app where I now require a "library of forms" to be filled out. So I'm thinking that I should leverage the expertise of others, and take advantage of what appears to be quite an impressive bit of work, in the form of SurveyJS. https://surveyjs.io/Documentation/Library
I'm probably making a total dog's breakfast of these different concepts, so bear with me please.
So whilst I've got the npm thing running smoothly, I'm not sure I understand the whole webpack compilation thing (yet).
Can you explain to me...
My plan is to have a number of "surveys" defined suitably for the surveyjs "engine". The logic I'm seeing is laravel app eventually pulls "a survey" and passes it to a view to be "executed".
The surveyJs librarys will use that model amd provide the results back to the laravel app - I'll pickup the results in a controller and deal with them.
If this is a suitable approach, then what are these choices about? https://github.com/surveyjs
If I take https://github.com/surveyjs/surveyjs-php (because it's the closest thing I can find to php/laravel then first step is to install docker. I'm a little confused about why I would be installing more "infrastructure" when I'm actually looking for the libraries necessary.
I don't understand why what I'm thinking as a very clever bit of javascript seems to want it's own "infrastructure" - docker / webpacks / etc. And then there's still the whole laravel mix thing.
Thanks in advance.
The main repo has dists for several different js frameworks, the editor repo is just that - only the core surveyjs lib - and the other repos are sample apps, a base project template and extras you may not need.
JavaScript has become a whole ecosystem in and of itself: building with rollup, webpack, parcel, brunch, gulp? For which framework, if any, Angular, react, vue, jquery, vanilla or a little bit of a and a little of b? What are you targeting, browsers, node, both, making an electron app? Using es6? Newer? Typescript?
Basically you're seeing surveyjs want infrastructure because they have answered the above questions. Welcome to javascript :)