ico-arrow-big-left

FUN SERIES - Getting started with ReactJS - Hello World

Key Information

Register
Submit
The challenge is finished.
Show Deadlines

Challenge Overview



Abstract

We are launching series of fun challenges to help introduce you to ReactJS. This is first challenge of the series and will be a good first step in helping you become acquainted to ReactJS. 
 
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
 
As your introduction to ReactJS you will build and upload basic "Hello World" application. For this challenge, you will be using following (Hello World) tutorial as a guide. By end of this tutorial you will have knowledge of JSX(Extension to JavaScript) and components in ReactJS.
 
Step 1:-Environment Setup

 
  • Install Node.js and NPM.
  • Install BABEL plugin. As a browser can not interpret JSX(Explained later in this tutorial), we need to first convert it into JavaScript. BABEL will do it for us on a fly and take care of cross browser compatibility.
    • Open command prompt and type “npm install -g babel”
    • Install Babel CLI by typing “npm install -g babel-cli”
  • Install React
    • Create a folder on desktop so that you can locate it easily.
    • Run following command to create package.json file …..\Desktop\FolderName>npm init
    • Type  “npm install react --save” in command prompt. --save will update the package.json file with the packages.
    • Type ”npm install react-dom --save” in command prompt.
  • Install WEBPACK Bundler. WEBPACK bundler will bundle the dependencies & JSX code together.
    • Type  “npm install webpack --save” in command prompt.
    • Type “npm install webpack-dev-server --save” in command prompt.
  • Install Babel dependencies(In the same folder which you have created in previous step)
    • Type “npm install babel-core --save” in command prompt.
    • Type “npm install babel-loader --save” in command prompt.
    • Type “npm install babel-preset-react --save” in command prompt.
    • Type “npm install babel-preset-es2016 --save” in command prompt.    
 
Step 2: Create project file.

You need to create following files in the folder you have created in previous step.
  • Index.html
  • Main.js
  • Webpack.config.js
 
Step 3: Configure webpack and babel.

In order to run your first app you need to instruct webpack on which file to target as entry point. Also, we will configure babel loader to use es2016 and react presets which we have installed in previous steps.


webpack.config.js 
 

const path = require("path");

const config = {

entry: "./Main.js",

output: {

  path: path.resolve(__dirname, "dist"),

  filename: "index.js"

},

module: {

  loaders: [

  {
      test:/\.(js|jsx)$/,

      loader"babel-loader",

      query: {

          presets: ["react""es2016"]

      }

  }

]
}

};

 

module.exports = config;
 
 
Step 4: Update package.json

Update package.json's scripts section file with following script to start webpack. You must replace the test script 
to start the webpack server. We don't need test script as we are not going to perform testing in this tutorial.
 
"scripts": {

        "start":"webpack-dev-server --hot"

},

 
Step 5: Create Index.html file 
 

<!DOCTYPE html>

<html lang = "en">

  <head>

     <title>My first ReactJS App</title>

  </head>

  <body>

     <div id = "app"></div>

     <script src = "index.js"></script>

  </body>

</html>
 
Step 6 : Create React component with JSX.

A react component let you split the UI into independent, reusable pieces, and think about each piece in isolation. A component is responsible for returning React elements describing what should appear on the screen.
 
JSX is syntax extension of JavaScript.JSX enables React to build DOM nodes with HTML like syntax. 
 
React First converts JSX into Javascript file. Javascript file is rendered by the browser which then results into HTML code.
 
You would notice in the below code that we are returning a JSX code which looks similar to HTML code. The JSX code will be displayed in the browser as explained above. The HTML code will be updated in DOM as a node and thereby get displayed in the browser.

You can have a look at HTML structure in browser's developer console once the app is running.
 

Main.js

          
import React from 'react';

import { render } from 'react-dom';

class Hello extends React.Component {

 render() {

//JSX code in return function     

  return (

       <div>

          <h1>Hello World!</h1>

       </div>

    );

 }

}

render(<Hello/>, document.getElementById('app'));


Step 7: Run your (Hello World) 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 y
ou 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!



Important Note:
This is a fun challenge. No prize money will be awarded for completing this challenge successfully.

Final Submission Guidelines

Compress your (Hello World) application folder and upload to the challenge.

Important Note:

This is a fun challenge. No prize money will be awarded for completing this challenge successfully.

Reliability Rating and Bonus

For challenges that have a reliability bonus, the bonus depends on the reliability rating at the moment of registration for that project. A participant with no previous projects is considered to have no reliability rating, and therefore gets no bonus. Reliability bonus does not apply to Digital Run winnings. Since reliability rating is based on the past 15 projects, it can only have 15 discrete values.
Read more.

ELIGIBLE EVENTS:

2017 TopCoder(R) Open

REVIEW STYLE:

Final Review:

Community Review Board
?

Approval:

User Sign-Off
?

CHALLENGE LINKS:

Review Scorecard

?