We're in the beginning stages of this project, so right now we're just trying to figure out how best to start.
We want to create a UI library of React components, and what we'd like to do is create the library so that you can import just one element directly, so that:
// bad
import {Button} from '#mycompany/uilib'
// good
import Button from '#mycompany/uilib/Button'
That's the big question. So we're looking at a couple of solutions to start - we've taken a look at create-react-library and lerna or storybook might be better starts?
Here's what we're looking for, from a business & engineering perspective.
We all think Typescript is the way to go.
We think that rollup might be better for this type of project than Webpack, but we're not entirely sure. It may be worth a little overhead if it increases dev turnaround and is easier to maintain/configure.
But the big question is that I'm not sure how packages like, say, '#material-ui/core/Button' do it. Googling hasn't helped much, thus the appeal to the StackOverflow gurus. Thanks.
Firstly, I'd suggest sticking with the well-written and supported create-react-app with TypeScript support. This gets a lot of the initial config out of the way.
Then, I'd encourage you to have a look at a combo of Yarn Workspaces and Lerna. Setup can be tricky, but the automated symlinks, and the ability for your individual components (packages) to depend on each other, makes this a powerful combo.
On the dev cycle and "playground" front, Storybook is hard to beat. They have some amazing stuff coming soon around docs, which will be quite powerful (and visually pleasing)
Let me know if you have any more questions - this topic is front-of-mind for me at the moment, so my head is swimming with ideas.
We are trying to revamp the company website, and we have some discussion on choosing the technologies. React is one of our options.
However, the website is basically some static contents, which is hardcoded html pages with many different layouts. The contents are static and will never or seldom update. So our idea is to hard code every content into react, there is no API call to get extra contents for most of the cases (except few pages which will load the price table and news from our CMS).
I want to ask react experts for such scenario is it good to use react? Is it a common practice?
I would highly recommend against using React for your situation because there would be no difference at all.
React, and SPA's(Single Page Applications) in general, excel in scenario's where a page might constantly need to be refreshed because of new or changing data. Since you said your content is static with no changes or API calls, this is the opposite of React's intended use.
I recommend sticking with the technologies you're currently using. If you want to revamp the website i would say to focus more on the design and it look more modern through CSS and maybe some jQuery.
Given there is a React project that uses plain javascript, is there a way to use typescript partially only to define models?
So, lets say there are a few models that map to server responses, can only those be defined in typescript while the rest of the project remains in javascript.
If its possible, how to do it?
Typescript can definitely be implemented gradually into an existing JS project, and I know a few people who have gone through the process on some monoliths, it can be a really boring process but usually low risk.
I'll link you straight away to this:
https://www.typescriptlang.org/docs/handbook/migrating-from-javascript.html
The key is to understand what your goal is, and how to set everything up properly to accommodate for it, as you go it's as simple as toggling a few settings to unblock/check work as you go.
As for your question about some files being JS and some being TS, typescript handles pure JS perfectly fine, so you can switch every file to TS and even if it's pure js there won't be an issue :)
Have a read and if you need any more help on some specifics feel free to comment
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 5 years ago.
Improve this question
Let's assume that I am a decent JS programmer. I can easily do React.js development. I also can write HTML and CSS to some extent. I cannot, however, build a webpage from the ground up, i.e. define the HTML structure (say in terms of React components or just plain HTML), add some CSS and get the all-shiny responsive modern-looking fancy webpage. So, I work with a designer, who uses some sort of black magic (or maybe a WYSIWYG tool, or a service like wix.com) to prototype a web page.
So, what I get is a bunch of html files, images, css styles and maybe a bit of javascript.
Now I need to convert all this into a component hierarchy of React. I'm sure I can do this, and after the job is done, I get a shiny new website, beautiful from the technological and aesthetical point of view.
However, we all know that we work in Agile environments. Later on, a designer wants me to change something. 'Add a black border' he says. And here things go out of control.
Should I do this (manually look up the style in css and add a border)? What if changes required are more complicated? Like swap a header and a footer?
Should he do this? (regenerate those source htmls/css/images again) What happens after that? Should I diff the whole website to learn what have changed and reimplement the whole component structure to reflect changes?
Are there any accepted methodologies to solve this evil circle? Maybe a tool that maps the input ugly html code to the properly done React code?
Or maybe I am totally wrong and I should learn the art of design myself?
Edit: Ok, as everybody is misundestanding the question, here is the shorter version. If the Templater changes the templates already implemented in React site, what can I do except manually diff and patch all the changes to the source css/html files?
What you're sounds a bit sketchy to me. You have to know CSS and HTML if you want to build a website, and especially maintain it. The designer probably won't be here forever for you and you would end-up in a difficult position.
The kind of flow you describe, where the designers creates all the structure and gives you the full html and css code was only working in the age of jQuery. The plug of your scripts were pretty easy and didn't required much changes, since it was decoupled from the actual html and you would use dom ids for the targeting.
How it works at Uber, but I'm sure in a lot of other companies, is that the designer is in charge of the design, but that's it, the rest is up to you. You have to make a second pass after him for the actual implementation.
Since reproduction can be pretty difficult and approximative, you can use Invision, where the designer will create the mockups, but you as a developer can get all the css properties of an element, making the integration much easier to do (dunno if wix has the same kind of feature).
If your designer updates a part of the design, it becomes straight-forward for you to know what changed and what component needs to be updated. That's one of the benefits of owning the code rather than taking one from someone else (especially if it was automatically generated).
Get the html files
Create the Router in React
Migrate the basic Layout stuff into a Layout Component
Migrate the pages content into PagesComponents
Migrate common components into your ComponentsLibrary (Navs, Buttons, etc.)
Replace the common html parts with the newly created Components
Apply logic, and so on. Refactoring, refactoring, refactoring... :)
Usually, I am asking the Templater/HTML to put their work into ReactComponents, for this I setup a simple empty React Application, with Routes definitions, and work with them, it will definitely save you a lot of time, because you can apply some logic in parallel or rethink some parts of your application, and ask for changes.
To be real efficient, they should just start by creating a pure-components library, where every component and the styles for it are isolated from the rest of the application, let them put the default values inside, and then let them use props, after the pure components are done, you can orchestrate your application with containers and logic.
The first flow you mentioned is OK, when you get only plane html and css pages from the designer/html coder.
If you are planing to create those pages with react/angular/vue whatever...
you don't need any javascript from the designer.
The steps you will need to take:
1) get html and css from designer
2) design on paper your blocks to components: header, navbar, sidebar, mainContent, footer, PostsList, Post, CommentsList, Comment, etc
3) Start building those components one by one
*Let's assume we are using react
4) make sure each component is stand alone, and extensible, for easy update in the future.
5) Make sure you have tests! Learn TDD
6) ship your app
Next cycles for updates...
1) Your designer gives you new designed pages
2) you can use the designer html and css *PARTLY and use that in your code
3) make sure you extend your components or update properly
4) tests should still work properly
Some notes before you start diving in to all that work:
learn html, css and how to build simple pages properly
you can try bootstrap it is super easy to use
learn react (if thats is what you want to use)
you will need to build your code, so you will need webpack or whatever tool.
But there is much more work ahead, so good luck it's fun! :)
This sounds like a question somebody coming from a php programming background wokring with templates would ask. React works very differently and if you wanted to be in a position where you had a base site and wanted to make changes to it going forwards you would need to have a development environment setup so that once you have made your changes, you would then 'run a build' which would produce your bundled minified javascript file, from the source code in your development environment, ready for production which you would then push to the server as you would with any site.
The reason working like this is considered the way forward is becuase it is so easy to decouple your sites logic from its aestetic. So adding a border to an element becomes as easy as adding a line of css, running your build, uploading the latest version of your app to the server and its done. As long as its written correctly to begin with you should be able to work with confidence that a visual change will only affect your site visually. Changing a classname or moving an element wont break the logic because the logic should be either in your store/actions (redux/flux store method) or local to your components code (functional component).
I'm pretty new to development. Right now working on an webapp in my freetime.
Backend will be written in Python (here I have the best experience).
How good is the Idea to mixing React components:
like: https://github.com/brillout/awesome-react-components
My Idea was to use these components or let others create components for me (for example a slide show or whatever)
The question is, is this a good Idea? I'm worry that this might create a lot of overhead. For example one component is based on bootstrap and the other on foundation (As I said I'm not experienced web developer and can't judge if this can actualy really happen).
Thanks!
The idea of React components is to have the smallest piece of code you can define.
However, mixing different CSS frameworks, like Bootstrap or Foundation doesn't sound like the best idea. You can, of course mix ready-made components (like React-Bootstrap) with your own custom components, but ideally you would choose one framework and stick with it.
The good thing about React is that you can possibly switch between Frameworks without the need of refactoring everything.
Let's say, for instance, you have a custom component called Slider. If you later decide to use MaterialUI, depending on your configurations, you could just change the import from import Slider from "./Slider" to import Slider from "material-ui/Slider" and the rest of your code would be untouched.
Pick a CSS / UI framework and stick with it. These days I have been working with Semantic UI and they have good integration with React via http://react.semantic-ui.com/
It is awesome! :)
And in addition to that, you can also build your own custom components.
If you think adding a whole framework to your project is a lot of burden, then you can make everything your own from scratch. (Either (1) using the CSS framework classes for the components or (2) defining your own CSS classes)
And to conclude I also agree to not mix CSS frameworks as there might be conflicts! It's not fun! In my project, Bootstrap was conflicting with Semantic UI, so I just stuck with the latter.