React.js


React official blog

https://facebook.github.io/react/blog/


React Lifecycle Methods diagram

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/


Generate new react project

# npm install -g npx
$ npx create-react-app myapp

// If typescript support is needed
$ npx create-react-app myapp --typescript


Override default port for react app

"start": "PORT=8080 react-scripts start",


Themes library

  • Material UI - https://material-ui.com/
  • Semantic UI React - https://react.semantic-ui.com/
  • React + Foundation
  • React Bootstrap
  • Ant Design - ant.design


React.js environment for development

React.js environment for development

Create simple react project manually

React.js testing

React.js Material UI

React.js And Bootstrap

Sass styles in create-react-app

Server Side Rendering

Spinners for react apps

Higher order components explained (HOC)

Redux


Hooks (Since react 16)

UseState

UseEffect

useReducer

Custom hook example

React context

\


Possible SPA routing script

const express = require('express');
const path = require('path');

const server = express();

server.use(express.static('public'));

server.get('*', (req, res) => {
  fs.readFile(`${__dirname}/dist/index.html`, (err, html) => {
    if (error) throw error;

    res.setHeader('Content-Type', 'text/html');
    res.end(html);
  });
});

server.listen('8080', () => {
  console.log('Express listening on port 8080');
});


But for production i recommend to use nginx.
Ask me in the chat if interesting.