Scribd
Upload
4 views28 pages

Web System- React

The document provides an introduction to React, a JavaScript framework for front-end web development created by Facebook, highlighting its key features such as JSX, functional programming, and component-based architecture. It outlines common tasks in front-end development, the structure of a React application, and the use of hooks like useState and useEffect for managing state and lifecycle events. Additionally, it mentions the importance of third-party libraries and tools that can enhance React applications.

Uploaded by

BIRUK GEBRE
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
4 views28 pages

Web System- React

The document provides an introduction to React, a JavaScript framework for front-end web development created by Facebook, highlighting its key features such as JSX, functional programming, and component-based architecture. It outlines common tasks in front-end development, the structure of a React application, and the use of hooks like useState and useEffect for managing state and lifecycle events. Additionally, it mentions the importance of third-party libraries and tools that can enhance React applications.

Uploaded by

BIRUK GEBRE
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/ 28

Web Systems and

Services

INTRODUCTION TO REACT

BITS College
Addis Ababa, Ethiopia, 2025

Lecturer Name:

6/13/2025 1
What is React?
• React is a JavaScript framework
• Used for front end web development
• Think of jQuery, but more structured
• Created and used by Facebook
• Famous for implementing a virtual dom
Timeline of front-end JavaScript frameworks

jQuery* AngularJS React Vue Angular


(2006) (2010) (2013) (2014) (2014)

* jQuery is more often considered a library than a framework


Common tasks in front-end development

App state Data definition, organization, and storage

User actions Event handlers respond to user actions

Templates Design and render HTML templates

Routing Resolve URLs

Data fetching Interact with server(s) through APIs and AJAX


Fundamentals of React

1. JavaScript and HTML in the same file (JSX)

2. Embrace functional programming

3. Components everywhere
JavaScript and HTML in the same file

HTML CSS JS JSX CSS or JSS

Traditional React
approach approach
JSX: the React programming language

const first = "Aaron";


const last = "Smith";

const name = <span>{first} {last}</span>;

const list = ( const listWithTitle = (


<ul> <>
<li>Dr. David Stotts</li> <h1>COMP 523</h1>
<li>{name}</li> <ul>
</ul> <li>Dr. David Stotts</li>
); <li>{name}</li>
</ul>
</>
);
“React is just JavaScript”
Functional programming

1. Functions are “first class citizens”

2. Variables are immutable

3. Functions have no side effects


Functional programming

Functions are “first class citizens”

let add = function() {


console.log('Now adding numbers');
const five = 3 + 2;
}; function foo() {
return function() {
console.log('What gets printed?');
function performTask(task) { };
task(); }
console.log('Task performed!');
} foo
foo();
performTask(add); foo()();
Functional programming

Variables are immutable

let a = 4;

a = 2; // Mutates `a`

let b = [1, 2, 3];

b.push(4); // Mutates `b`

let c = [...b, 4]; // Does not mutate `b`


Functional programming

Functions have no side effects

const b = [];

function hasSideEffects() {
b = [0];
}
Components
Components are functions for user interfaces

Input x Output number


Math function: let y = f(x);

Input x Output HTML


Component function: let y = <FancyDiv value={x} />;
Anatomy of a React component
The component is just Inputs are passed through a
a function single argument called “props”

The function
export default function MyComponent(props) { outputs HTML
return <div>Hello, world! My name is {props.name}</div>;
}

const html = <MyComponent name="aaron" />;

The function is executed as if Parameters are passed in


it was an HTML tag as HTML attributes
Component rendering

• When a component function executes, we say it “renders”


• Assume components may re-render at any time

Our job is to ensure that


every time the component re-renders,
the correct output is produced
“In React, everything is a component”
Todo application
Title
Big idea:
 A digital to-do list TodoForm

First step:
 mockup / wireframe
TodoList

Todo
Creating a new React app
Creating a new React app is simple!
1. Install Node.js
2. Run: npx create-react-app app-name
3. New app created in folder: ./app-name
Anatomy of a new React app

public holds the initial html


document and other static assets

App is a boilerplate
starter component

index.js binds
React to the DOM

package.json configures
npm dependencies
Component Hierarchy

Title

TodoForm
App

Title TodoList TodoForm


TodoList

Todo Todo Todo


Todo
Special list key property

• Situation: Display a dynamic array of elements


• Must specify a special “key” property for each element
• The key of an item uniquely identifies it
• Used by React internally for render optimization
• Can be any unique value (string or number)
What are hooks?
Hooks: Special functions that allow Built-in hooks:
developers to hook into state and
lifecycle of React components. We will cover
useState
these today useEffect
State: One or more data values
associated with a React component useReducer
instance.
We will not cover useMemo
these today
Lifecycle: The events associated with a useRef
React component instance (create, useCallback
render, destroy, etc).
First React hook: useState
Purpose:
1. Remember values internally when the component re-renders
2. Tell React to re-render the component when the value changes

Syntax:

const [val, setVal] = useState(100);

The current value A setter function to The initial


change the value value to use
Predicting component re-rendering
A component will only re-render when…

1. A value inside props changes

– or –
2. A useState setter is called
Second React hook: useEffect
Purpose:
Act as an observer, running code in response to value changes

Syntax:

useEffect(() => {
console.log(`myValue was changed! New value: ${myValue}`);
}, [myValue]);

A list of values such that changes The code to run when


should trigger this code to run values change
Building a React project

• When you’re ready to launch your app, run this command:


• npm run build
• This bundles your app into CSS/JS/HTML files and puts them in the
• /build folder
• These files can be served from an AWS S3 bucket
3rd party components and libraries
• React-Router

• Redux

• Material-UI

• Bootstrap

• Font-Awesome

• SWR
Thank You !!!

6/13/2025 28

You might also like