The website is created for a HTML5 Test of Integrify programme. The question can be found here This is the second version with some integration of React library.

Deploy on Heroku

Here are some lines of example code:

1. index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css'
import App from './App'
import 'font-awesome/css/font-awesome.min.css';


ReactDOM.render(
  <App />,
  document.getElementById('root')
);

2. app.js:

import React, { Component } from 'react';
import './App.css';
import Header from './components/header.js';
import Container from './components/container.js';

class App extends Component {
  constructor(){
    super();
    this.state = {
      partitions: []
    }
  }

  getPartitions(){
    this.setState(
      {
        partitions: [
          {
            id: 1,
            name: 'John Doe',
            email: '[email protected]',
            phone: '(358)405-334433'
          },
          {
            id: 2,
            name: 'Victoria	Lamb',
            email: '[email protected]',
            phone: '(441) 563-5846'
          },
          {
            id: 3,
            name: 'Tabitha Munoz',
            email: '[email protected]',
            phone: '(868) 336-8660'
          },
          {
            id: 4,
            name: 'Jerry Harmon',
            email: '[email protected]',
            phone: '(211) 354-2944'
          },
          {
            id: 5,
            name: 'Clara Strickland',
            email: '[email protected]',
            phone: '(116) 374-7839'
          },
          {
            id: 6,
            name: 'Krista	Rodriquez',
            email: '[email protected]',
            phone: '(363) 562-6479'
          },
          {
            id: 7,
            name: 'Dorothy Parks',
            email: '[email protected]',
            phone: '(287) 376-7908'
          },
 ...

• You need to have a code editor like Atom or Sublime
• You have lasest version of Node
• You need to install Create-React-App for build environment, please follow this guideline
• Install Font-Awesome: npm install font-awesome and import into your component: import 'font-awesome/css/font-awesome.min.css'

• Clone this project (Using gitcommand: https://github.com/vietdang7/html5-test-react.git or through your GitDesktop application)
• Copy and overwrite all folders and files to you application (which is created at create-react-app steps)

1. In your application folder, run npm start
2. Open project folder in your code editor for editing

I am following this guideline

• In your application folder, run

  git init
  heroku create $APP_NAME --buildpack https://github.com/mars/create-react-app-buildpack.git
  git add .
  git commit -m "Start with create-react-app"
  git push heroku master
  heroku open

$APP_NAME is the name of your application.

• HTML5
• CSS3
• Javascript
• jQuery
• CSS Reset from Meyerweb.com
• React

There are unfinised parts in this project due to my limited skills. This should be a fully functional React App.

• Use Create React App to scaffold your application...COMPLETED

• Generate 20 participants that contain randomized values for the following properties: id, name, email address, and phone number...COMPLETED

• Render a table that displays the participants on individual rows... COMPLETED

• Create a form for adding new participants to the table (remember to validate the form) ...NOT COMPLETED

• Make each participant editable by clicking on a table cell (inline editing) NOT COMPLETED

• Add support for deleting rows... NOT COMPLETED

• Make each column sortable upon clicking on a column header ... NOT COMPLETED

• Write a developer-friendly installation guide... COMPLETED

• Deploy a live build on the internet... COMPLETED

• Follow the design as accurately as possible (sizes and colors)... COMPLETED

If you want to make contribution for this project, feel free to fork this project and make pull request

• Copyright of HTML5 Test is belong to Digiaonline.
• This project is licensed under the MIT license