Learn ReactJS

ReactJS is known for its extremely fast navigation in project or website pages.

How to setup ReactJS project:

1. Download NodeJS as mentioned here: https://nodejs.org/en/ and Install it.
2. After installation, search and Open ‘Node.js command prompt’ in computer and run command ‘node -v’ to check version of installed Nodejs. You can also use ‘Atom‘ IDE to run commands.
3. Install npm globally CLI using command (either in editor like ‘Atom’ or ‘Node.js command prompt’:
   npm install -g create-react-app
4. Create a project folder and open its path in CLI usind ‘cd’ command.
5. Then create React project in it with command: create-react-app project-name (don’t use capital letters in project name)
6. Point to project folder in CLI using command ‘cd project-name’
7. Now run the project to automatically open output in a browser window, using command: npm start
8. Project output can be further edited in file ‘App.js’ present in src folder, in project folder: src/App.js

How to upload file in ReactJS using PHP API

https://www.youtube.com/watch?v=yTGXNvHQ4BQ

How to setup pagination in Reactjs table

1) Install react-paginate

npm install react-paginate

2) Import react-paginate

import ReactPaginate from 'react-paginate'

3) Set users per page, and other required variables

const[pageNumber, setPageNumber] = useState(0)

const usersPerPage = 5
const pageVisited = pageNumber * usersPerPage

4) Create a variable to map actual data coming from database, etc. and use .slice with it for pagination
<br /><br /> const displayUsers = users<br /><br /> .slice(pageVisited, pageVisited + usersPerPage)<br /><br /> .map((user, key) =></p><br /> <tr key={key}><br /> <td>{user.id}</td><br /> <td>{user.username}</td><br /> <td>{user.email}</td><br /> </tr><br /> <p> )<br /><br />

5) Call variable inside return() body:
</p><br /> <tbody><br /> {displayUsers}<br /><br /> </tbody><br /> <p>

6) Create variables to count total pages to be created and for selected page’s number

const pageCount = Math.ceil(users.length / usersPerPage)
const changePage = ({selected}) => {
	setPageNumber(selected)
}

7) Create ReactPaginate code as below for actual mapped data called to make pagination below it
</p><br /> <tbody><br /> {displayUsers}<br /><br /> <ReactPaginate previousLabel={“Previous”} nextLabel={“Next”} pageCount={pageCount} onPageChange={changePage} containerClassName={“paginationButtons”} previousLinkClassName={“privousButton”} nextLinkClassName={“nextButton”} disabledClassName={“paginationDisabled”} activeClassName={“paginationActive”} /><br /><br /> </tbody><br /> <p>

8) Do CSS to make buttons look:
.paginationButtons {
width:80%;
height:40px;
list-style:none;
display:flex;
justify-content:center;
}

.paginationButtons a {
padding: 10px;
margin: 8px;
border-radius: 5px;
border: 1px solid #2b2eff;
color: #2b2eff;
cursor: pointer;
}

.paginationButtons a:hover {
color: white;
background-color: #2b2eff;
}

.paginationActive a {
color:white;
background-color: #2b2eff;
}

Move ReactJS project to online hosting (Cpanel and MySql Database):

• Go to package.json file, below “name” line ends, add code:

“homepage”: “https://yourwebsitename.com”,

• Inside your ‘public’ folder, create .htaccess file and add this code:

<IfModule mod_rewrite.c>RewriteEngine On
RewriteBase /
RewriteRule ^index\.html$ – [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /index.html [L]</IfModule>

This assumes that index.html is in ‘public’ folder, if index.html is in another folder, then change rewrite rule to ./anotherfolder/index.html

• For database connectivity, there is need to create online database, compress restapi files folder containing database files, upload and extract in cpanel. Correct online database name, username and password in database file.
• Correct axios path inside project files from ‘http://localhost’ path to your website name.
• Run command:

npm run build

It will create ‘build’ folder inside project. Create zip of this folder, upload it in cpanel and extract this build folder inside your website folder in cpanel.

Here is a demo project running ReactJS CRUD operations: https://management.ziscom.in/users/listusers

Project to setup basic chat using Reactjs and Golang: https://github.com/Inderjeetdev/-realtime-chat-go-react

You can contact us, regarding a ReactJS project.