This is the 19th day of my participation in the Genwen Challenge

Hi, I’m @Luo Zhu, a blogger who keeps writing. Thank you for every like and comment you make.

This article was first published on luo Zhu’s official website

Translated from Sudheerj/reactJs-interlocution-Questions

This article synchronizes in the public account Luo Zhu early teahouse, reprint please contact the author.

1. What is the common folder structure of React?

There are two common approaches to React project file structure.

  1. Group by feature or route: *

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

Common / ├ ─ Avatar. Js ├ ─ Avatar. CSS ├ ─ APIUtils. Js └ ─ APIUtils. Test. The js feed / ├ ─ index. The js ├ ─ feed. Js ├ ─ feed. The CSS ├ ─ ├─ ├─ class exercises, class exercises, class exercises, class exercises, class Exercises ProfileHeader. CSS └ ─ ProfileAPI. JsCopy the code
  1. Grouped by file type:

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

API / ├ ─ APIUtils. Js ├ ─ APIUtils. Test. The js ├ ─ ProfileAPI. Js └ ─ UserAPI. Js components / ├ ─ Avatar. Js ├ ─ Avatar. CSS ├ ─ Feed. Js ├ ─ Feed. CSS ├ ─ FeedStory. Js ├ ─ FeedStory. Test. The js ├ ─ Profile. Js ├ ─ ProfileHeader. Js └ ─ ProfileHeader. The CSSCopy the code

2. What are the popular animation packages?

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

3. What are the benefits of style modules?

We recommend avoiding hard-coding style values in components. Any values that might be used in different UI components should be extracted into their own modules.

For example, these styles can be extracted into a separate component.

export const colors = {
  white,
  black,
  blue,
};

export const space = [0.8.16.32.64];
Copy the code

It is then imported separately in other components.

import { space, colors } from './styles';
Copy the code

4. What are the popular React linters?

ESLint is a popular JavaScript linter. There are plug-ins that you can use to analyze specific code styles. The most common of these React plug-ins is an NPM package called eslint-plugin-react. By default, it checks some best practices, with rules that check everything from keys in iterators to a whole set of item types.

Another popular plug-in is eslint-plugin-jsX-a11y, which will help fix common accessibility problems. Because JSX provides a slightly different syntax from regular HTML, problems with Alt text and tabIndex, for example, will not be detected by regular plug-ins.

5. How do YOU make the AJAX call, and in which component’s lifecycle method should you make the AJAX call?

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

For example, get a list of employees from the API and set the 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>); }}}Copy the code

6. What are rendering props?

Rendering props is a simple technique that uses a props to share code between components, whose value is a function. The following component uses render props, which returns a React element.

<DataProvider render={data= > <h1>{`Hello ${data.target}`}</h1>} / >Copy the code

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

React Router, Redux, Redux, Redux, Redux