Create React App

Create React App o Como aprendi a dejar de preocuparme y amar la bomba

Why Use This?

If you’re getting started with React, use create-react-app to automate the build of your app. There is no configuration file, and react-scripts is the only extra build dependency in your package.json. Your environment will have everything you need to build a modern React app:

• React, JSX, ES6, and Flow syntax support.
• Language extras beyond ES6 like the object spread operator.
• A dev server that lints for common errors.
• Import CSS and image files directly from JavaScript.
• Autoprefixed CSS, so you don’t need -webkit or other prefixes.
• A build script to bundle JS, CSS, and images for production, with sourcemaps.
• An offline-first service worker and a web app manifest, meeting all the Progressive Web App criteria.

The feature set is intentionally limited. It doesn’t support advanced features such as server rendering or CSS modules. The tool is also non-configurable because it is hard to provide a cohesive experience and easy updates across a set of tools when the user can tweak anything.

Limitations

Some features are currently not supported:

• Server rendering.
• Some experimental syntax extensions (e.g. decorators).
• CSS Modules.
• Importing LESS or Sass directly (but you still can use them).
• Hot reloading of components.

Some of them might get added in the future if they are stable, are useful to majority of React apps, don’t conflict with existing tools, and don’t introduce additional configuration.

What’s Inside?

The tools used by Create React App are subject to change. Currently it is a thin layer on top of many amazing community projects, such as:

• webpack with webpack-dev-server, html-webpack-plugin and style-loader
• Babel with ES6 and extensions used by Facebook (JSX, object spread, class properties)
• Autoprefixer
• ESLint
• Jest
• and others.

Instalando

npm install -g create-react-app

create-react-app my-app
cd my-app/
npm start

Estructura basica

 my-app
 ├── README.md
 ├── node_modules
 ├── package.json
 ├── .gitignore
 ├── public
 │   └── favicon.ico
 │   └── index.html
 │   └── manifest.json
 └── src
     └── App.css
     └── App.js
     └── App.test.js
     └── index.css
     └── index.js
     └── logo.svg
     └── registerServiceWorker.js

Version de javascript y magias varias soportadas

CRA Soporta ES6 con los siguientes agregados:

• Exponentiation Operator (ES2016).
• Async/await (ES2017).
• Object Rest/Spread Properties (stage 3 proposal).
• Dynamic import() (stage 3 proposal)
• Class Fields and Static Properties (stage 2 proposal).
• JSX and Flow syntax.

CSS, LESS, SASS? Agregando un preprocesador de CSS

Por defecto lo unico que hace con el css es pasarlo por Autoprefixer

SASS

npm install --save node-sass-chokidar

Then in package.json, add the following lines to scripts:

  "scripts": {
+    "build-css": "node-sass-chokidar src/ -o src/",
+    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test --env=jsdom",

Now you can rename src/App.css to src/App.scss and run npm run watch-css. The watcher will find every Sass file in src subdirectories, and create a corresponding CSS file next to it, in our case overwriting src/App.css. Since src/App.js still imports src/App.css, the styles become a part of your application. You can now edit src/App.scss, and src/App.css will be regenerated. To share variables between Sass files, you can use Sass imports. For example, src/App.scss and other component style files could include @import "./shared.scss"; with variable definitions.

To enable importing files without using relative paths, you can add the --include-path option to the command in package.json.

"build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
"watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/ --watch --recursive",

At this point you might want to remove all CSS files from the source control, and add src/**/*.css to your .gitignore file. It is generally a good practice to keep the build products outside of the source control.

As a final step, you may find it convenient to run watch-css automatically with npm start, and run build-css as a part of npm run build. You can use the && operator to execute two scripts sequentially. However, there is no cross-platform way to run two scripts in parallel, so we will install a package for this:

npm install --save npm-run-all

Then we can change start and build scripts to include the CSS preprocessor commands:

  "scripts": {
    "build-css": "node-sass-chokidar src/ -o src/",
    "watch-css": "npm run build-css && node-sass-chokidar src/ -o src/ --watch --recursive",
-    "start": "react-scripts start",
-    "build": "react-scripts build",
+    "start-js": "react-scripts start",
+    "start": "npm-run-all -p watch-css start-js",
+    "build": "npm run build-css && react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject"
  }

Now running npm start and npm run build also builds Sass files.