Challenge Overview
Abstract
We had launched series of fun challenges to introduce you to ReactJS. This is second challenge of the series. You will learn how to pass and data in the component and display it on browser using ReactJS and JSX.
Note:. We recommend you to read through first challenge of the series. First challenge of the series will guide you in setting up the dev env for react and build a (hello world) app.
Important Note:
This is a fun challenge. No prize money will be awarded for completing this challenge successfully.
Challenge Details
What is ReactJS?
React is an open-source JavaScript library to build user interfaces. In other words it’s a View of MVC which helps you to render HTML.
Requirements for this challenge
We recommend you read through previous challenge. The objective of this challenge is to display the current time in the browser. The below tutorial will help you to understand how to pass and aceess data using ReactJS and JSX. By end of this tutorial you will learn how to define variable, access it's data within the component and thereby display it.
Step 1: Defining variable and access it's value.
-
You can create a variable and assign value to it in react component.
-
The variables are declared inside render function as shown in below code.
import React from 'react';
import { Render } from 'react-dom';
class Hello extends React.Component {
render() {
const pi = 3.14;
return(....);
}
-
In order to display the defined constant on web browser you need to pass it in return function within curly braces.
import React from 'react';
import { render } from 'react-dom';
class Hello extends React.Component {
render()
{
const pi = 3.14;
//JSX code in return function
return (
<div>
<h1>Hello World!</h1>
<A className="TC"> The value of pi is: {pi}</A>
</div>
);
}
}
render(<Hello/>, document.getElementById('app'));
Note: In JSX the class is declared in Camel Case i.e. className
Step 2: Creating and accessing an Array
-
The array can be defined in the same way we define a constant with a only difference in value assignment to the array.
-
You have to use map function in order to traverse the array as shown below.
import React from 'react';
import { render } from 'react-dom';
class Hello extends React.Component {
render() {
const pi = 3.14;
const weekdays = ["Mon","Tue","Wed","Thus","Fri"];
//JSX code in return function
return (
<div>
<h1>Hello World!</h1>
<A className="TC"> The value of pi is: {pi}</A>
<ul>Weekdays:- <br/>
{weekdays.map( day => <li>{day}</li>)}
</ul>
</div>
);
}
}
render(<Hello/>, document.getElementById('app'));
Step 3: Run your app
Run the app by executing command "npm start" in command prompt. You need to look for the port number in the command prompt to know on which port the output has been served.
Output:
The output will be serverd on targeting http://localhost:8081 in the browser in case your project has successfully compiled. In case port number 8081 is busy then you need to look for the port number in the command prompt to know on which port the output has been served.
The output which you will see in the browser is
Hello World!
The value of pi is:- 3.14
Weekdays
- Mon
- Tue
- Wed
- Thus
- Fri
Step 4: Add code to display current time
As per above guidance we need you to display current time in the browser along with values in array and value of pi.
Important Note:
This is a fun challenge. No prize money will be awarded for completing this challenge successfully.
Final Submission Guidelines
Submission Guidelines
- Share screenshot of the output.
Important Note:
This is a fun challenge. No prize money will be awarded for completing this challenge successfully.