create simple react website example

In this article, we would like to inform you that how to create simple react website example. ReactJs is an open-source JavaScript library and it is developed by Facebook. react js can be used to make a single-page application(SPA). ReactJS is also used to reuse UI components and run without reloading application so it is scalable, simple, and fast.

So, you can follow the below steps for create simple react website example.

Step 1: Install React Application

In this step, if you want to create a react application then you can follow below Url for install react js.

npx create-react-app my-website
cd my-website

1 2	npx create-react-app my-website cd my-website

Step 2: Install bootstrap in react

now, After the installation of react js, you can install the bootstrap using the below command.

npm install bootstrap --save

1	npm install bootstrap --save

here, we will import the bootstrap in the app.js file, so you can see the below code.
src/app.js

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {
  render() {
    return (
      <div className="container">
        <h2>React CRUD Tutorial</h2>
      </div>
    );
  }
}

export default App;

import React, { Component } from 'react';

import 'bootstrap/dist/css/bootstrap.min.css';

class App extends Component {

render() {

return (

<h2>React CRUD Tutorial</h2>

</div>

);

}

export default App;

Step 3: Configure React routing

The below command using install the react route. so you can follow the below command.

npm install react-router-dom --save

1	npm install react-router-dom --save

Go to the index.js file and Modify the below code.
src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';

import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <BrowserRouter>
  <App />
  </BrowserRouter>, document.getElementById('root'));

serviceWorker.unregister();

import React from 'react';

import ReactDOM from 'react-dom';

import { BrowserRouter } from 'react-router-dom';

import App from './App';

import * as serviceWorker from './serviceWorker';

ReactDOM.render(

<App />

</BrowserRouter>, document.getElementById('root'));

serviceWorker.unregister();

Step 4: Create react components

here in this step, we will create three components, like home, about, and contact. so you can see the below code.
src/home.component.js

import React, { Component } from 'react';

export default class Home extends Component {
    render() {
        return (
            <div class="container">
            <h3>Welcome To Home Page</h3>
            <p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>
            <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
            <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
            <p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>
            <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
            <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
            <p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>
            <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
            <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
        </div>
        )
    }
}

import React, { Component } from 'react';

export default class Home extends Component {

render() {

return (

<h3>Welcome To Home Page</h3>

<p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>

<p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>

<p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>

</div>

)

}

src/about.component.js

import React, { Component } from 'react';

export default class About extends Component {
    render() {
        return (
            <div class="container">
                <h3>Welcome To About Page</h3>
                <p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>
                <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
                <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
                <p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>
                <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
                <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
                <p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>
                <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
                <p>Lorem ipsum, orLorem ipsum, or lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book. lipsum as it is sometimes known, is dummy text used in laying out print, graphic or web designs. The passage is attributed to an unknown typesetter in the 15th century who is thought to have scrambled parts of Cicero's De Finibus Bonorum et Malorum for use in a type specimen book.</p>
            </div>
        )
    }
}

import React, { Component } from 'react';

export default class About extends Component {

render() {

return (

<h3>Welcome To About Page</h3>

<p><b>Lorem ipsum is placeholder text commonly used in the graphic, print, and publishing industries for previewing layouts and visual mockups</b></p>

</div>

)

}

src/contact.component.js

import React, { Component } from 'react';

export default class Contact extends Component {
    constructor() {
        super();
        this.state = {
          fields: {},
          errors: {}
        }
  
        this.handleChange = this.handleChange.bind(this);
        this.submitContactForm = this.submitContactForm.bind(this);
  
    };


    handleChange(e) {
    let fields = this.state.fields;
    fields[e.target.name] = e.target.value;
    this.setState({
        fields
    });

    }
  
    submitContactForm(e) {
        e.preventDefault();
        if (this.validateForm()) {
            let fields = {};
            fields["txtFname"] = "";
            fields["txtLname"] = "";
            fields["txtEmail"] = "";
            fields["txtMessage"] = "";
            this.setState({fields:fields});
            alert("Form submitted");
        }

    }
  
    validateForm() {
        let fields = this.state.fields;
        let errors = {};
        let formIsValid = true;

        if (!fields["txtFname"]) {
            formIsValid = false;
            errors["txtFname"] = "Please Enter Your First Name.";
        }

        if (typeof fields["txtFname"] !== "undefined") {
            if (!fields["txtFname"].match(/^[a-zA-Z ]*$/)) {
            formIsValid = false;
            errors["txtFname"] = "Please Enter Alphabet Characters Only.";
            }
        }


        if (!fields["txtLname"]) {
            formIsValid = false;
            errors["txtLname"] = "Please Enter Your Last Name.";
        }

        if (typeof fields["txtLname"] !== "undefined") {
            if (!fields["txtLname"].match(/^[a-zA-Z ]*$/)) {
            formIsValid = false;
            errors["txtLname"] = "Please Enter Alphabet Characters Only.";
            }
        }

        if (!fields["txtEmail"]) {
            formIsValid = false;
            errors["txtEmail"] = "Please Enter Your Email.";
        }

        if (typeof fields["txtEmail"] !== "undefined") {
            //regular expression for email validation
            var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
            if (!pattern.test(fields["txtEmail"])) {
            formIsValid = false;
            errors["txtEmail"] = "Please Enter Valid Email.";
            }
        }


        if (!fields["txtMessage"]) {
            formIsValid = false;
            errors["txtMessage"] = "Please Enter Your Message.";
        }
		
        this.setState({
            errors: errors
        });
        return formIsValid;
    }  
    render() {
        return (
            <div class="container">
                <form class="form-horizontal" method="post"  name="contactform" onSubmit= {this.submitContactForm}>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="txtFname">First Name:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="txtFname" placeholder="Enter First Name" name="txtFname" onChange={this.handleChange}/>
                            <div className="errorMsg">{this.state.errors.txtFname}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="txtLname">Last Name:</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="txtLname" placeholder="Enter Last Name" name="txtLname" onChange={this.handleChange}/>
                            <div className="errorMsg">{this.state.errors.txtLname}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="txtEmail">Email:</label>
                        <div class="col-sm-10">
                            <input type="email" class="form-control" id="txtEmail" placeholder="Enter Email" name="txtEmail" onChange={this.handleChange}/>
                            <div className="errorMsg">{this.state.errors.txtEmail}</div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label class="control-label col-sm-2" for="txtMessage">Message:</label>
                        <div class="col-sm-10">
                            <textarea name="txtMessage" class="form-control" id="txtMessage" onChange={this.handleChange}></textarea>
                            <div className="errorMsg">{this.state.errors.txtMessage}</div>
                        </div>
                    </div>
                    <div class="form-group">        
                        <div class="col-sm-offset-2 col-sm-10">
                            <button type="submit" class="btn btn-primary">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        )
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

import React, { Component } from 'react';

export default class Contact extends Component {

constructor() {

super();

this.state = {

fields: {},

errors: {}

}

this.handleChange = this.handleChange.bind(this);

this.submitContactForm = this.submitContactForm.bind(this);

};

handleChange(e) {

let fields = this.state.fields;

fields[e.target.name] = e.target.value;

this.setState({

fields

});

}

submitContactForm(e) {

e.preventDefault();

if (this.validateForm()) {

let fields = {};

fields["txtFname"] = "";

fields["txtLname"] = "";

fields["txtEmail"] = "";

fields["txtMessage"] = "";

this.setState({fields:fields});

alert("Form submitted");

}

validateForm() {

let fields = this.state.fields;

let errors = {};

let formIsValid = true;

if (!fields["txtFname"]) {

formIsValid = false;

errors["txtFname"] = "Please Enter Your First Name.";

}

if (typeof fields["txtFname"] !== "undefined") {

if (!fields["txtFname"].match(/^[a-zA-Z ]*$/)) {

formIsValid = false;

errors["txtFname"] = "Please Enter Alphabet Characters Only.";

}

if (!fields["txtLname"]) {

formIsValid = false;

errors["txtLname"] = "Please Enter Your Last Name.";

}

if (typeof fields["txtLname"] !== "undefined") {

if (!fields["txtLname"].match(/^[a-zA-Z ]*$/)) {

formIsValid = false;

errors["txtLname"] = "Please Enter Alphabet Characters Only.";

}

if (!fields["txtEmail"]) {

formIsValid = false;

errors["txtEmail"] = "Please Enter Your Email.";

}

if (typeof fields["txtEmail"] !== "undefined") {

//regular expression for email validation

var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);

if (!pattern.test(fields["txtEmail"])) {

formIsValid = false;

errors["txtEmail"] = "Please Enter Valid Email.";

}

if (!fields["txtMessage"]) {

formIsValid = false;

errors["txtMessage"] = "Please Enter Your Message.";

}

this.setState({

errors: errors

});

return formIsValid;

}

render() {

return (

<label class="control-label col-sm-2" for="txtFname">First Name:</label>

<div className="errorMsg">{this.state.errors.txtFname}</div>

</div>

<div className="errorMsg">{this.state.errors.txtLname}</div>

</div>

<label class="control-label col-sm-2" for="txtEmail">Email:</label>

<div className="errorMsg">{this.state.errors.txtEmail}</div>

</div>

<label class="control-label col-sm-2" for="txtMessage">Message:</label>

<div className="errorMsg">{this.state.errors.txtMessage}</div>

</div>

<button type="submit" class="btn btn-primary">Submit</button>

</div>

</form>

</div>

)

}

Step 5: Set up the route inside the App.js

now, we load the header menu and set up the route inside the App.js file.
src/App.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route, NavLink } from 'react-router-dom';

import home from './home.component';
import contact from './contact.component';
import about from './about.component';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <Router>
        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>                        
              </button>
              <a class="navbar-brand" href="#"><img src={logo} className="App-logo" alt="logo" /></a>
            </div>
            <div class="collapse navbar-collapse" id="myNavbar">
              <ul class="nav navbar-nav">
                <li><NavLink exact activeClassName="active" to={'/'}>Home</NavLink></li>
                <li><NavLink activeClassName="active" to={'/about'}>About</NavLink></li>
                <li><NavLink activeClassName="active" to={'/contact'}>Contact</NavLink></li>
              </ul>
            </div>
          </div>
        </nav>
        <Switch>
            <Route exact path='/' component={ home } />
            <Route path='/about' component={ about } />
            <Route path='/contact' component={ contact } />
        </Switch>
      </Router>
    );
  }
}
export default App;

import React, { Component } from 'react';

import { BrowserRouter as Router, Switch, Route, NavLink } from 'react-router-dom';

import home from './home.component';

import contact from './contact.component';

import about from './about.component';

import logo from './logo.svg';

import './App.css';

class App extends Component {

render() {

return (

</button>

</div>

<li><NavLink activeClassName="active" to={'/about'}>About</NavLink></li>

<li><NavLink activeClassName="active" to={'/contact'}>Contact</NavLink></li>

</ul>

</div>

</nav>

</Switch>

</Router>

);

}

export default App;

Step 6: Run React js application

If you want to run the application then you can follow the below command. if you any change in your app then use the npm run build and after you can run the application.

cd my-app
npm start

1 2	cd my-app npm start

Now we will run our application using the below Url in the browser.

http://127.0.0.1:3000

1	http://127.0.0.1:3000