## Trouble Shooting

### Why my jsx element not showing correctly?

config sublime text to highlight jsx

### Anything about ES6 syntax error by browser.

For example, store.js:1 Uncaught SyntaxError: Unexpected token import, checkthis post for more information about babel plugins, however, we also need to pay attention to the path that plugins take effect. For example, in the “webpack.config.js” file, the module part looks like this:

It means that “react-hot” && “babel” will collect files from “/src” folder and apply two loaders on it. Thus, any folder outside the path the “/src” will be ignored by loaders. In our original example, store.js is located outside “/src”, thus the import syntax will not be converted into es2015 that browser can recognize, thus gives such error.

### Pressing “enter” don’t automatically submit the input

It’s more like a UX experience than a problem. In the traditional input and button structure:

However, after user types in something in the input box, pressing “enter” key won’t directly submit the input. Thus, we want to improve it by converting it into a form style to automate whole process:

Then, pressing “enter” key right after you finish typing should work!

## Tricks and Notes

### Render JSX with if-else logic control

Sometimes, we just want to render JSX depending on some state values like in Angular. We can simple assign JSX to variable inside render(), and note that we need a parathesis around JSX for assignment. This code snippet is used in redux-todolist. Do note that to avoid confusion, I still use .bind(this) syntax below, but I recommend to put binding logic inside constructor().

Some other times, in order to keep render function clean, we will move the render logic into another function to return JSX syntax and call that function inside render(), note that we don’t need the .bind(this) syntax in this case! Because, the whole reason of using .bind(this) is that inside the _onClick handler function, the this will points to nothing(null), instead of the React component, which may causes the “this.props” not found error and the like. However, in this case, we simply return JSX syntax based on if-else logic, and we won’t need the binding.

### Webpack in production

Pretty similar with using webpack in dev mode, but much simpler in that you only need to specify a correct output path, and webpack will handle the else stuff. And it contains Uglify plugins and others that can help produce the production bundle.js file.

### How redux’s state update react’s components

When you use Redux in React application, follow one simple rule - all your components are stateless (means, no component initializes its state or calls .setState() anywhere).

The redux way of design based on state container, one big object that holds all application state. As React component, being connected to Redux store, Redux will pass the state (or portion of it) into that component, as this.props.state property.

That high-order component (or smart component), renders its children components (or dumb components) and handles events from them.

If child component requires change, it triggers corresponding handler (which typically passed as props). The only way to change the state is to dispatch an action. That action contains a type and a payload and based on that type, corresponding reducer is selected. The reducer then produces a new state, based on previous state and action payload.

If in the result of reducer call, state got changed, Redux will re-render high-order component, passing new state in properties. So, all child components will be updated correspondingly.