React was developed by Facebook as a way to solve the problem of scalable applications with heavy traffic. Web developers use this open-source JavaScript framework to build user interfaces.

The flexibility and variety of capabilities that React offers make this framework widely used by developers and large companies such as Facebook and Instagram.

In Iran, Reaction has also been well received by developers, so it is important to be familiar with the important techniques available to us in the construction and structuring of large Reaction programs.

Build tools

Many web developers are keen to use a webpack to build their projects. Although the use of this tool can be complicated, the development team has made the process easier than ever with the hard work they put into version 5 and the variety of features and comprehensive documentation they provide.

Developers can use Babel to compile their own code, which includes special converters such as JSX, while they also have access to the local webpack-dev-server site, which includes automatic page refresh capabilities.

In addition, it is possible to use ES modules, which were first introduced at ES2015, to manage input and output dependencies as accurately as possible.

The webpack can support CommonJS and remove unused code from the collection using ES2015 modules. Statistics show that a large portion of the web ecosystem has shifted to ES modules, so it is not a bad idea to base the foundation of new projects on these changes.

Of course, if you do not want to use a webpack, there are other alternatives available, one of which is Rollup.

Folder structure

There is no specific folder structure for React programs. But the solution that you will learn in the following can be used in connection with all projects.

To sort things out, we put all the application code in a folder called src. This only includes the code that is included in your final software package and nothing more.

There are many benefits to doing this, as you can tell Babel (or any other tool that works based on the application code) to only search a list and make sure no unnecessary code is processed. In this case, you can store other code such as webpack configuration files in a folder with the appropriate name.

 The structure of the main folder can be as follows:

– src => app code here

– webpack => webpack configs

– scripts => any build scripts

– tests => any test-specific code (API mocks, etc.)

• The above approach allows you to place the top-level files index.html, package.json, and files that start with a dot (such as .babelrc) in that folder.
•  Some people prefer to put the Babel configuration in package.json, but in larger projects, these files can be very large, so it is better to use .eslintrc, .babelrc, and similar examples.

Components of hypocrisy

After you have prepared the src folder, it is time to decide on the structure of the project components. One common way is to put all the components in one large folder, such as src/components, but such a choice can quickly become confusing in large projects.

It is best to group the components by where they are used in the application, along with the main folder for common components that are used throughout the application (such as buttons, headers, footers, and components that are commonly used).

For example, we have a folder called cart that contains all the components related to shopping cart display, and another folder called listings that contain codes that list items that users can buy on a page.

Additionally, categorizing folders means that you no longer need to use the prefix for naming to encode subcategories.

import Total from ‘../cart/total’

// vs

import CartTotal from ‘../cart/cart-total’

Although it may sometimes be necessary to use full names with suffixes and prefixes to clearly define the tasks of each section in shared projects, this method can often prevent duplication of additional letters.

Use the jsx extension instead of capital letters

Many people capitalize components for separating React from simple JavaScript files. So, according to the example above, the filenames will be CartTotal.js and Total.js, but some other developers prefer to choose lowercase names with a hyphen (-) character and to separate the root components from the .jsx extension. Use for files.

So it is better to choose the file name cart-total. jsx. The above solution has the great advantage of allowing you to narrow down the search domain to find root files with a .jsx search, and you can even apply specific webpack plugins to these files if needed.

Whatever style you decide upon, that look can be further enhanced by the type of shutter hinges used. As projects get bigger, not following these simple principles will confuse you when finding files.

One ripping component per file

According to the previous rule, we adhere to a React component file and this component must always be the default output. Typically react files are as follows:

import React from ‘react’

export default function Total (props) {

…

}

In cases where we need to connect a component to a code to a Redux storage, this process can be managed as follows:

import React, {Component, PropTypes} from ‘react’

import {connect} from ‘react-redux

export default function Total (props) {

…

}

export default connect (() => {…}) (Total)

As you can see, we will continue to output from the main component. This is quite useful for testing code and when we do not need to set Redux in Unit Test.

Avoid large render methods

Although this section refers more to the render method defined in the execution of the React class, it can still be applied to other application components. That’s why you should be wary of a processing component with too large HTML content. We try to use smaller and more reactive components instead of a small number of larger components.

A good guide to understanding when your component is getting too large is the size of the rendering function. If it’s too big or you have to break it down into several smaller rendering functions, it’s probably time to break it down.

The above approach is not complicated, you and your group should pay attention to its size before using more components. The size of the render function can be a good example of this. Another good indicator to avoid engaging with heavy components is the number of targets or items used.

Always use prop-type

React using the prop-types package allows you to document the names and types of properties you expect a component to provide. By specifying the names and types of attributes expected, as well as whether they are optional, you can be more confident that the components you are working with providing you with the appropriate attributes, and if you forget the name of an attribute, you can spend less time debugging your code. You can do this using the eslint-plugin-react PropTypes rule.

While it may seem like a waste of time to do so, you will be happy to do so when you go back to reusing a component you wrote about six months ago.

Redux

Many developers use Redux to manage data in their applications, so how to organize Redux applications is very important, because developers offer different methods and options for this purpose. Duck is a convenient option that provides all the features needed by different parts of your application in one file.

Instead of having reducers.js and actions.js, each of which contains related code, the Ducks system recognizes that it makes more sense to group related code into a single file.

Assuming you have a Redux storage with two user keys and posts, your folder structure looks something like this:

ducks

•  index.js
•  user.js
•  posts.js

The index.js file contains the code that generates the primary recipient (possibly using combineReducers from Redux).

Now in user.js and posts.js you should put codes similar to the following code snippets:

// user.js

const LOG_IN = ‘LOG_IN’

export const logIn = name => ({type: LOG_IN, name})

export default function reducer (state =}}, action) {

…

}

JavaScript standalone modules

Although this article focuses on the components of React when building a React application you have to write a lot of code that is completely separate from React.

The separation of many codes from the components of the programmer is one of the main advantages of the React framework. You can consider folders called lib or services to place content separate from React components.

These services sometimes provide a group of functions and sometimes an object associated with the functions.

For example our services / local-storage.js

Which contains part of the window.localStorage API:

// services / local-storage.js

const LocalStorage = Local

get ()}},

set ()}},

…

}

export default LocalStorage

• Using this method, you get the ability to test this code separately without the need to render the components of the react.