Book Image

React Cookbook

By : Carlos Santana Roldán
Book Image

React Cookbook

By: Carlos Santana Roldán

Overview of this book

React.js is Facebook's dynamic frontend web development framework. It helps you build efficient, high-performing web applications with an intuitive user interface. With more than 66 practical and self-contained tutorials, this book examines common pain points and best practices for building web applications with React. Each recipe addresses a specific problem and offers a proven solution with insights into how it works, so that you can modify the code and configuration files to suit your requirements. The React Cookbook starts with recipes for installing and setting up the React.js environment with the Create React Apps tool. You’ll understand how to build web components, forms, animations, and handle events. You’ll then delve into Redux for state management and build amazing UI designs. With the help of practical solutions, this book will guide you in testing, debugging, and scaling your web applications, and get to grips with web technologies like WebPack, Node, and Firebase to develop web APIs and implement SSR capabilities in your apps. Before you wrap up, the recipes on React Native and React VR will assist you in exploring mobile development with React. By the end of the book, you will have become familiar with all the essential tools and best practices required to build efficient solutions on the web with React.
Table of Contents (17 chapters)
15
Most Common React Interview Questions

Using React on Windows

I'm not a big fan of Windows for development since it's kind of problematic to configure sometimes. I will always prefer Linux or Mac, but I'm aware that a lot of people who are reading this book will use Windows. In this recipe, I'll show you the most common problems you may have when you try to follow the recipes in this book using Windows.

How to do it...

We'll now see the most common problems using Windows for development:

  1. Terminal: The first problem you will face is to use the Windows terminal (CMD) because it does not support Unix commands (like Linux or Mac). The solution is to install a Unix Terminal; the most highly recommended is to use the Git Bash Terminal, which is included with Git when you install it (https://git-scm.com), and the second option is to install Cygwin, which is a Linux Terminal in Windows (https://www.cygwin.com).
  2. Environment variables: Another common problem using Windows is to set environment variables. Generally, when we write npm scripts, we set environment variables such as NODE_ENV=production or BABEL_ENV=development, but to set those variables in Windows, you use the SET command, which means you need to do SET NODE_ENV=production or SET BABEL_ENV=development. The problem with this is that if you are working with other people that use Linux or Mac, they will have problems with the SET command, and probably you will need to ignore this file and modify it only for your local environment. This can be tedious. The solution to this problem is to use a package called cross-env; you can install it by doing npm install cross-env, and this will work in Windows, Mac, and Linux:
   "scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --
mode development --open",
"start-production": "cross-env NODE_ENV=production webpack-dev-
server --mode production"
}

  1. Case-sensitive files or directories: In reality, this also happens on Linux, but sometimes it is very difficult to identify this problem, for example, if you create a component in the components/home/Home.jsx directory but in your code you're trying to import the component like this:
    import Home from './components/Home/Home';
Normally, this won't cause any problems on Mac but can generate an error on Linux or Windows because we are trying to import a file with a different name (because it's case-sensitive) into the directory.
  1. Paths: Windows uses a backslash (\) to define a path, while in Mac or Linux they use a forward slash (/). This is problematic because sometimes we need to define a path (in Node.js mostly) and we need to do something like this:
    // In Mac or Linux
app.use(
stylus.middleware({
src: __dirname + '/stylus',
dest: __dirname + '/public/css',
compile: (str, path) => {
return stylus(str)
.set('filename', path)
.set('compress', true);
}
})
);

// In Windows
app.use(
stylus.middleware({
src: __dirname + '\stylus',
dest: __dirname + '\public\css',
compile: (str, path) => {
return stylus(str)
.set('filename', path)
.set('compress', true);
}
})
);

// This can be fixed by using path
import path from 'path';

// path.join will generate a valid path for Windows or Linux and Mac
app.use(
stylus.middleware({
src: path.join(__dirname, 'stylus'),
dest: path.join(__dirname, 'public', 'css'),
compile: (str, path) => {
return stylus(str)
.set('filename', path)
.set('compress', config().html.css.compress);
}
})
);