Tag Archive for: i18next

Create an universal React app

/in , , , /by

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

/in , , /by

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;