How to setup a react project

1. Create a react project with create react appcreating a new application or from scratch creating from scratch

Decide whether or not you want to use SSR or CSR SSR or CSR

terminal

npm install -g create-react-app create-react-app my-app cd my-app npm i npm start

2. Install the most important dependencies :

• • Redux (store) Redux example

terminal

npm install –save redux react-redux

index.js

import { createStore } from ‘redux’ import reducers from ‘./redux/reducers’ const store = createStore(reducers) render( <Provider store={store}><br /> <App /><br /> </Provider>,<br /> document.getElementById(‘root’) )

redux/reducers.js

import { combineReducers } from ‘redux’ import users from ‘./users/users.reducers’ export default combineReducers({ users })

• • Redux promise middleware (redux helper)

terminal

npm install –save redux-promise-middleware

index.js

import { createStore, applyMiddleware } from ‘redux’ import reducers from ‘./redux/reducers’ import promiseMiddleware from ‘redux-promise-middleware’ const store = createStore(reducers, applyMiddleware( promiseMiddleware() )) render( <Provider store={store}><br /> <App /><br /> </Provider>,<br /> document.getElementById(‘root’) )

And add the actions, reducers and services for a specific reducer + an env.production.js/env.development.js file
users.service

users.types

users.reducers

users.actions

Try to normalize the store when :
– duplicate data in the store
– nested objects that have to be adapted separately without updating the whole object

• • React-router (router) react-router docs

terminal

npm install –save react-router-dom

index.js

… import { BrowserRouter as Router, Route } from ‘react-router-dom’ const store = createStore(reducers, applyMiddleware( promiseMiddleware(), logger )) ReactDOM.render( <Provider store={store}><br /> <I18nextProvider i18n={i18n}><br /> <Router><br /> <Route path=’/’ component={App} /><br /> </Router><br /> </I18nextProvider><br /> </Provider><br /> , document.getElementById(‘root’)) registerServiceWorker()

• • I18next (Language library) Best language libraries

terminal

npm install –save i18next react-i18next i18next-browser-languagedetector

en.js

export default { home_title: ‘Home page’ }

/utils/i18n.js

import i18n from ‘i18next’; import LanguageDetector from ‘i18next-browser-languagedetector’; import nl from ‘../languages/nl import en from ‘../languages/en i18n .use(LanguageDetector) .init({ // we init with resources resources: { en: {translations: en}, nl: {translations: nl} }, fallbackLng: ‘en’, debug: true, // have a common namespace used around the full app ns: [‘translations’], defaultNS: ‘translations’, keySeparator: false, // we use content as keys interpolation: { escapeValue: false, // not needed for react!! formatSeparator: ‘,’ }, react: { wait: true } }); export default i18n;

app.js or index.js

import React from ‘react’; import ReactDOM from ‘react-dom’; import { BrowserRouter } from ‘react-router-dom’; import { I18nextProvider } from ‘react-i18next’; import i18n from ‘../utils/i18n’; import App from ‘./App’; ReactDOM.render( <I18nextProvider i18n={i18n}><br /> <App /><br /> </I18nextProvider>,<br /> document.getElementById(‘root’) );

 

component.js

import React, {Component} from ‘react’; import PropTypes from ‘prop-types’; import { translate, Trans } from ‘react-i18next’; import logo from ‘./react.svg’; import ‘./Home.css’; class Home extends Component { render() { const { t, i18n } = this.props; const changeLanguage = (lng) => { i18n.changeLanguage(lng); }; return ( </p><br /> <div className=”Home”><p><br /> </p><br /> <div className=”Home-header”><p><br /> <img src={logo} className=”Home-logo” alt=”logo”/><br /> </p><br /> <h2>{t(‘Welcome to React.js’)}</h2><br /> <p><br /> <button onClick={() => changeLanguage(‘el’)}>el</button><br /> <button onClick={() => changeLanguage(‘en’)}>en</button></p> <p> </div><br /> <p><br /> </p><br /> <div className=”Home-container”><p><br /> </p><br /> <div className=”Home-items”><p><br /> </p><br /> <div className=”Home-item”><p><br /> </p><br /> <h3 className=”focus”><br /> {t(‘Declarative’)}<br /> </h3><br /> <p><br /> </p><br /> <div><br /> <p><br /> <Trans name={‘React.js’}><br /> React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.<br /> </Trans><br /> </p><br /> <p><br /> </p><br /> <p><Trans>Declarative views make your code more predictable and easier to debug.</Trans></p><br /> <p><br /> </div><br /> <p><br /> </div><br /> <p><br /> </div><br /> <p><br /> </div><br /> <p><br /> </div><br /> <p><br /> ); } } // extended main view with translate hoc export default translate(‘translations’)(Home);

• • Reselect (memoization selector)

terminal

npm install –save reselect

• JSS (css)

terminal

npm install –save styled-jss

index.js

import theme from ‘theme.js’ <ThemeProvider theme={theme}><br /> <Router><br /> <Route path=’/’ component={App} /><br /> </Router><br /> </ThemeProvider>

theme.js

export const theme = { colors: { WHITE: { light: ‘rgba(255,255,255, 1)’, medium: ‘rgba(255,255,255, 1)’, dark: ‘rgba(255,255,255, 1)’ }, BLACK: { light: ‘rgba(0,0,0, 1)’, medium: ‘rgba(0,0,0, 1)’, dark: ‘rgba(0,0,0, 1)’ }, GREY: { light: ‘lightgrey’, medium: ‘grey’, dark: ‘grey’ }, PRIMARY: { light: ‘#BB86FC’, medium: ‘#6200EE’, dark: ‘#3700B3’ } }, margins: { NONE: ‘0px’, SMALL: ’12px’, MEDIUM: ’24px’, LARGE: ’48px’ }, padding: { NONE: ‘0px’, SMALL: ‘6px’, MEDIUM: ’12px’, LARGE: ’24px’ } }

• Create absolute imports

.env

NODE_PATH=’src/’

If you installed flow, add following

.flowconfig

[options] module.system.node.resolve_dirname=node_modules module.system.node.resolve_dirname=src

3.Add dev-dependencies :

• • Jest (testing) Getting started in jest

terminal

npm install –save-dev jest babel-preset-react babel-preset-es2015

.babelrc

{“presets”: [“es2015”, “react”]}

.package.json

“scripts”: {“test”: “jest”,},

• • Standard (linter)

To let VS automatically check for standard errors, enable it in the settings.json

terminal

npm install –save-dev standard snazzy

package.json

“scripts” : { “lint”: “standard –fix | snazzy” } “standard”: { “ignore”: [ “node_modules” ], “globals”: [ “fetch” ], “env”: { “jest”: true, “node”: true } }

• • Redux logger (redux helper)

terminal

npm i –save-dev redux-logger

index.js

import { createStore, applyMiddleware } from ‘redux’ import reducers from ‘./redux/reducers’ import promiseMiddleware from ‘redux-promise-middleware’ import logger from ‘redux-logger’ const store = createStore(reducers, applyMiddleware( promiseMiddleware(), logger )) render( <Provider store={store}><br /> <App /><br /> </Provider>,<br /> document.getElementById(‘root’) )

• • Flow (static type checker)

To let VS automatically check for flow errors, install a flow extension (fe vscode flow ide) and enable it in the settings.json

package.json

“scripts”: { “flow” : flow }

a component.js file

//@flow

terminal (only install babel-eslint en eslint-plugin when using standardjs)

npm install –save-dev flow-bin

package.json (optional: only when using standardjs)

“standard”: { “parser”: “babel-eslint”, “plugins”: [ “flowtype” ], … }

terminal (optional: only install babel-eslint en eslint-plugin when using standardjs)

npm install –save-dev babel-eslint eslint-plugin-flowtype

4.Add project to a git :

See article Setting up githlab

5.Test the project with a free backend API

6. Add a visual studio code setting file

.vscode/settings.json

“javascript.validate.enable”: false, “standard.run”:”onType”, “standard.autoFixOnSave”: true, “flowide.enable”: true,