What do dollar and colon represent in React?

$ is not of react. But its ES6 feature called template literals more at Template Literals basic or template literals.

In react, you have Route and Link components in react router module.

Route takes two properties: path and component. When a path matches the path given to the component, it will return the component specified

In your Route, you are saying to match any path which is of movie/anyid which means it navigates to the component specified (here Movie) with the given parameter

Link is used to specify which path to go to. Its just a wrapper of <a> tag and helps in navigating to the specified path and in your current example, its to /movie/1 (assuming this.state.movies[index].id is 1)

Well its a JavaScript ES6 feature ,

As you can imagine before ES6 you can do something like :

var user = 'xyz' + newuser;

ES6:

var user = `xyz${newuser}`;

Template literals are enclosed by the back-tick (``) , Template literals can contain placeholders. These are indicated by the dollar sign and curly braces (${expression}).

You can read more about Template literals on Mozilla

I too have spent ages trying to find out how the colon works. It's pretty frustrating to have to try and reverse engineer the examples rather than having it explained in the API section.

Having said that, there is a hint in the documentation https://reacttraining.com/react-router/core/api/Route where it says that the path accepts "Any valid URL path or array of paths that path-to-regexp@^1.7.0 understands". If you look at the documentation for path-to-regexp you can see that "Named parameters are defined by prefixing a colon to the parameter name ... By default, the parameter will match until the following path segment"

Then you can look at https://reacttraining.com/react-router/core/api/match which explains how to get hold of a match object and how you can extract the parameters from it.