Challenge Overview
Abstract
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"
},
<!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>
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 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!
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.