Unit 3 Class Notes
Unit 3 Class Notes
Feedback/corrections: [email protected]
1. MongoDB
Database server
Bottom tier of MERN stack
Application data store
JSON docs can be stored
Key-value pairs
Non-SQL
2. ExpressJS
3. ReactJS
This unit
Frontend JS Library (mainly SPA)
Components
Connect to backend server
Render to HTML
Stateful, data-driven interfaces
Forms, error handling, events, lists
4. NodeJS
Web server
Use NodeJS MongoDB drivers
Using callbacks and promises
Why MERN and not MEAN?
Angular - MVC, heavy, learning curve
React - easier, library
JSX
1 ReactDOM.render(
2 <div>
3 <h1>Captain America</h1>
4 <h1>Iron Man</h1>
5 <h1>Thor</h1>
6 </div>,
7 destination
8 );
JavaScript
1 ReactDOM.render(
2 React.createElement("div", null,
3 React.createElement( "h1", null, "Captain America" ),
4 React.createElement ( "h1", null, "Iron Man" ),
5 React.createElement ( "h1", null, "Thor" ),
6 ),
7 destination
8 );
First Program
1. Tip: if you are using VSCode, type in html:5 and press enter to get a basic HTML5 skeleton
2. Be sure to include the sources in the header <script></script> tags
3. Create an empty <div></div> tag to manipulate using ReactDOM
4. Add a script tag with text type text/babel and start writing your react code!
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Introduction to React</title>
7
8 <script src="https://unpkg.com/react@16/umd/react.development.js"
crossorigin></script>
9 <script src="https://unpkg.com/react-dom@16/umd/react-
dom.development.js" crossorigin></script>
10 <script src="https://unpkg.com/@babel/standalone/babel.min.js">
</script>
11
12 </head>
13 <body>
14 <div id="container"></div>
15 <script type="text/babel">
16 var des = document.querySelector("#container");
17 ReactDOM.render(
18 {/* JSX code */}
19 <h1> React World </h1>,
20 des
21 );
22 </script>
23 </body>
24 </html>
Simple Components
Components are written as classes that inherit from React.Component
A render method must be written that returns JSX
Call the ReactDOM.render() method with an element of the newly-created component
Rendered in a browser
Inside <style></style> tags in the head of the page, we can add some basic styling
1 <style>
2 .greeting {
3 color: blue
4 }
5
6 .shocking {
7 color: red
8 }
9 </style>
Rendered in a browser
Hard-Coded Approach
To style various components, we can add CSS style to the <style></style> tags in the head
This is not the best way to do it
1 .letter {
2 background-color: #ffde00;
3 color: #333;
4 display: inline-block;
5 padding: 25px;
6 margin: 25px;
7 }
Inside the body <script type="text/babel"></script> tags
Rendered in a browser
Rendered in a browser
Rendered in a browser
Up until now, we have only dealt with static/stateless components that do not undergo any
state changes
Components may need to change based on user actions, timers, responses from servers etc.
1 function Stuff(props) {
2 return (
3 <div>
4 <h1>Hello {props.name}</h1>
5 </div>
6 );
7 }
8
9 ReactDOM.render(
10 <Stuff name="Thor"/>,
11 document.querySelector('#container')
12 );
Rendered in a browser
Rendered in a browser
When returning an array or list of elements, the individual elements should be uniquely
identified by a key property
Helps React identify each element in the list
Unique key properties for each child in an array or iterator
Hard-Coded Method
Rendered in a browser
Example of map()
Output
1 function NameList(props) {
2 const names = props.names;
3 const listItems = names.map((name, index) => <li key={index}>{name}
</li>);
4
5 return (
6 <ul>{listItems}</ul>
7 )
8 }
9
10 const names = ["Batman", "Joker", "Superman"];
11
12 ReactDOM.render(
13 <NameList names={names}/>,
14 document.querySelector('#container')
15 );
Rendered in a browser
7.0 References
Rendered in a browser
7.1 Passing References
7.1 Passing References
Parents can pass a ref callback to its child element to get a reference to the child element
Console
8.0 Events
Rendered in a browser
9.0 Forms
Two main functionalities: when input value is change ( onChange event) and when the form is
submitted ( onSubmit event)
Form Data in React is usually handled by Components by storing them in state object, such
Form components are called Controlled Components
Controlled Components
The value property of the three types of form elements <input> , <textarea> and
<select> are controlled by React using the state and updated only using setState
The value is updated in the state when onChange event is triggered on the form element
(which calls setState )
The value is also set to the state property to keep it updated at all times (single source of
truth)
Rendered in a browser
Console
More on Forms
Rendered in a browser
Console
Uncontrolled Components
To write an uncontrolled component, instead of writing an event handler for every state
update, you can use a ref to get form values from the DOM
Additionally, use the defaultValue property to specify initial value in React
10.0 Context
While passing props from parent to child, ...props needs to be passed down through all
the children
Becomes tedious
For example here, App needs to pass the props down to DashBoard and then finally to
Profile , event though DashBoard does not use it
Inside the body <script type="text/babel"></script> tags
Rendered in a browser
To make this using context, we create a context object by calling React.createContext() ,
which has two keys: Provider and Consumer
The property (state) passes on from the Provider to the Consumer , not having to be passed
through every level
Rendered in a browser
Without defining a static contextType
Inside the body <script type="text/babel"></script> tags
Rendered in a browser