Basic ReactJS File Structure and Its Features

 ReactJS Features

ReactJS is a component-based javascript toolkit used to create an interactive and dynamic user interface for websites and mobile applications, with a focus on producing single-page applications that reflect data in real time. Currently, it is one of the most used front-end JavaScript libraries in the IT industry. It deals with the View component of the Model - View - Controller (MVC) architecture. 

File Structure:-

React also use a few common approaches which are normally used by every project for file structure. These are the few common approaches:-

1. Grouping by features or routes:- One of the common ways to structure projects is to locate CSS, JS, and tests together inside folders grouped by feature or route.
    Ex:- Home //Components in-home component, we put all the related files here
           Home.js
           Home.css
           HomeAPIUtils.js
           HomeAPIUtils.test.js

2. Grouping by file type:- Another popular way to structure projects is to group similar files together, 
    Ex:- API/
            AuthorisationAPI.js
            AuthorisationAPI.test.js

Accept these two file structure some people also prefer separate components for different folders on their role in the application.

Features are as follow:- 

1. Virtual DOM:- The main ReactJS Feature is the Virtual-DOM where only one-way data binding is present wherein AngularJS two way data binding was there any changes to the view are also reflected in the data and vice versa but in ReactJS Instead of updating the DOM directly React makes two copies of a Virtual DOM, the original and an updated version that reflects changes displayed in from the view. The two copies that are stored are then compared, and any changes that occur cause the view to be updated directly, which is why it is preferable for real-time applications.

2.Event handling:-ReactJs handle the event as same as real DOM handle. we can create own events which are fully compatible with the W3C object model. it provides the cross-browser interface for the native event which means you don't need to worry about the incompatibility events names and fields. 

3. JSX: JavaScript Syntax Extension is not required but is recommended. It is a blend of JavaScript and XML. JSX makes it easy to design a React component. It is one of ReactJS' finest features. Developers have always chosen the easiest path.

4. Performance:- React's performance is achieved by one-way data binding and an application architecture known as Flux controls.ReactJS allows us to refresh the View for the user and, with Flux, govern the application workflow. Introducing virtual DOM has advantages since it compares new data to the actual DOM and instantly refreshes the view.

Thanks & Regards,