It works because in JavaScript, true && expression always evaluates to expression, and false && expression always evaluates to false. Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.
Good example for the {var > 0 %% } type of expression.
In JavaScript, class methods are not bound by default. If you forget to bind this.handleClick and pass it to onClick, this will be undefined when the function is actually called.
Remember to BIND for Class Components or just USE arrow functions instead.
Another difference is that you cannot return false to prevent default behavior in React. You must call preventDefault explicitly
We need to call preventDefault(e) on the event directly.
this.setState((state, props) => ({ counter: state.counter + props.increment }));
This version of this.setState() takes a callback and passes the "previous" state as the first parameter. USE THIS to calculate with states, as state update asynchronously.
Do Not Modify State Directly For example, this will not re-render a component: // Wrong this.state.comment = 'Hello'; Instead, use setState(): // Correct this.setState({comment: 'Hello'}); The only place where you can assign this.state is the constructor.
Change state using setState() or with the hooks, changing the state out of this will NOT re-render the component.
State is similar to props, but it is private and fully controlled by the component.
States are PRIVATE.
React is pretty flexible but it has a single strict rule: All React components must act like pure functions with respect to their props.
ALWAYS REMEMBER, keep component props PURE, do NOT change the values of props. Use them and return something new instead.
We recommend naming props from the component’s own point of view rather than the context in which it is being used.
So props can remind standalone.
React treats components starting with lowercase letters as DOM tags. For example, <div /> represents an HTML div tag, but <Welcome /> represents a component and requires Welcome to be in scope.
Always start component names with a capital letter.
Elements are what components are “made of”, and we encourage you to read this section before jumping ahead.
So "React Elements" are NOT the same thing as "React Components."
Warning: Since JSX is closer to JavaScript than to HTML, React DOM uses camelCase property naming convention instead of HTML attribute names. For example, class becomes className in JSX, and tabindex becomes tabIndex.
Threat it more like JS than HTML when it comes to conventions. Keep it camelCase.
After compilation, JSX expressions become regular JavaScript function calls and evaluate to JavaScript objects.
Like SCSS for CSS, JSX is just a better way to write for React.
You can put any valid JavaScript expression inside the curly braces in JSX. For example, 2 + 2, user.firstName, or formatName(user) are all valid JavaScript expressions.
ANY JS!
Instead of artificially separating technologies by putting markup and logic in separate files, React separates concerns with loosely coupled units called “components” that contain both
Comparison of AngularJS 2 and ReactJS.
Angular is a full framework. React is a library. The latter involves more decisions about other packages, and more differences among projects.
React uses JSX, an HTML-like syntax that compiles to JavaScript. It can tell you where your mistakes are. With Angular, you have to guess.