Hello World!; } export default App; ``` This updates the App component to render a simple

element saying "Hello World!" by removing unnecessary files and imports.">Hello World!

; } export default App; ``` This updates the App component to render a simple

element saying "Hello World!" by removing unnecessary files and imports.">
[go: up one dir, main page]
Scribd
Upload
50 views54 pages

0-Introduction To React

Here is the code for Exercise 1: 1. Delete App.css, App.test.js, Logo.svg 2. Remove imports in App.js 3. Add the following code to App.js: ```jsx import React from 'react'; function App() { return <h1>Hello World!</h1>; } export default App; ``` This updates the App component to render a simple <h1> element saying "Hello World!" by removing unnecessary files and imports.

Uploaded by

Jay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
50 views54 pages

0-Introduction To React

Here is the code for Exercise 1: 1. Delete App.css, App.test.js, Logo.svg 2. Remove imports in App.js 3. Add the following code to App.js: ```jsx import React from 'react'; function App() { return <h1>Hello World!</h1>; } export default App; ``` This updates the App component to render a simple <h1> element saying "Hello World!" by removing unnecessary files and imports.

Uploaded by

Jay
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 54

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/react@16.13.1/umd/react.production.min.js
React 16.13.1 Development (105.1KB) -
https://unpkg.com/react@16.13.1/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/react-dom@16.13.1/umd/react-
dom.production.min.js
ReactDOM 16.13.1 Development (906.3KB) - https://unpkg.com/react-dom@16.13.1/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


sebin@missionreadyhq.com

You might also like