123. What are the common folder structures for React?

     There are two common practices for React project file structure.

     1. Grouping by features or routes:

        One common way to structure projects is locate CSS, JS, and tests together, grouped by feature or route.

        common/
        ├─ Avatar.js
        ├─ Avatar.css
        ├─ APIUtils.js
        └─ APIUtils.test.js
        feed/
        ├─ index.js
        ├─ Feed.js
        ├─ Feed.css
        ├─ FeedStory.js
        ├─ FeedStory.test.js
        └─ FeedAPI.js
        profile/
        ├─ index.js
        ├─ Profile.js
        ├─ ProfileHeader.js
        ├─ ProfileHeader.css
        └─ ProfileAPI.js
        

     2. Grouping by file type:

        Another popular way to structure projects is to group similar files together.

        api/
        ├─ APIUtils.js
        ├─ APIUtils.test.js
        ├─ ProfileAPI.js
        └─ UserAPI.js
        components/
        ├─ Avatar.js
        ├─ Avatar.css
        ├─ Feed.js
        ├─ Feed.css
        ├─ FeedStory.js
        ├─ FeedStory.test.js
        ├─ Profile.js
        ├─ ProfileHeader.js
        └─ ProfileHeader.css
        

124. What are the popular packages for animation?

     React Transition Group and React Motion are popular animation packages in React ecosystem.

125. What is the benefit of styles modules?

     It is recommended to avoid hard coding style values in components. Any values that are likely to be used across different UI components should be extracted into their own modules.

     For example, these styles could be extracted into a separate component:

     export const colors = {
       white,
       black,
       blue
     }
     
     export const space = [
       0,
       8,
       16,
       32,
       64
     ]
     

     And then imported individually in other components:

     import { space, colors } from './styles'
     

126. What are the popular React-specific linters?

     ESLint is a popular JavaScript linter. There are plugins available that analyse specific code styles. One of the most common for React is an npm package called eslint-plugin-react. By default, it will check a number of best practices, with rules checking things from keys in iterators to a complete set of prop types.

     Another popular plugin is eslint-plugin-jsx-a11y, which will help fix common issues with accessibility. As JSX offers slightly different syntax to regular HTML, issues with alt text and tabindex, for example, will not be picked up by regular plugins.

127. How to make AJAX call and in which component lifecycle methods should I make an AJAX call?

     You can use AJAX libraries such as Axios, jQuery AJAX, and the browser built-in fetch. You should fetch data in the componentDidMount() lifecycle method. This is so you can use setState() to update your component when the data is retrieved.

     For example, the employees list fetched from API and set local state:

     class MyComponent extends React.Component {
       constructor(props) {
         super(props)
         this.state = {
           employees: [],
           error: null
         }
       }
     
       componentDidMount() {
         fetch('https://api.example.com/items')
           .then(res => res.json())
           .then(
             (result) => {
               this.setState({
                 employees: result.employees
               })
             },
             (error) => {
               this.setState({ error })
             }
           )
       }
     
       render() {
         const { error, employees } = this.state
         if (error) {
           return <div>Error: {error.message}</div>;
         } else {
           return (
             <ul>
               {employees.map(employee => (
                 <li key={employee.name}>
                   {employee.name}-{employee.experience}
                 </li>
               ))}
             </ul>
           )
         }
       }
     }
     

128. What are render props?

     Render Props is a simple technique for sharing code between components using a prop whose value is a function. The below component uses render prop which returns a React element.

     <DataProvider render={data => (
       <h1>{`Hello ${data.target}`}</h1>
     )}/>
     

     Libraries such as React Router and DownShift are using this pattern.

React Router

129. What is React Router?

     React Router is a powerful routing library built on top of React that helps you add new screens and flows to your application incredibly quickly, all while keeping the URL in sync with what's being displayed on the page.

130. How React Router is different from history library?

     React Router is a wrapper around the history library which handles interaction with the browser's window.history with its browser and hash histories. It also provides memory history which is useful for environments that don't have global history, such as mobile app development (React Native) and unit testing with Node.

131. What are the <Router> components of React Router v4?

     React Router v4 provides below 3 <Router> components:

     1. <BrowserRouter>
     2. <HashRouter>
     3. <MemoryRouter>

     The above components will create browser, hash, and memory history instances. React Router v4 makes the properties and methods of the history instance associated with your router available through the context in the router object.

132. What is the purpose of push() and replace() methods of history?

     A history instance has two methods for navigation purpose.

     1. push()
     2. replace()

     If you think of the history as an array of visited locations, push() will add a new location to the array and replace() will replace the current location in the array with the new one.