create-hello-world-app-with-reactjs

Create a hello world app with reactJs

Hello World, Welcome to my website. Today I am going to create a hello world app with reactjs. In this tutorial, we will cover the following things.

  • Introduction of ReactJs
  • Setup reactjs and create hello world app with reactjs

Introduction of ReactJs

React is a JavaScript library for building user interfaces across a variety of platforms.
React gives you a powerful mental model to work with and helps you build user
interfaces in a declarative and component­ driven way.

Learn More About React

Setup ReactJs and create a hello world app

We will setup reactjs and create a hello world application with the following steps.

  • Create helloWorld folder on your server.
  • Create index.php file in this newly created folder.
  • Add the following code in index.php file.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World - React Application</title>
</head>
<body>
    <div id="root"></div>
<!-- Include Scripts -->
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone@7.4.4/babel.min.js"></script>
<!-- Custom Script -->
<script type="text/babel">
    class App extends React.Component{
        render(){
            return <h1>Hello World</h1>
        }
    }
    ReactDOM.render(<App />,document.getElementById('root'));
</script>
</body>
</html>

Here we are not using nodejs or npm for creating react application. We are using cdn links of reactjs library.

Now run the application on your browser.

Your appreciation is my motivation 🙂