React Workshop for Absolute Beginners

React Workshop for beginners

Hackr.io.

Spread the Knowledge

This article is about React workshop and its takeaways organized by Hackr Bootcamp

How do u feel when you build your first webapp without any shortcuts using Webpack and Babel in React? Sounds Exciting!

Introduction

Since JS frameworks started to rule webapp Industry, It is important to know one of its frameworks, React is one such framework. To create single page applications or a large web application where data is updated without reloading a page, React framework allows to create reusable UI components.

In its March event, Hackr Bootcamp hosted yet another enlightening workshop at Hackr office for Absolute beginners in React.js-

Building your first webapp with React JS, Webpack and Babel

conducted by Industry Experts Arun Michael Dsouza, Software Engineer at Adpushup(@amdsouza92), Kartik Agarwal, Software Engineer at Leena.ai(@kartikag01)) and Amandeep.

It was a 4 hours workshop attended by the varied audience from a 10th class student, to computer science graduates, to professionals and amateurs who came to upskill their tech stack or just wanted to know what, why and how of React framework. After routine registration and cool intro by our wonderful participants, Arun broke the ice by asking everyone some basic react questions to understand the audience level.

Arun Conducting React Workshop

The workshop was more focused on covering basic React JS concepts, setting up the environment to create webapp, build toolchain and web application development around it.

Pre-requisites were

  • Intermediate JS.
  • Basic ES6.

The audience was expected to know Javascript and some knowledge in ES6. With this knowledge, one can easily build webapp in React.js using webpack and babel.

Agenda was to understand

  1. React Basics
    1. About React
      1. What are the problems in JS development?
      2. What is React?
      3. What problem does React solve?
    2. Basic concepts of React
      1. JSX, using 2 components
      2. Props with functional components
      3. State with stateful components
        1. ES6 classes
        2. render()
        3. Example – Like/Dislike Button
  2. Setting up an environment and
  3. Create a small webapp- creating Like/Dislike Button

Here are a few takeaways from the Workshop:

ReactJS basics

ReactJS is an open-source Javascript library used to build dynamic user interfaces. It is considered widely for developing reusable HTML elements for front-end development. It is a part of MERN stack.

What are the problems faced working at Frontend?

Due to Multi-direction flow of code, problems can occur like-

  1. The code can become repetitive,
  2. Unmanageable,
  3. Difficult to debug
  4. and difficult to test.
  5. Continuous DOM operations are expensive

Why need to React occurred and How does React JS tackle these problems?

React dynamically builds User Interface. It enables developers to declare Web UI, compartmentalize those elements and describe those elements in terms of a final state. The flow of code becomes Uni-directional.

When the transaction happens to that state, React updates that UI element based on that state.

Further following topics were discussed in detail:-

  1. Component Architecture: A Component is a Javascript function or class that returns a UI element. Whenever the state of class component changes, React will re-render that component in the browser. A component is the first argument we want to render. We can use the createClass method to create different component classes.Component Architecture Source: https://scotch.io/tutorials/getting-to-know-flux-the-react-js-architecture
  2. Virtual DOM: Virtual DOM is a programming concept where an ideal or virtual representation of DOM is kept in the memory. RealDOM updates virtual DOM that leads to an increase in its performance. Whenever setState() method is called on any component, ReactJS creates the whole VirtualDOM from scratch. Updating is faster in ReactJS because of the efficient algorithm, batched update operations and uses observable instead of dirty checking to detect change.
  3. Components, Props, and State
    1. ReactJS Components: We divide complex UI elements into basic components. After developing these basic components we add all components into complex components. Data is passed to ReactJS components via state and props. The Data in state and props are used to render the Component with dynamic data.
    2. ReactJS Props: Props are used to send data to components, Every component is a pure javascript engine and not immutable as we cannot change the data of parameters or prop in ReactJS.
    3. ReactJS State: State is like a data store in React and is used to update the component when an action is performed by the user like clicking a button, select a checkbox, pressing a key, etc.
    4. JSX(Javascript uses XML) produces React Elements. React separate components using JSX, it helps visually compartmentalizing UI inside javascript code and also allows React to show more useful error and warning messages.

Functional Components

Functional Components are functions that accept props as an argument and return valid JSX.

function Bootcamp(props){
  return <div>Bootcamp {props.name}</div>
}

Class Components

Class components are ES6. A component is a class associated with the page. It extends React.js Component, and its only required method is render().

class Heading extends React.Component {
  render() {
    return <h1>{this.props.children}</h1>;
  }
}

SettingUp an Environment

Introduction to Babel & Webpack

Kartik took over the topic of  React JS toolchain, He created an environment using webpack and babel.

He later explained, Transpiling your React JS app with Babel and Webpack

  • Babel is the go-to transpiler for ES6. Babel is a Javascript compiler, to change next generation code(ES+) to ES6. Transpiler allows to transform ES6 to ES5 by creating plugins to transform the code. So, if you have JSX in your code, JSX provides react elements, that code will be transpiled before loading into the browser, a JSX compiler will translate any JSX into regular Javascript.
  • Webpack – Webpack is a module bundler, that packages your assets together. Webpack is module bundling system build on top of Node.js. It bundles the entire network up into manageable output files. Webpack combines, transforms, minifies and create packaging for Javascript, CSS files, sprite images or any other resource or asset by using plugins. npm is the package manager for the javascript platform, npm have cli capabilities. Kartik used the map function to explain Babel’s functionality-

ES6

[1,2,3].map(item =>item+1);

Converted by Babel

[1,2,3].map(function(item){
  return item+1;

Setup was created for React Environment by Installing Node JS and NPM on systems.

The project was setup and dependencies like Webpack and Babel were installed using npm library.

Go to console-

$ cd Desktop
$ mkdir react-workshop
$ cd react-workshop
$ npm init
$ code
$ npm i webpack webpack-cli -d

Define your config file

Webpack configuration file in Webpack is a file to put all configuration, loaders and other info related to your build.

In root directory, file is created called wepack.config.js and add folowing code:

module.exports = {
entry: [‘./index.js’ , ‘./index2.js’],
output : {
Filename: ‘static/js/bundle.js’, 
},
mode: ‘development’
};

Add Build Script

“build”: “./node_modules/.bin/webpack --config ./webpack.config.js”

Run Build file

$ npm run build

Babel installation

$ npm install --save-dev @babel/core @babel/cli

Add .babelrc to add plugins

{
“Presets”: ["@babel/preset-env”] 
}

Install @babel/preset-env

$ npm i @babel/preset-env --save

Setup React

$  npm i @babel/preset-react -d
$  npm i react react-dom --save

Modify .babelrc

{
“presets” : [<[
"@babel/preset-env”,
"@babel/preset-react”
]span>
}

Modify webpack.config.js

module.exports = {
entry: [‘./[‘./index.js’ , ‘./index2.js’]n>
output : {
Filename: ‘static/js/bundle.js’, 
},
mode: ‘development’
},
mode: ‘development’ ,
module: {
Rules:[
{
test : /\.(js | jsx)$/,
Loader : ‘babel-loader’ 
},
]>
}
};

Refer to this Video tutorial by Mastering React to setup a simple build process for converting our ES6 React components into ES5 using Babel and Webpack.

Create index.html
<html>
<body>
   <div class="root">
       <script src="./dist/static/js/bundle.js"></script>
   </div>
</body>
</html>

Hands-on

Start coding now….

Start with a Codesandbox boilerplate: Codesandbox

Create a small webapp- Like/Dislike Button

React Fundamentals: Development Environment Setup

import React from "react";
import ReactDOM from "react-dom";
import Text from "./src/Text";
import TextWithProps from "./src/TextWithProps";
import LikeDislike from "./src/LikeDislike";
const demo = 1;
let Component;
switch (demo) {
case 1:
 Component = <Text />;
 break;
case 2:
 Component = <TextWithProps value="Text from prop" />;
 break;
case 3:
 Component = <LikeDislike />;
 break;
}

ReactDOM.render(Component,document.getElemeById(“root”));

Source: Github repos – Arun

Next level will be in continuation of this workshop in the month of May 2019, the topic will be-

React JS application development

  • Intro to lifecycle methods
  • Making an HTTP call in React JS
  • Building a React JS application which displays trending repos from Github
  • React JS application development
  • Intro to lifecycle methods
  • Making an HTTP call in React JS

If you are local in Delhi NCR and want to Join us for such workshops, follow us on:-

Related Posts

Your email address will not be published. Required fields are marked *

*