Create an Ethereum Dapp with React and Docker

3. Client (React Application)

For the react application, we’re using create-react-app tool for the Dapp.

Create React App is a tool (built by developers at Facebook) that gives you a massive head start when building React apps. It saves you from time-consuming setup and configuration. — 

treehouse

Installing Create React App

We need to install the create-react-appglobally. Open your Terminal or console and run:

npm install -g create-react-app

From the project directory, open the terminal or console to create the react app by name client and run the below command.

create-react-app client

Directory Structure

client 
- public
- favicon.ico
- index.html
- manifest.json
- src
- App.css
- App.js
- App.test.js
- index.css
- index.js
- logo.svg
- message.js
- serviceWorker.js
- .dockerignore
- Dockerfile
- package-lock.json
- package.json
- README.md

Once the client is created you will see a folder structure like above except message.js inside the src ,Dockerfile and .dockerignore.

For more information on react please follow the below links:

index.html

Open index.html from the public folder and change the title to Message App . Add the below link in the tag. This is the fonts which are used in the application.

App.css

Open the App.css from the src folder and paste the below css which is used in the application.

/*
Styles from this codepen:
https://codepen.io/official_naveen/pen/rgknI
*/
body {
width: 800px;
margin: 0 auto;
font-family: 'Open Sans', sans-serif;
}
.container {
width: 600px;
margin: 0 auto;
}
fieldset {
display: block;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-before: 0em;
-webkit-padding-start: 0em;
-webkit-padding-end: 0em;
-webkit-padding-after: 0em;
border: 0px;
border-image-source: initial;
border-image-slice: initial;
border-image-width: initial;
border-image-outset: initial;
border-image-repeat: initial;
min-width: -webkit-min-content;
padding: 30px;
}
.ghost-input, p {
display: block;
font-weight:300;
width: 100%;
font-size: 25px;
border:0px;
outline: none;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
color: #4b545f;
background: #fff;
font-family: Open Sans,Verdana;
padding: 10px 15px;
margin: 30px 0px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.ghost-input:focus {
border-bottom:1px solid #ddd;
}
.ghost-button {
background-color: transparent;
border:2px solid #ddd;
padding:10px 30px;
width: 100%;
min-width: 350px;
-webkit-transition: all 0.1s ease-in-out;
-moz-transition: all 0.1s ease-in-out;
-ms-transition: all 0.1s ease-in-out;
-o-transition: all 0.1s ease-in-out;
transition: all 0.1s ease-in-out;
}
.ghost-button:hover {
border:2px solid #515151;
}
p {
color: #E64A19;
}

message.js

Create a message.js in the src folder and paste the below code. This is the file which will work as the front-end of the application.

Note: I am not good at React so I can just give details of methods which are used in it.

message.js

A component is the building block of any react app. To create a component it requires Component module from reactthe library. The endpoint is set to http://localhost:4000 as the server is running at 4000 port.

To make any request to the server axios library is used. To learn more about it follow this link.

Open the terminal from the client directory and run the below command:

npm install axios --save

We have created a Message component by extending the Component and at the bottom exported the Message .

There are 2 states in the Message component message and output .

States are the data which defines and control the behaviour of the component. Learn more about states in this link.

The messagestate will store the message entered in the form and this state will use as an argument to send the POST request to localhost:4000/ to setMessage.

The output state will store the response from the server and display it.

Following methods are used in message.js :

  • onChange set the message state according to the entered input
  • onsubmitcompile send the request to localhost:4000/compile to compile the smart contract
  • onsubmitdeploy send the request to localhost:4000/deploy to deploy the smart contract
  • onsubmitsetmsg send the request to localhost:4000/ with message state as an argument to set the message to the smart contract
  • onsubmitgetmsg send the request to localhost:4000/ to get the message from the smart contract

App.js

Open the App.js from src folder and paste the below code. The application’s Route set at / . On this route, it will serve the message.js component.

To create the route react-router-dom library is used.

Open the terminal from client directory and run the below command:

npm install react-router-dom --save

Dockerfile

With this Dockerfile our client module will complete.

In this Dockerfile we will write the instruction to create the image of the react application.

Create a Dockerfile in the client directory and paste the below code.

Dockerfile

All the commands are self-explanatory. According to this Dockerfile, a docker image will build. The client (react-app) will run inside the container using this image.

The COPY command is copying the node_modules too. Create a .dockerignore .

.dockerignore

Create a .dockerignore file in the client directory and paste the below code.

node_modules/

Our client module is also finished.

read original article here