There are a total of 3 cases of communication between React components:

• Case 1: Parent to Child communication
• Case 2: Child to Parent communication
• Case 3: Not-related components (any component to any component) communication

JSX is a preprocessor step that adds XML syntax to JavaScript. You can definitely use React without JSX but JSX makes React a lot more elegant.

Just like XML, JSX tags have a tag name, attributes, and children. If an attribute value is enclosed in quotes, the value is a string. Otherwise, wrap the value in braces and the value is the enclosed JavaScript expression.

Fundamentally, JSX just provides syntactic sugar for the React.createElement(component, props, ...children) function.

So, the following JSX code:

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(<HelloMessage name="Kalo" />, mountNode);

Compiles down to the following JavaScript code:

class HelloMessage extends React.Component {
  render() {
    return React.createElement(
      "div",
      null,
      "Hello ",
      this.props.name
    );
  }
}

ReactDOM.render(React.createElement(HelloMessage, { name: "Kalo" }), mountNode);

In conclusion, note that the following line in JSX is neither a string nor HTML:

const element = <h1>Hello, world!</h1>;

It is called JSX, and it is a syntax extension to JavaScript. JSX may remind you of a template language, but it comes with the full power of JavaScript.

The React team says in their docs that they recommend using it to describe what the UI should look like.

Flux is the application architecture that Facebook uses for building client-side web applications. It complements React's composable view components by utilizing a unidirectional data flow. It's more of a pattern rather than a formal framework, and you can start using Flux immediately without a lot of new code.

Flux applications have three major parts: the dispatcher, the stores, and the views (React components). These should not be confused with Model-View-Controller. Controllers do exist in a Flux application, but they are controller-views — views often found at the top of the hierarchy that retrieve data from the stores and pass this data down to their children. Additionally, action creators — dispatcher helper methods — are used to support a semantic API that describes all changes that are possible in the application. It can be useful to think of them as a fourth part of the Flux update cycle.

Flux eschews MVC in favor of a unidirectional data flow. When a user interacts with a React view, the view propagates an action through a central dispatcher, to the various stores that hold the application's data and business logic, which updates all of the views that are affected. This works especially well with React's declarative programming style, which allows the store to send updates without specifying how to transition views between states.

To get syntax highlighting in your editor (e.g. VS Code) you'll need to download typing information for the modules that you use in your project.

Say for example you use React and ReactDOM in your project, and you want to get highlighting and Intellisense for them. You will need to add the types to your project using this command:

npm install --save @types/react @types/react-dom

Your editor should now automatically pick up on on this typing information and supply you with autocomplete and Intellisense for these modules.

While React's component driven architecture is fantastic for breaking down the application into modular, encapsulated little pieces, it introduces some challenges for managing the state of the application as a whole. The time to use Redux is when you need to display the same data across more than one component or page (aka route). At that point you can no longer store the data in variables local to one component or the other, and sending messages between components quickly becomes a mess. With Redux your components are all subscribing to the same shared data in the store and thus the state can be easily reflected consistently across the entire application.