A very simple project of ReactJS is shown in this tutorial. Here, the authentication system is developed and feed entries are managed based on login user by using reactJS, mysql and PHP.

Steps:

1. Create a database named reactdb and create two tables named feed and users by executing following SQL statements

CREATE TABLE feed(
feed_id int PRIMARY KEY AUTO_INCREMENT,
feed text,
user_id int);

CREATE TABLE users(
user_id int AUTO_INCREMENT PRIMARY KEY,
username varchar(50),
password varchar(300),
name varchar(200),
email varchar(300));

2. Go to the htdocs folder from command prompt and run the following command to create a new reactjs app named react_feed.

create-react-app react_feed

3. Go to src folder of react_feed and create the following folders.

• src
  • styles
  • services
  • components
    • Home
    • Welcome
    • Header
    • Footer
    • Login
    • Signup
    • UserFeed
    • Sidebar
    • NotFound
    • MobileHeader

4. Download and create the following css files under styles folder.

custom.css
foundation.min.css
react-confirm-alert.css

5. Run the following command for routing

npm install react-router-dom

6. Run the following commands for confirm alert and linkify

npm install react-confirm-alert
npm install react-linkify

7. Create Header.css with the following code under Header folder.

.headcolor
{
background-color: Blue;
}
#tit{
color: white;
}

8. Create Header.js with the following code under Header folder.

import React, { Component } from 'react';
import './Header.css';
class Header extends Component {
render() {
return (
<div className="callout headcolor" id="Header">
<div className="row column">
<a href="/"><h1 id="tit">{this.props.name}</h1></a>
</div>
</div>
);
}
}
export default Header;

9. Create Footer.js with the following code under Footer folder.

import React, {Component} from 'react';
class Footer extends Component {
render() {
return (
<div className="row" id="footer">
<div className="medium-12 columns">
<p>Copyright 2019 , <a href="https://fahmidasclassroom.com"> fahmidasclassroom</a></p>
</div>
</div>
);
}
}
export default Footer;

10. Create MobileHeader.js with the following code under MobileHeader folder.

import React, {Component} from 'react';
class MobileHeader extends Component {
showSidebar(){
console.log("HI");
}
render() {
return (
<div className="title-bar hide-for-large">
<div className="title-bar-left">
<button className="menu-icon" type="button" data-open="my-info" onClick={this.showSidebar}></button>
<span className="title-bar-title">{this.props.name} </span>
</div>
</div>
);
}
}
export default MobileHeader;

11. Create Welcome.css with the following code under Welcome folder.

#welcomeText{
font-weight: bold;
font-size: 50px;
}

12. Create Welcome.js with the following code under Welcome folder.

import React, {Component} from 'react';
import './Welcome.css';
class Welcome extends Component {
render() {
return (
<div className="row " id="Body">
<div className="medium-12 columns">
<h2 id="welcomeText">PHP, MySQL and ReactJS Authentication App</h2>
<a href="/login" className="button">Login</a>
<a href="/signup" className="button success">Signup</a>
</div>
</div>
);
}
}
export default Welcome;

13. Create NotFound.js with the following code under NotFound folder.

import React, {Component} from 'react';
class NotFound extends Component {
render() {
return (
<div className="row small-up-2 medium-up-3 large-up-4" id="Body">
<div className="medium-12 columns">
<h2>404 Page</h2>
</div>
</div>
);
}
}
export default NotFound;

14. Create Sidebar.js with the following code under Sidebar folder.

import React, {Component} from 'react';
import {Redirect} from 'react-router-dom';
class Sidebar extends Component {
constructor(){
super();
this.state={
logout: false
};
this.logout = this.logout.bind(this);
}

componentDidMount() {
let localData = sessionStorage.getItem('userData');
if(localData){
this.setState({logout: true});
}
}

logout(){
console.log("Logout");
sessionStorage.setItem('userData','');
sessionStorage.clear();
this.setState({logout: !this.state.logout});
}

render() {
if (!this.state.logout) {
//return (<Redirect to={'/login'}/>)
}

return (
<div className="secondery off-canvas position-left reveal-for-large " id="my-info" data-off-canvas data-position="left">
<div className="row column">
<h5>{this.props.name}</h5>
{
this.state.logout
? <button type="button" className="button" onClick={this.logout}> Logout</button>
: null
}
</div>
</div>
);
}
}
export default Sidebar;

15. Create routes.js file under src folder and add the following code.

import React from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import Welcome from '././components/Welcome/Welcome';
//import Home from '././components/Home/Home';
//import Login from '././components/Login/Login';
//import Signup from '././components/Signup/Signup';
import NotFound from '././components/NotFound/NotFound';

const Routes = () => (
<BrowserRouter >
<Switch>
<Route exact path="/" component={Welcome}/>
<Route path="*" component={NotFound}/>
</Switch>
</BrowserRouter>
);

export default Routes;

16. Modify app.js with the following code.

import React, { Component } from 'react';
import './styles/foundation.min.css';
import './styles/custom.css';
import Routes from './routes';
import Header from './components/Header/Header';
import Footer from './components/Footer/Footer';
import MobileHeader from './components/MobileHeader/MobileHeader';
class App extends Component {
constructor(){
super();
this.state={
appName: "ReactJS Feed Example",
home: false
}
}
render() {
return (
<div className="off-canvas-wrapper">
<div className="off-canvas-wrapper-inner" data-off-canvas-wrapper>
<div className="off-canvas-content" data-off-canvas-content>
<MobileHeader name={this.state.appName}/>
<Header name={this.state.appName}/>
<Routes name={this.state.appName}/>
<hr/>
<Footer/>
</div>
</div>
</div>
);
}
}
export default App;

17. Browse the app from the browser.

The steps are shown in the following video.

Next