What is the proper "workflow" of modern React.js development?

Question

Suppose I am a decent JS programmer. I can easily create React.js. I can also write HTML and CSS to some extent. However, I cannot create a web page from scratch, i.e. Define the structure of HTML (say in terms of React components or just HTML), add CSS, and get an all-brilliant, responsive, modern web page. So, I work with a designer who uses a prototype web page for black magic (or maybe a WYSIWYG tool or service, for example wix.com).

So, I get a bunch of html files, images, css styles and maybe a bit of javascript.

Now I need to convert all this into a hierarchy of React components. I am sure that I can do this, and after the work is completed, I get a brilliant new website, beautiful from a technological and aesthetic point of view. However, we all know that we work in an Agile environment. Later, the designer wants me to change something. “Add a black border,” he says. And here everything gets out of hand. Should I do this (manually see the style in css and add a border)? What if the required changes are more complicated? How to exchange header and footer? Should he do this? (restore these htmls / css / images sources again) What happens after that? Do I have to distinguish between the whole website to find out what has changed and to redefine the entire structure of the component to reflect the changes? Are there accepted methodologies for solving this evil circle? Maybe a tool that maps ugly HTML input to properly executed React code? Or maybe I'm completely wrong, and I have to learn the art of design myself?

Edit: Good, since everyone is ignoring the question, here is a shorter version. If Templater changes templates already implemented on the React website, what can I do except manually diff and fix all the changes in the css / html source files?

Answer 1

That you sound a little sketchy to me. You must know CSS and HTML if you want to create a website and especially support it. The designer will probably not be here forever for you, and you will find yourself in a difficult position.

The type of stream you describe where designers create the whole structure and give you the full html and css code only works in jQuery age. The plugin of your scripts was fairly lightweight and did not require major changes, as it was separate from the actual html, and you would use dom identifiers for targeting.

How it works in Uber, but I am sure in many other companies that the designer is responsible for the design, but that's all, the rest is up to you. You must make a second pass after it for the actual implementation.

Since playback can be quite complex and approximative, you can use Invision , where the designer will create layouts, but you, as a developer, can get all the properties of the css element, which simplifies integration (dunno if wix has the same function).

If your designer updates part of the design, you will understand what has changed and what component needs to be updated. This is one of the benefits of owning the code, and not from someone else (especially if it was automatically generated).

Answer 2

• Get html files
• Create Router in React
• Transfer the main layout material to the layout component
• Transfer page content to PagesComponents
• Transfer common components to your component libraries (Navs, Buttons, etc.).
• Replace html common parts with newly created components
• Apply logic, etc. Refactoring, refactoring, refactoring ... :)

Usually I ask Templater / HTML to put their work in ReactComponents, for this I configure a simple empty React application, with route definitions and work with them, this will definitely save you a lot of time, because you can apply some logic in parallel or rethink some parts of your application and request changes.

To be real, they just need to start by creating a library with clean components, where each component and styles for it are isolated from the rest of the application, let them put the default values ​​inside, and then let them use the props after the clean components are done, you can organize your application using containers and logic.

Answer 3

The first thread you mentioned is in order when you only get html and css pages on a plane from the designer / html encoder.

If you plan to create these pages using the / angular / vue reaction ...

you don't need javascript from the designer.

Actions you need to take:

1) get html and css from the designer 2) design on paper your blocks for components: header, navigator, sidebar, mainContent, footer, PostsList, message, comments, comment, etc. 3) Start building these components one at a time.

* Suppose we use a reaction

4) make sure that each component is standalone and extensible, for easy updating in the future. 5) Make sure you have tests! Explore TDD 6) submit your application

The following update cycles ...

1) Your designer gives you new developed pages 2) you can use the html and css * constructor PARTIALLY and use this in your code 3) make sure that you expand your components or update them correctly. 4) tests should work fine

Some notes before diving into everything that works:

• learn html, css and how to create simple pages correctly
• you can try bootstrap, it is very simple to use
• find out the reaction (if that's what you want to use)
• you will need to create your own code, so you will need webpack or any other tool.

But there is still a lot of work ahead, so good luck is fun! :)

Answer 4

This sounds like a question someone would ask coming from a wokring php programming background with templates. React works in a completely different way, and if you want to be in a position where you have a base site and you want to make changes to it, then you will need to configure the development environment so that after making changes you would “run the assembly”, which will create your linked miniature javascript file from the source code in your development environment, ready for release, which you will then click on the server in the same way as on any site.

The reason for this work is considered the way forward, because it is so easy to separate the logic of your sites from its aesthetics. Thus, adding a border to an element becomes as simple as adding a css line, starting the assembly, downloading the latest version of your application to the server and executing it. As long as you write it correctly, to start with you, you must be sure that a visual change will only affect your site visually. Changing the class name or moving an element will not break the logic, because the logic should be either in your repository / actions (the method of storing the abbreviation / stream), or in the local code of your component (functional component).