Introduction to React Sebin Benjamin

What we’ll do learn today

● Why do we need React ?
● A quick look on prerequisites, and setting up React
● An overview of key concepts in React
● What exactly is React ?
○ Hello World
● A walk through few React fundamentals
○ Components and Rendering
○ JSX
○ Props, ie Properties
● More on JSX
● Fun learning react
https://xkcd.com/1428/
Why do we need React ?
(or any frontend javascript framework)
Once upon a
time...
The great Browser wars
First Browser War (1995–2001)
• Netscape began - 80% market share in 1995.
• Internet Explorer released as part of the Microsoft Windows 95 Plus!
Pack.
• New versions of Internet Explorer and Netscape were released at a
rapid pace.
• Netscape's JavaScript was basically reverse engineered as Microsoft as JScript
• Proprietary HTML tags such as <blink> (Navigator) and <marquee> (Internet
Explorer) came into existance.
• Microsoft bundled Internet Explorer with every copy of Windows,
which had an over 90% share of the desktop OS market
Second Browser War (2004–2017)

• Netscape open-sourced their browser code, and later entrusted it to

the newly formed non-profit Mozilla Foundation ~2000
• Community-driven project to create a successor to Netscape
• Mozilla Firefox 1.0 was released on November 9, 2004. It then
continued to gain an increasing share of the browser market until a
peak in 2010.
• Google Chrome was released in 2008 and quickly fought to be the
favored browser.
https://gs.statcounter.com/browser-market-share
 The consequences

• Different browsers respond differently

to websites
• need for cross-browser testing
• The World Wide Web Consortium (W3C)
is the standards organization for the
web, which has a set of guidelines for
browsers to adhere certain to HTML and
DOM specifications.

https://crossbrowsertesting.com/blog/test-automation/history-of-web-browsers/
A lack of standardization
meant that developers had to
account for many different
browser behaviors and edge
cases.
 Early jQuery source code
// If Mozilla is used
if (jQuery.browser == 'mozilla' || jQuery.browser == 'opera') {
// Use the handy event callback
jQuery.event.add(document, 'DOMContentLoaded', jQuery.ready);

// If IE is used, use the excellent hack by Matthias Miller

//
http://www.outofhanwell.com/blog/index.php?title=the_window_onload_problem_
revisited
} else if (jQuery.browser == 'msie') {
// Only works if you document.write() it
...
Modern JavaScript libraries/frameworks
Advantages

• Reusable UI components.
• Easier to build and maintain a complex website.
• Declarative paradigm - the developer describes what the UI should
be like.
• Better structure and maintainable programs
• Better tools and testing capability
• Higher performance with lesser effort
Prerequisites
● DOM, common HTML elements, ● Selectors and attributes
attributes and formatting ● Pseudo class/elements
○ Text, forms, tables
○ Images, videos, multimedia ● CSS units - px, %, vw/vh, rem, em
● Accessibility ● Flexbox, Grid
● Hyperlinks ● Colors, gradients, shadows and
● Internationalization borders
● Semantic HTML, HTML versions
https://www.internetingishard.com/html-and-css/basic-web-pages/
Javascript, ES6+
Some important React concepts
• Rendering elements
• Components and their types
• Component tree and decomposability
• Life cycle events
• JSX
• Props, Event
• Mutability and Immutability
• State and updating state
• Functions vs Classes for components
• Hooks
Environment Setup

• Node.js
• npm - Node Package Manager, an online repository of packages + a
command line utility
• npx - A node tool execute npm packages

https://nodejs.org/en/download/
Environment Setup (optional)

• React Dev Tools

• Allows you to inspect the React component hierarchies in the
• Installation
• Firefox - https://addons.mozilla.org/en-US/firefox/addon/react-devtools/
• Chrome - https://chrome.google.com/webstore/detail/react-developer-
tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en
Let’s get started – Exercise 0
1. Create a new folder for week-6. Move into the folder in the
terminal
cd week-6
2. Run the following commands to create a hello world in react.

npx create-react-app hello-react

cd hello-react
npm start

3. Share a screenshot when you’ve got the browser up.

So, what just happened
• Create React App is a comfortable environment for learning React,
and is the best way to start building a new single-page application in
React.
• Create React App doesn’t handle backend logic or databases; it just
creates a frontend build pipeline, so you can use it with any backend
you want.
Create React App
• An officially
supported
way to create
single-page
React
applications.
• A modern
build setup
with no
configuration.
A whole lot of files !
Lets inspect those
package.json
• Specifies all packages / code to include.
• Part of npm/

index.html
• <div id=“root”>

index.js
• document.getElementById(“root”)
• <App />

App.js
• Definition of the App component
What is React ?

• React is a declarative, efficient, and

flexible JavaScript library for building
user interfaces.
• It lets you compose complex UIs from
small and isolated pieces of code
called “components”.
• Created by Jordan Walke, a Software
Engineer at Facebook
• Open-sourced at JSConf 2013.

https://reactjs.org/tutorial/tutorial.html#what-is-react
 just HTML5
<!DOCTYPE html>

<html lang="en">

<head>

<title>Some title</title>

</head>

<body>

<div>Hello World</div>

</body>

</html>
<!DOCTYPE html>

<html lang="en"> with Javascript

<head>

<title>Some title</title>

</head>

<body>

<script>

const helloDiv = document.createElement("div");

helloDiv.textContent = "Hello World";

document.body.appendChild(helloDiv);

</script>

</body>

</html>
<body> just React
<script
src="https://unpkgcom/.../react.production.min.js"
crossorigin></script>
<script src="https://unpkg.com/.../react-
dom.production.min.js" crossorigin></script>
<script>
const reactElement = React.createElement("div", {
children: "Hello World",
});
ReactDOM.render(reactElement, document.body);
</script>
</body>
</html>
 https://reactjs.org/blog/2015/10/07/react-v0.14.html

React,
ReactDOM
ReactNative
…
…
More on React packages
React 16.13.1 Production (12.5KB) -
https://unpkg.com/[email protected]/umd/react.production.min.js
React 16.13.1 Development (105.1KB) -
https://unpkg.com/[email protected]/umd/react.development.js

The react-dom package provides DOM-specific methods

that can be used at the top level of your app. Example, render(),
SyntheticEvents, etc
ReactDOM 16.13.1 Production (118.7KB) - https://unpkg.com/[email protected]/umd/react-
dom.production.min.js
ReactDOM 16.13.1 Development (906.3KB) - https://unpkg.com/[email protected]/umd/react-
dom.development.js
.....
<body>
React + JSX
<script
src="https://unpkgcom/.../react.production.min.js"
crossorigin></script>
<script src="https://unpkg.com/.../react-
dom.production.min.js"
crossorigin></script>
<script>
const reactElement = <div>"Hello World"</div>;
ReactDOM.render(reactElement, document.body);
</script>
</body>
</html>
JSX - a syntax extension to JavaScript

• Helps describe what the UI should look like.

• JSX is neither a string nor HTML, and after compilation produces
React “elements”.
• So that we could write
const reactElement = <div> Hello World </div>;

instead of

const reactElement = React.createElement("div", {

children: "Hello World",
});
https://babeljs.io/en/repl#
JSX produces
React “elements”
JSX
• JSX has an HTML-like syntax (but NOT exactly HTML, e.g. class vs
className)
• You must always return one tag wrapping all JSX code.
• Can be any tag e.g. <div> or even <>
• JSX likes all tags to be closed <br> becomes <br/> or <br></br>
• Same way to comment per any JavaScript using // or /* */
• We can add JavaScript expressions using { }
React implements a
browser-independent DOM
system for performance and
cross-browser compatibility
Major differences

• To specify a CSS class, use the

className attribute. This applies to all
regular DOM and SVG elements like
<div>, <a>, and others.
• The style attribute accepts a JavaScript
object with camelCased properties
rather than a CSS string.
• All HTML/standard DOM attributes are
supported as of React 16.

https://reactjs.org/docs/dom-elements.html
Expressions in JSX
const name = 'John Doe';
const element = <h1>Hello, {name}</h1>;

• JavaScript has the following expression categories:

• Arithmetic: evaluates to a number, for example 3.14159.
• String: evaluates to a character string, for example, "Fred" or "234".
• Logical: evaluates to true or false.
• Primary expressions: Basic keywords and general expressions in JavaScript.
• Left-hand-side expressions: Left values are the destination of an assignment.
Exercise 1
1. From exercise – 0 , delete the following files,
• App.css
• App.test.js
• Logo.svg
2. Remove the two imports in the App.js
3. Add two const variables with two string values before the App function.
const message1 = "Hey you";
const message2 = "What's going on";
4. Remove the contents of the return statement and add the following.
<>
<h1>{message1}</h1>
<p>{message2 + "??"}</p>
</>
 JSX evaluates to an expression
After compilation, JSX expressions become regular JavaScript function
calls and evaluate to JavaScript objects.

function getGreeting(user) {
if (user) {
return <h1>Hello, {formatName(user)}!</h1>;
}
return <h1>Hello, Stranger.</h1>;
}
Components and Props
5231564
● Components let you split the
UI into independent, reusable
pieces, and think about each
piece in isolation.
● Components can refer to other
components in their output. 7 8 9
+
This lets us use the same 4 5 6
component abstraction for any 1 2 3 =
level of detail
x 7 8 9
4 5 6
1 2 3

7 8 9 +
4 5 6
7 8 9 + 1 2 3 =
4 5 6
1 2 3
=
 5231564 5231564

7 8 9 + 7 8 9 +
4 5 6 4 5 6
1 2 3 = 1 2 3 =
5231564 5231564

7 8 9
+
7 8 9 4 5 6
+
4 5 6 1 2 3 =
1 2 3 =
Components
• Components are independent
and reusable bits of code.
• They serve the same purpose as
JavaScript functions but work in
isolation and return HTML.
• They accept arbitrary inputs
(called “props”) and return
React elements describing
what should appear on the
screen.
export const Header = ()=> {
return(
<div>
<h1>Hello World</h1>
</div>
)
}
Exercise 2 – Lets create a component
1. Create an Footer.js file
2. Add the following contents
function Footer() {
return (
<div>
This is a footer
</div>
);
}
export default Footer;

3. Import it into the App.js file and add it to inside the function
return import Footer from './Footer’
…
return (<> <p>This is some HTML before the footer</p>
<Footer></Footer> </>);
Components in React

Three main ways for expressing components in React:

1. Class components
2. Functional components
3. Functional components with Hooks
Functional Component
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}

Class Component
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
Fun learning react

• https://snake.sebinbenjamin.me
• Weather apps
• Calculators
• To do apps
• https://github.com/Asabeneh/30-Days-Of-React
www.missionreadyhq.com

Thank you Sebin Benjamin

[email protected]