UFC — The Ultimate Frontend Catch Up (2)

Preliminary Card

VanillaJS x ReactJS

In this challenge I will try to implement a simple datatable mentioned by Jose Aguinaga in his hillarious article. The app consists in fetch GitHub’s API users first page and show them in a datatable. No CSS, SCSS code, only JS and HTML.

I’ll need a web server to run and test my app, so I will use NodeJS as my “Hexagon”.

Round 1

The NodeJS HTTP server for the VanillaJS app was pretty simple and fast to create.

After that, I just created the index.js and index.html files and was ready to code.

A nice high kick from VanillaJS, but not so powerful.

Concepts involved in the VanillaJS development environment and coding:

To create the ReactJS project and start coding I had two options: clone a ReactJs starter project or configure one. I’ve chosen to configure one and understand the concepts behind it. Some concepts and libraries involved here are:

OMG! lots of npm packages to install and configurations to make, just to start coding. Imagine ReactJS Environment, in this simple example, as this capoeira fighter:

KO!


tl;dr

Below, I will show how to implement the ReactJS app just to show my line of thinking. It is not a best practice or a great tutorial, just my step by step path to understanding the ReactJS world. You can find the project on my github page: https://github.com/fabriciomendonca/ufc-2-reactjs

Install React npm packages

npm install --save react react-dom

Install Webpack npm packages

npm install --save-dev webpack webpack-dev-server

Install Babel npm packages

npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react

Install Axios npm package

npm install --save axios

Create directory structure

/src
/components
main.js
/dist
index.html

index.html content

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Simple datatable</title>
</head>
<body>
<div id="root"></div>
<script src="bundle.js"></script>
</body>
</html>

Configure npm script to start webpack-dev-server

package.json
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server"
}
...

Configure webpack

Configure Babel

// .babelrc
{
"presets": [
"react",
"es2015"
]
}

Create the App component

// src/components/app.jsx
import React from 'react';
export default class App extends React.Component {
render() {
return(
<div>
<h1>Simple datatable app</h1>
</div>
);
}
}

Render the app in main.js file

// src/main.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/app';
const elm = <App />;
ReactDOM.render(elm, document.getElementById('root'));

Import axios library into App component

// src/components/app.jsx
import React from 'react';
import axios from 'axios';
//...

Initialize App component state inside the constructor method

// src/components/app.jsx
//...
export default class App extends React.Component {
contructor(props){
super(props);
this.state = {};
}
// ...
}

Call the GitHub API

// src/components/app.jsx
//...
componentDidMount(){
const URL = 'https://api.github.com/users';
  axios.get(URL).then(response => {
this.setState({
users: response.data
});
});
}
//...

Create the method that will return the data table

// src/components/app.jsx
//...
renderList(){
return (
<table>
<thead>
<tr>
<th></th>
<th>User</th>
<th>URL</th>
</tr>
</thead>
<tbody>
{this.state.users.map((user) => {
return (
<tr key={user.id}>
<td>{user.avar_url}</td>
<td>{user.login}</td>
<td><a href={user.url} target="_blank">GitHub</a></td>
</tr>
)
})}
</tbody>
</table>
);
}
// ...

Conditional rendering

// src/components/app.jsx
// ...
render() {
const list = this.state.users ? this.renderList() : <div>Loading users...</div>;
  return (
<div>
<h1>Simple data table app</h1>
{list}
</div>
);
}
// ...

I know… I know… this is very simple and there are many other concepts and libraries to study, learn and a lot of fights to come. See you soon :D

Thanks for reading!

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.