Lino React Developer Guide¶
Quick start¶
First you need to install a Lino contributor environment as described in the Developer Guide.
Then here we go:
$ sudo apt install nodejs npm
$ npm install
$ go react
$ mkdir -p lino_react/react/static/media
$ npm run build
Now let’s do a local change and test it.
TODO
Introduction to NodeJS, npx, npm and React¶
https://www.freecodecamp.org/news/what-is-npm-a-node-package-manager-tutorial-for-beginners/
https://www.freecodecamp.org/news/npm-vs-npx-whats-the-difference/
npm is an open-source software package manager originally developed for JavaScript packages to be run with Node.js, but also used for other packages. It is an interface to the npm repository. It allows JavaScript developers to share packages quickly and easily.
npx is the node package runner
How to see which version you have:
$ npm -v
6.14.8
$ node -v
v8.10.0
How to get the latest Node.js version using the n package:
$ sudo npm install -g n
$ sudo n stable
installing : node-v14.15.1
mkdir : /usr/local/n/versions/node/14.15.1
fetch : https://nodejs.org/dist/v14.15.1/node-v14.15.1-linux-x64.tar.xz
installed : v14.15.1 (with npm 6.14.8)
It is an npm package, but it isn’t¶
The React front end for Lino repository is an npm package (because it has an
package.json
), but we don’t publish it on npm. That’s not needed
because everything needed to run a Lino site with the React front end is made
available as Django static files inside the lino-react Python package. The whole source code
is published on github. You need npm and node only for developing Lino React,
not for using it.
Creating your own packages¶
npm packages must contain at least a file named package.json
that must
exist in their top-level directory. This file is usually generated by npm
init
and later edited manually.
But there is a tool that creates a package with a working react app:
$ npx create-react-app myapp
Lino React files reference¶
-
package.json
¶ The npm package description for lino_react.
The
package.json
for lino_react mainly defines a few “scripts” (i.e. commands):"scripts": { "debug": "webpack --mode none ./lino_react/react/index.js --output ./lino_react/react/static/react/main.js", "dev": "webpack --mode development ./lino_react/react/index.js --output ./lino_react/react/static/react/main.js", "build": "webpack --mode production ./lino_react/react/index.js --output ./lino_react/react/static/react/main.js", "build_css": "node_modules/node-sass-chokidar/bin/node-sass-chokidar ./lino_react/react/components/layout -o ./lino_react/react/components/layout", },
The commands
debug
,dev
andbuild
create themain.js
file. They are very similar, their only difference is the –mode option, which tells webpack to use its built-in optimizations accordingly.webpack is a tool that bundles all the “assets” into a set of deployable files (.js, .css etc). We use it to compile the
index.js
file into themain.js
file.Our
build_css
script compiles scss files to css files. We need to run it only after changing one of our scss files which are located inlino_react/react/components/layout
.build_css
runs node-sass-chokidar, which is a “thin wrapper around node-sass executable to use chokidar instead of Gaze when watching files.” Node-sass is “a library that provides binding for Node.js to LibSass, the C version of the popular stylesheet preprocessor, Sass. It allows you to natively compile .scss files to css at incredible speed and automatically via a connect middleware.”
-
webpack.config.js
¶ Our configuration file for webpack. TODO: what does it do?
-
lino_react/react/index.js
¶ Contains a single line of code:
import App from "./components/App";
-
main.js
¶ This file is in
lino_react/react/static/react/
where thecollectstatic
on a Lino site will find it.It contains a lot of generated and compressed JS code.
It is quite big and therefore causes webpack to issue a warning:
WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB). This can impact web performance. Assets: main.js (1.24 MiB)
-
package-lock.json
¶ TODO
-
node_modules/
¶ TODO