React.
js
1
React
⚫ React is a Javascript library for building user interfaces or UI
components.
⚫React creates aVirtual DOM in Javascript that mimics the
browser DOM
⚫Helps render web pages with consistent look and feel
⚫It is maintained by Facebook and a community of individual
developers and companies.
⚫ React was created byJordan Walke, asoftware engineer at Facebook
and deployed on Facebook's News Feed in 2011 and later on Instagram
in 2012
⚫ Initial Public Release on 29 May 2013
⚫ It was open-sourced in March 2015
React Directly in HTML
⚫The quickest way start React is to write React directly
in your HTML files.
⚫Start by including three scripts, the first two let us write
React code in our JavaScripts, and the third, Babel,
allows us to write JSXsyntax
<script src="[Link]
<script src="[Link]
[Link]"></script>
<script src="[Link]
‹#›
<!DOCTYPE html>
<html>
<script src="[Link]
<script src="[Link]
<script src="[Link]
<body>
<div id="mydiv"></div>
<script type="text/babel">
class Hello extends [Link] {
render() {
return <h1>HelloWorld!</h1>
}
}
[Link](<Hello / > , [Link]('mydiv'))
</script>
</body>
‹#› </html>
React
⚫React applications are composed of class components
that:
⚫Track state
⚫Render page updates based on that state
MVC
⚫At some point, Facebook described React as theVin
MVC
⚫MVC is an architectual Design Pattern
⚫MVC is NOT a Framework (like Rails, CakePhp,
Laravel, and django)
⚫Some web frameworks incorporate concepts of MVC
MVC
MVC
MVC
⚫ Code affects the structure or content of data => Model
⚫ Code that processes data to or from DB or prior to view = >
Controller
⚫ Code outputs visible images and structures on browser =>
View
React
⚫In order to learn and use React, you should set up a
React Environment on your computer.
⚫The create-react-app is an officially supported way
to create React applications.
npm install -g create-react-app
React
⚫The create-react-app will set up everything you need to
run a React application.
npx create-react-app myfirstreact
cd myfirstreact
npm start
React
⚫[Link]:
import React from 'react';
import ReactDOM from 'react-dom';
class App extends [Link] {
render() {
return <h1>HelloWorld!</h1>;
}
}
[Link](<App / > , [Link]('root'));
React
⚫Install Simple React Snippets inVSCode
Click 'Install'
React
⚫Install Prettier - Code Formatter
Click 'Install'
Exit and re-enter Visual Studio Code
React – First Application
⚫ Install bootstrap – (a CSS library for consistent look and feel)
npm i bootstrap
⚫ Create a development folder
⚫ Drop the development folder inVisual Studio Code
⚫ Create a new application.
⚫In terminal window:
⚫ Navigate to development folder created above and run:
create-react-app myfirstreact
React – First Application
⚫OpenVisual Studio code. Navigate/cd to folder
<myfirstreact> inside your development folder
⚫App should have 3 folders
⚫node_modules
⚫public
⚫src
⚫ Open '[Link]' inside of the src folder and add a line to import
boostrap
import 'bootstrap/dist/css/[Link]'
React – First Component
⚫ In src folder:
⚫Create a folder called components
⚫Create a .jsx file. Pick a name suggestive of its function
⚫ <componentname>.jsx
⚫ Open the file. It will be empty
⚫ Use Simple React Snippets to quickly write some template code
⚫Select Simple React Snippets from Extensions menu
⚫Type 'imrc<tab>' –This will generate import Component
statement
⚫Type 'cc<tab>' –This will create a class
React – First Component
import React, { Component } from 'react'; Add App
name in these
two places!
class TestApp extends Component {
state = { }
render() {
return ( <H1>Test</H1>);
}
}
export default TestApp;
React – First Component
import React, { Component } from 'react';
class TestApp extends Component { This holds
state
state = { } information!
render() { This holds code to
return ( <div>Test</div>); render the page. All of
the code is placed in the
} return statement as
} XML.
export default TestApp; Return value can only contain 1 top-level
element. Best to use a <div>
React – Additions to [Link]
import React from "react";
import ReactDOM from "react-dom";
import "./[Link]";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import "bootstrap/dist/css/[Link]"; // bootstrap css library (already added
earlier)
import TestApp from './components/TestApp'; // Add this line
// Now change 'App' to 'TestApp'
[Link](<App />, [Link]("root"));
[Link](<TestApp />, [Link]("root"));
This is what renders the
content into a div in the
html file!
React – [Link]
⚫Basic html file in which document is rendered
<html>
<head>
….
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
…..
</body>
</html>
React – Example – Counter app
import React, { Component } from "react"; getBadgeClasses() {
class Counter extends Component { let classes = "badge m-2 badge-";
classes += [Link] === 0 ? "warning" : "primary";
state = { return classes;
count: 0 }
};
formatCount() {
handleIncrement = () => { return [Link] === 0 ? "zero" : [Link];
[Link]({ count: [Link] + 1 }); }
}; }
render() {
return ( export default Counter;
<div>
<span style={{ fontSize: 20 }} className={[Link]()}>{[Link]()}</span>
<button
className="btn btn-secondary btn-sm"
onClick={[Link]}
Note: This is jsx
> (Javascript
Increment
</button> XML). It should
</div>
);
NOT be quoted!
} It is compiled by
'Babel' into
javascript code
like calls to
createElement(),
etc.
React
Initial state
After 1 click on
'Increment' button
React - Events
⚫React supports Javascript events
⚫Events are written in camelCase (onClick=
rather than onclick=)
⚫Target functions do not need parens () but are
placed inside braces {}
⚫onClick={[Link]}
React – Forms
⚫React provides access to HTMLforms
⚫Similar to Events, handler names are coded
in camelCase
⚫onChange –When content of an input has
changed
⚫onSubmit –When a form is submitted
React – Forms - Example
import React, { Component } from "react"; render() {
class MyForm extends [Link] { return (
constructor(props) { <form onSubmit={[Link]}>
super(props); <h1>Hello {[Link]}</h1>
[Link] = { username: '' }; <p>Enter your name, and submit:</p>
} <input
type='text'
mySubmitHandler = (event) => { onChange={[Link]}
[Link](); />
alert("You are submitting " + [Link]); <input
} type='submit'
/>
Methods have no
myChangeHandler = (event) => { </form> parens but are enclosed
[Link]({username: [Link]}); );
} } braces {}
}
export default MyForm;
Fires when text Fires when
input field is submit button is
changed pressed
React – CSS
⚫React supports CSS style information inside jsx
⚫Since Javascript expressions are encased in braces {} and
Javascript objects also use braces, style information will
be in 2 sets of braces
⚫Style attributes use camelCase rather than hyphen
separated words
⚫background-color => backgroundColor
⚫font-family = > fontFamily
React – CSS Example
import React, { Component } from "react";
class CSSApp extends Component {
state = {};
render() {
return (
<div>
<h1 style={{ color: "red" }}>My face is red!</h1>
<p>Trying on some style!</p>
</div>
);
}
}
export default CSSApp;
React - Functions
⚫React functions can be defined two ways
⚫Similar to Javascript:
This code will
changeColor () {
fail unless you
[Link](color: 'blue');
bind this in a
}
constructor.
⚫With 'Arrow' notation:
changeColor = () => {
[Link](color: 'blue');
}
⚫Arrow notation allows access to this keyword
representing the component
React – binding 'this'
class Car extends [Link] {
constructor() {
super()
[Link] = [Link](this)
}
changeColor () {
[Link](color: 'blue');
}
