Let’s write our first React Component. In my previous tutorial I have explained, how to install and setup the reactJs environment in local. This is a continuation of ReactJs: Installation and Setup the Development Environment. Let’s see how this work, follow the live demo and code below.
Video Tutorial
My first reactJs “Hello World” Project for Beginners
Your first React Component
By convention, all React parts that are made along these lines must acquire from the React.Component class.
The first thing we need to do is import both the React and ReactDOM classes. Add these lines to the top of those files:
import React from 'react';
import ReactDOM from 'react-dom';Create files in our example folder called entry.js, App.js & index.html and add some code to it.
$ touch entry.js
$ touch App.js
$ touch index.html
Open entry.js and add below code
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.js';
ReactDOM.render(<App />, document.getElementById('app'));Open App.js and add below code
import React from 'react';
import ReactDOM from 'react-dom';
export default class App extends React.Component {
render() {
return (
<h1>
Hello World !...
</h1>
)
}
}Open index.html and add below code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React App</title>
</head>
<body>
<div id="app"></div>
<script src="main.js"></script>
</body>
</html>We done with our coding. Time to see our output. To see the output run the server.
$ npm startThen open the browser and run “localhost:8080“
Leave a Reply