Chapter 2 ■ hello World
33 Pay close attention to the quotes: these are back-ticks and not single-quotes. This construct is called a template string. You can plug in variables using ${} within the string, and the variables will be expanded inline, just like string interpolation in perl and python.
In fact, you can use any JavaScript expression rather than just a variable.
...
const component = <p>{message}</p>;
...
Similar to ES2015 string interpolation, this is a JSX feature. The curly braces allow you to insert JavaScript expressions inside JSX, and these will be replaced by the value of the expression. This works not only for HTML text nodes but also within attributes. For example, the class name for an element can be a JavaScript variable.
Chapter 2 ■ hello World
Answers to Exercises
Exercise: JSX
1. The attribute "type=text/babel" on the script element indicates that the contents are JSX, as opposed to regular JavaScript, the default if you don’t specify a type. The babel compiler compiles all such script elements into JavaScript and injects it back. Removing either the babel compiler or the type attribute will cause the script not to be compiled into JavaScript and will cause errors on the JavaScript console.
2. To specify a class in JSX, you need to use className=<name>
instead of class=<name> as you would have done in HTML.
3. A minified version of React hides or shortens runtime errors.
A non-minified version gives full errors and helpful warnings as well.
Exercise: npm
1. The npm option --save causes the installation/uninstallation to be recorded under the dependencies section of
package.json.
2. package.json got created when we created the project using npm init. In fact, all of the responses to the prompts when we ran npm init were recorded in package.json.
3. Running npm install without any further options or
parameters causes all dependencies to be installed, by looking at package.json. Thus, you could add dependencies manually to package.json and just use npm install. This gives you better control over which version of the package you want.
4. The option --save-dev adds the package in devDependencies instead of dependencies. The list of dev dependencies will not be installed in production, which is indicated by the environment variable NODE_ENV being set to the string production.
5. Package files are installed under the directory node_modules under the project. npm ls lists all the packages installed, in a tree-like manner. --depth=0 restricts the tree depth to the top- level packages. Deleting the entire node_modules directory is one way of ensuring you start clean.
Chapter 2 ■ hello World
35
Exercise: Express
1. The static file middleware does not specially treat hello.html as it did index.html, so you will have to access the application with the name of the file like this: http://localhost:3000/
hello.html.
2. For accessing static files via a different mount point, specify that prefix in the middleware generated helper function as the first parameter. The directory name will now be the second parameter.
For example, express.static('/public', 'static').
3. By default, npm start runs the command node server.js.
If you use some other file name, say app.js, you should add
"start": "node app.js" as a script under the scripts section of package.json to tell npm that this is the actual start command. Alternatively, you could just run the server yourself without using npm, using the command node app.js.
Exercise: Babel
1. App.js now contains pure JavaScript, as discussed in the beginning of the chapter. JSX, the short-hand notation for React.createElement() function calls, has been transformed into just that.
2. When you deploy the code, you only deploy a pre-built version of the application. That is, you transform the JSX on a build server or your development environment, and push out the resulting JavaScript to your production server. Thus, on the production server, you will not need the tools that are required to build the application. Therefore, you use --save-dev so that on the production server, the package need not be installed.
3. The first argument to babel is the source: this can be a directory or an individual file. --presets react tells it to run the React (JSX) transformation. --out-dir tells it to place output files (derived from the input file name) at the specified location. You could have used --out-file to specify any custom file name.
4. We’ll definitely use the es2015 transform because we’ll soon switch over to ES2015 for the client-side code as well. There are other useful transforms such as object-assign which also can be considered.
Chapter 2 ■ hello World
Exercise: ES2015
1. React does this on purpose, to avoid cross-site scripting vulnerabilities. It is not easy to insert HTML markup, although there is a way using the dangerouslySetInnerHTML attribute of an element. The correct way to do this is to compose an array of components. We will explore this in later chapters.
2. Without ES2015 transformation, only JSX snippets were transformed. Now, with ES2015 transformation, even JavaScript is modified.
37
© Vasan Subramanian 2017
V. Subramanian, Pro MERN Stack, DOI 10.1007/978-1-4842-2653-7_3