Web Programming with React JS
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
Training Material
Prerequisites
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
2
Timeline of front-end JavaScript frameworks
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
3
jQuery* (2006)
AngularJS (2010)
React (2013)
Vue (2014)
Angular (2014)
* jQuery is more often considered a library than a framework
Core Concepts
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
4
Introduction to React
ELT layout
Introduction to React
ELT layout
Introduction to JSX
ELT layout
JavaScript and HTML in the same file
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
8
Traditional approach
React approach
HTML
CSS
JS
JSX
CSS or JSS
Understanding JSX
1. Embedding Expressions: You can embed JavaScript expressions within JSX by wrapping them in curly braces `{}`.
For example:
const name = 'React';
const element = <h1>Hello, {name}!</h1>;
2. Attributes: JSX allows you to use attributes similar to HTML. For example, you can set the class of an element using 'className' instead of 'class’.� const element = <div className="my-class">Content</div>;
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
9
Understanding JSX
3. Specifying Children: You can specify child elements within a tag by placing them inside the opening and closing tags:� const element = (<div><h1>Hello, world!</h1>
<p>Welcome to learning React.</p> </div>);
4. JSX Prevents Injection Attacks: JSX automatically escapes any values embedded within it to prevent injection attacks. This means that it is safe to include user input in your JSX:
const title = response.potentiallyMaliciousInput;
// This is safe:
const element = <h1>{title}</h1>;
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
10
Components
ELT layout
Components
Cart component
ProductList component
Product component
Product component
ELT layout
The application host
<!DOCTYPE html>�<html lang="en">�<head>� <title>Recipes</title>�</head>�<body>� <div id="app"></div>� <script type="module" src="/dist/index.js"></script>�</body>�</html>
HTML
ELT layout
index.js
import React from 'react';�import ReactDOM from 'react-dom';��ReactDOM.render(� <h1>Hello, world!</h1>,� document.getElementById('app')�);
JSX
ELT layout
The core component
Many React projects start with one core component called App
import React from 'react';��function App() {� return (� <article>� <h1>Recipe Manager</h1>� </article>� )�}��export default App;
JSX
ELT layout
Anatomy of a React component
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
16
export default function MyComponent(props) {
return <div>Hello, world! My name is {props.name}</div>;
}
const html = <MyComponent name="aaron" />;
Inputs are passed through a single argument called “props”
The function is executed as if it was an HTML tag
The function outputs HTML
The component is just a function
Parameters are passed in as HTML attributes
Anatomy of a new React app
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
17
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
State and Props in React
State:
class MyComponent extends React.Component {� constructor(props) {� super(props);� this.state = { count: 0 };� }}
Props:
function ChildComponent(props) {� return <h1>{props.message}</h1>;�}��function ParentComponent() {� return <ChildComponent message="Hello, World!" />;�}�
Virtual DOM
What is the Virtual DOM?
How it works:
Benefits:
React Lifecycle Methods
Mounting:
Updating:
Unmounting:
Error Handling:
React Hooks
Common Hooks:
useState(): Manages state in functional components.
const [count, setCount] = useState(0);
useEffect(): Manages side effects like data fetching, subscriptions, and manual DOM manipulations.
useContext(): Accesses the context API.
const value = useContext(MyContext);
Custom Hooks:
- Create reusable hooks by extracting component logic into a function.
function useCustomHook() {
// Custom logic
}�
Communicating between React components
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
22
<ChildComponent param={infoForChildComponent} />
this.parentCallback = (infoFromChild) =>
{ /* processInfoFromChild */};
<ChildComponent callback={this.parentCallback}> />
Getting Started with React: Setting Up the Environment
To start building applications with React, you need to set up your development environment. Here are the steps to get you started:
1. Install Node.js and npm: React is built on JavaScript, so you'll need Node.js and npm (Node Package Manager) installed on your machine. You can download and install them from the official Node.js website (https://nodejs.org/).�https://www.freecodecamp.org/news/how-to-install-react-a-step-by-step-guide/
2. Create a React Application: The easiest way to create a React application is by using the Create React App (CRA) tool, which sets up everything you need with a single command. Open your terminal and run the following command:
npx create-react-app my-app
cd my-app
npm start
This will create a new React application in a folder named `my-app` and start a local development server.
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
23
Getting Started with React: Setting Up the Environment
3. Code Editor: You'll need a code editor to write your React code. Visual Studio Code (VS Code) is a popular choice among developers due to its rich feature set and extensive plugin ecosystem.
4. Browser Developer Tools: Modern browsers come with developer tools that allow you to inspect the DOM, debug JavaScript, and analyze network activity. Chrome and Firefox are widely used and have robust developer tools.
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
24
Creating Simple Project
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
25
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
26
Advantages of React
Online React Compilation Tools
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
27
Exercise
Create an Form using react JS
Reference : Create a Form using React JS - GeeksforGeeks
ELT layout
Resources
React Documentation : https://reactjs.org/docs/getting-started.html
React Tutorial : https://reactjs.org/tutorial/tutorial.html
REU Site: Applying Data Science on Energy-efficient Cluster Systems and Applications
29