React Template

Install

git clone https://github.com/Aventura-Tech/React_Template.git

npm install

Create .env files and write this. For the moment is not required a value for this

API_BASE_URL=

npm start

username: admin
password: 123456

Structure

|- .vscode
|- build-utils
|   |- webpack.development.js
|   |- webpack.production.js
|- config
|   |- App.js
|   |- Config.style.js
|   |- setupTests.js
|- src
|   |- App
|   |   |- index.jsx
|   |   |- Register.js
|   |   |- Route.jsx
|   |- Assets
|   |   |- img
|   |   |- fonts
|   |- Components
|   |   |- Loading
|   |   |   |- index.jsx
|   |   |   |- Loading.style.js
|   |   |- Layout
|   |   |   |- index.jsx
|   |   |   |- Layout.style.js
|   |- Pages
|   |   |- Session
|   |   |   |- index.jsx
|   |   |   |- Model
|   |   |   |   |- index.js
|   |   |   |   |- listen.js
|   |   |   |   |- init.js
|   |   |   |   |- fail.js
|   |   |   |- Session.style.js
|   |   |- Home
|   |   |   |- index.jsx
|   |   |   |- Model
|   |   |   |   |- index.js
|   |   |   |   |- listen.js
|   |   |   |   |- init.js
|   |   |   |   |- fail.js
|   |   |   |- Home.style.js
|- test
|   |- Components
|   |   |- Loading.test.jsx
|   |- Pages
|   |   |- Home.test.js
|- .env
|- webpack.config.js
|- .babelrc
|- .htaccess

Scripts

command	description
`npm start`	Open server in port 8080
`npm run build`	Build project mode production in `/public`
`npm run watch`	Build project mode development in `/public` and recompile whenever they change
`npm run lint`	Linter Standard
`npm run test`	Run testing for directory `/test`
`npm run test:watch`	Run testing for directory `/test` and watching the changes

Configure Build

You can see the directory /build-utils. For develop and production

|- build-utils
|   |- webpack.development.js
|   |- webpack.production.js

Route

In /src/App/Route.jsx you can to configure the rutes private and public

/**
 * Public Routes, only visible when there is no session
 */
const Public = () => {
  return (
    <Router>
      <Session path='/' />
    </Router>
  )
}

/**
 * Private Routes, only visible when there a session
 */
const Private = () => {
  return (
    <Router>
      <Home path='/' />
    </Router>
  )
}

Is recommendable use lazy for import yours pages.

const Home = lazy(() => import('../Pages/Home'))
const Session = lazy(() => import('../pages/Session'))

Register Model

In /src/App/Register.js you can register yours models for each Pages

|- Pages
|   |- Session
|   |   |- index.jsx
|   |   |- Model
|   |   |   |- index.js
|   |   |   |- listen.js
|   |   |   |- init.js
|   |   |   |- fail.js
|   |   |- Session.style.js
|   |- Home
|   |   |- index.jsx
|   |   |- Model
|   |   |   |- index.js
|   |   |   |- listen.js
|   |   |   |- init.js
|   |   |   |- fail.js
|   |   |- Home.style.js

import Redity from 'redity'
import Session from '../Pages/Session/Model'
import Home from '../Pages/Home/Model'
// Register your models
Redity.register('session', Session)
Redity.register('home', Home)

export default Redity

Configuration

Configuration Globals of the App. You can to create more configurations and styles too.

|- config
|   |- App.js
|   |- Config.style.js

Session

Configure Session connecting to any API

|- Pages
|   |- Session
|   |   |- index.jsx
|   |   |- Model
|   |   |   |- index.js
|   |   |   |- listen.js
|   |   |   |- init.js
|   |   |   |- fail.js
|   |   |- Session.style.js

response

access_token: "token"
created_at: 1578892347
expire_in: 1578902346

payload

{
  username: 'string',
  passoword: 'string'
}

Session/Model/listen.js

const res = await API.post('/login', payload)
const expireIn = res.data.result.expire_in - res.data.result.created_at // Time Total for expire (s)
const access_token = res.data.access_token

Don't forget API_BASE_URL of .env

API_BASE_URL=http://MyAPi.com/api

Testing

Testing for the pages and components

|- test
|   |- Components
|   |   |- Loading.test.jsx
|   |- Pages
|   |   |- Home.test.js

Don't forget import Register for your testing pages.

import React from 'react'
import { create } from 'react-test-renderer'
import '../../src/App/Register' // this
import Home from '../../src/Pages/Home'

describe('Home', () => {
  it('First Test', () => {
    const root = create(<Home />).root
    const h1 = root.findByType('h1')
    const p = root.findByType('p')
    expect(h1.children[0]).toBe('Welcome')
    expect(p.children[0]).toBe('Template vs. 1.0.0')
  })
})

Extensions for VSCode recommended

Jest
Prettier
EsLint
vscode-styled-components

ertrii / test_api_front