ReactJS is known for its extremely fast navigation in project or website pages.
How to setup ReactJS project:
- Download NodeJS as mentioned here: https://nodejs.org/en/ and Install it.
- 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.
- Install npm globally CLI using command (either in editor like ‘Atom’ or ‘Node.js command prompt’:
npm install -g create-react-app - Create a project folder and open its path in CLI usind ‘cd’ command.
- Then create React project in it with command: create-react-app project-name (don’t use capital letters in project name)
- Point to project folder in CLI using command ‘cd project-name’
- Now run the project to automatically open output in a browser window, using command: npm start
- 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
5) Call variable inside return() body:
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
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.