[React] How to create web application

- February 01, 2020

This blog is going to tell you how to create the web application using React.js

1. Go to react website to get first tutorial
https://reactjs.org/tutorial/tutorial.html

- Make sure you have a recent version of Node.js installed.

- Follow the installation instructions for Create React App to make a new project.

Install NodeJS

Node >= 8.10 (v13.5.0) and npm >= 5.6 (6.13.4) on your machine. To create a project, run:

npx create-react-app my-app

cd my-app

npm start

This will let you go to url : http://localhost:3000/

2. Install YARN

> npm install -g yarn

2. Add bootstrap

go to react https://reactstrap.github.io/

> npm install --save reactstrap react react-dom

> npm install --save bootstrap

> yarn add bootstrap reactstrap

4. Add AXIOS

> npm install axios --save

5. Add .env to root folder

Define key and value as needed e.g. PORT=3001

Alternative React

Next.js is a lightweight framework.

https://nextjs.org/docs

https://nextjs.org/learn/basics/getting-started

> npx create-next-app

> npm install --save next react react-dom

Add into package.json

{ "scripts": { "dev": "next", "build": "next build", "start": "next start" } }

To define port

"scripts": { "dev": "next dev -p 8080" },

> npm install --save reactstrap react react-dom

> npm install --save bootstrap

> npm install --save @zeit/next-css

> npm install axios --save

> npm i --save @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/react-fontawesome

Create a next.config.js

/// next.config.js

const withCSS = require('@zeit/next-css')

module.exports = withCSS({
  cssLoaderOptions: {
    url: false
  }
})

add bootstrap.min.css into xxx.js
import 'bootstrap/dist/css/bootstrap.min.css';

> yarn dev

or > next dev -p 3001

Note

1. To upgrade to latest version
> npm i next@latest react@latest react-dom@latest

2. To check version. See in package.json

3. To work on .env

install .env

> npm install dotenv
//or

> yarn add dotenv

and then update next.config.json as in the link

https://dev.to/tesh254/environment-variables-from-env-file-in-nextjs-570b

Create API using node loopback

>npx express-generator api

>cd api

>npm install

>npm start

1. If you change something, it needs to restart the server.

However, if you need it to keep refreshing, you might have to install nodemon

You can also install nodemon as a development dependency:
npm install --save-dev nodemon

2. Install MySQL

rpm -Uvh https://repo.mysql.com/mysql80-community-release-el7-3.noarch.rpm
sed -i 's/enabled=1/enabled=0/' /etc/yum.repos.d/mysql-community.repo
yum --enablerepo=mysql80-community install mysql-community-server
service mysqld start

http://www.mysqltutorial.org/install-mysql-centos/

2. Connect Database

$ npm install mysql

3. Using loopback ( an Express-based framework that is centered around models)

https://loopback.io/doc/en/lb4/Getting-started.html#create-a-new-project

>lb4 api (create project api)

>cd api

>lb4 datasource (create database connection)

>lb4 model (create model that relate with the table in database e.g. user)

>lb4 repository (create repository for service interface)

>lb4 controller (create CRUD for user)