Create new samples between samples

We are going to use Chartjs to plot our samples (values over time) in a Line Chart but before we are going to double our samples. To create each new sample we take the date (x) of the next element and the value (y) of the previous one.

Google Maps clusterization

We are going to fetch flights data to create our makers. Do not set the map in each marker, the clusterization will set it up instead.

Navigation between pages/views

Using an array to keep track of where we came from. Try it, click the right top buttons to navigate and check the backward arrow, any time you go to the Main page the tracking will be reseted.

Create an universal React app

First of all read the whole post, secondly install Create React App globally and create an app using create-react-app my-app, then before any coding add packages to your app. As soon as you finish all package installations you can start coding using my basics code snippets if you need to 🙂

Add main React package to your enviroment

Create React App

npm i -g create-react-app

This will allow you to create React Apps with no build configuration anywhere in your computer.

create-react-app my-app

cd my-app/

npm start

This will create a React App called my-app pointing to http://localhost:3000/, any time you save your files your app will be updated automatically.

Link to the library.

Add packages to your React app

Within my-app folder.

Bootstrap

npm i -S bootstrap

npm i -S react-bootstrap

npm i -S react-router-bootstrap

This will allow us to use this front-end framework in a easier way (with React).

Links to the library.

For example lets code our home page (home.js)

import React from 'react';
import { Grid, Row, Col, Jumbotron, Image } from 'react-bootstrap';

import people from '../media/people.png';

function Home(props) {
  const t = props.t; // we will pass the translation function via props
  return (
    <div>
      <Grid>
        <Jumbotron>
          <h1>{t('Open knowledges')}</h1>
          <p>Cool text right here</p>
        </Jumbotron>
      </Grid>

      <Grid>
        <Row>
          <Col lg={12}>
            <p>I love paragraphs.</p>
            <p>I love paragraphs.</p>
          </Col>
        </Row>
        <Row>
          <Col lg={12}>
            <p>I love paragraphs.</p>
            <Image className="detached" src={people} responsive />
          </Col>
        </Row>
      </Grid>
    </div>
  );
}

export default Home;

Anything that you would use repeatedly in other pages of your website should be in a different file (component), such as the navigation bar and the footer. Create a layout component to organize your components all together (layout.js)

import React, { Component } from 'react';

import Navigation from '../components/Navigation';
import Footer from '../components/Footer';

class Layout extends Component {
  render() {
    return (
      <div>
        <Navigation t={this.props.t}></Navigation>
        {this.props.children}
        <Footer></Footer>
      </div>
    );
  }
}

export default Layout;

React Router

npm i -S react-router

npm i -S react-router-dom

This will make our website’s routing easier.

Link to the library.

Let’s create our website/app (index.js) with two pages, for example Home (home.js) and About (about.js)

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom';

import './index.css';
import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap/dist/css/bootstrap-theme.css';

import Layout from './pages/Layout';
import Home from './pages/Home';
import About from './pages/About';
import i18n from './i18n';

let t = i18n.t.bind(i18n); // for translations

ReactDOM.render(
  <BrowserRouter>
    <div>
      <Route exact path="/" render={() => <Layout t={t}><Home t={t} /></Layout>} />
      <Route exact path="/about" render={() => <Layout t={t}><About t={t} /></Layout>} />
    </div>
  </BrowserRouter>,
  document.getElementById('root')
);

Add i18next package

npm i -S i18next

This will let us do our website/app internationalization.

Link to the library.

import i18n from 'i18next';

i18n
  .init({
    fallbackLng: 'en',
    lng: navigator.language.split('-')[0],
    debug: true,
    resources: {
      en: {
        translation: {
          "Hello": "Hola",
          "Bye": "Adiós"
        }
      }
    }
  });

export default i18n;

Futher details using i18n in this post: Create a multilingual React website.

How your files structure would look like?

.
+-- _components
|   +-- Footer.css
|   +-- Footer.js
|   +-- Navigation.css
|   +-- Navigation.js
+-- _media
|   +-- logo.svg
+-- _pages
|   +-- Layout.js
|   +-- Home.js
|   +-- About.js
+-- i18n.js
+-- index.css
+-- index.js

 

Create a multilingual React website

First of all create a react app ready to go

create-react-app MY-WEBSITE

This will create a react app with everything configured.

npm start

Add i18next package

npm i -S i18next

This will let us do our website/app internationalization.

Set up your I18next file

Create a i18n.js file in the src folder with this code:

import i18n from 'i18next';

i18n
  .init({
    fallbackLng: 'en',
    lng: navigator.language.split('-')[0],
    debug: true,
    resources: {
      en: {
        translation: {
          "Hola": "Hello",
          "Adiós": "Bye"
        }
      }
    }
  });

export default i18n;

Finally, indicate which text you want to translate

Import your i18n.js and use its t function to indicate where it should be the internationalization.

import React, { Component } from 'react';
import logo from './logo.svg';
import i18n from './i18n';
import './App.css';

let t = i18n.t.bind(i18n);

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>{t("Hola")}</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;