Intro to React - Lecture notes 1, 3, 4, 5 PDF

Preview

Summary

Quick intro lecture notes on the framework react...

Description

React - JS library for building interactive user interfaces - Developed by facebook in 2011 - At the heart of all React applications are COMPONENTS - A COMPONENT is a piece of the UI - When you are building applications with React you are building a bunch of independent, isolated, and reusable components that you then compose to build complex UI’s - Every React application has at least one component which we refer to as the ROOT COMPONENT - This component represents the entire application and contains other inner components, so every react application is essentially a tree of components - It looks like a tree because each may component have other inner components - Each component is a piece of UI that you build in isolation and then later put together to create a complex UI - In terms of implementation, a component is typically implemented as a JAVASCRIPT CLASS that has some STATE and a RENDER method : class Tweet { state = { } ; render ( ) { --------------> React Element } } - The state here is the data that we want to display when the component is rendered. - And the rendered method is responsible for describing what the UI should look like - The output of this render method is a REACT ELEMENT, which is a simple plain javascript object that maps the DOM ELEMENT - Its not a real DOM element, its just a plain JS object that represents the DOM ELEMENT in memory - Means REACT keeps a lightweight representation of the DOM memory, which we refer to as the virtual DOM - The VIRTUAL DOM is cheap to create - When you change the state of a component we get a new react element , react will then compare this element with its children and the previous one and figures out what is changed and then will update part

of the real DOM that will keep it in sync with the virtual DOM - This means when building applications with REACT, unlike vanilla JS or jquery, we no longer have to work with the DOM API in broswers - Compnents will change to match the state - This library is called REACT because when a state changes, REACT essentially reacts to the state change and updates the DOM REACT OR ANGULAR? - Both are similar in that they have a component based architecture, but Angular is a framework, or a complete solution, while react is a library - React only takes care of rendering the view and making sure the view is in sync with the state ; View library - When building apps with react, we need to use other libraries SETUP On terminal, to create react app: - Write this in the terminal: create-react-app THEN GIVE NAME HERE - Click enter - Then its going to install react and all the third party libraries you need - Its going to install DEVELOPMENT SERVER, WEBPACK (for bundling files), BABEL (for compiling our js code) - When you create an application using create-react-app you dont have to do any configuration (zero-config setup) - But if you want to customize you can always eject by running npm run eject - Then to open the react app go to terminal and run the following cd react-app/ Then run npm start - This will take you to the port 3000 - localhost port 3000 -

Understand classes and modules in react (object oriented programming) Jsx - Js xml in app.js

-

Babble is a compiler that takes the jsx and transforms it to js code the browser understands Document Object Model (DOM) - The DOM is a programming interface for html and xml documents. - It is an object-oriented representation of a web page which can be modified with a scripting language - The properties, methods, and events you can use to manipulate and create a web page with the DOM are organized into objects - Examples of objects: the document object that represents the document itself, the table object that implements the HTMLTableElement DOM interface for accessing html tables - Programs can change the document structure, style, and content through the DOM - The DOM represents the document as nodes and objects in a logical tree form - Each branch of the tree ends in a node, and each node contains objects The DOM and Javascript - DOM is not a programming language, but without it, JS would lack a model of web pages, html documents, xml documents, and their component parts (e.g. elements) - Every element in a document is part of the DOM for that document; they are accessed and manipulated by scripting languages React Components - React is all about components - Components are reusable, isolated, and independent - Small components are put together to form bigger ones - A react component is just a plain JS function, such as a component for a button - Component names start with capital letters, and this is because the ones that begin lower case are reserved for html elements - Every component receives a list of attributes, just like html elements. - The list is called props - A key advantage of the component architecture of React is it allows you to compose your UI from many separate, isolated components, which then makes it easier to build and maintain complex user interfaces JSX - JSX is a syntax extension of javascript that allows you to write HTML directly within javascript

-

-

-

-

This gives you programmatic power of JS within html and helps keep code readable JSX being a syntactic extensions of js means you can write JS directly within JSX - Any code that is inside curly braces { } is treated as javascript code JSX is NOT valid js, therefore the JSX code has to be compiled into JS - Babel is a popular transpiler for this purpose

JSX that is nested can only return a single element. The parent element would wrap all of the other levels of nested elements. - Several JSX elements written as siblings with no parent wrapper element will not transpile. Example of VALID JSX:

Paragraph One Paragraph Two Paragraph Three

Example of INVALID JSX Paragraph One Paragraph Two Paragraph Three

Comments in JSX - To put comments in JSX, use {/* *} to wrap around the comment text Rendering HTML elements to the DOM - JSX is a tool to write readable HTML within JS - With React, we can render JSX directly to the HTML DOM using React’s rendering API known as ReactDOM ReactDOM - React’s rendering API - ReactDOM is a simple method to render React elements to the DOM Looks like this:

ReactDOM.render(componentToRender, targetNode) - The first argument is the React element or component you want to render - The second argument is the DOM node you want to render the component to -

ReactDOM.render() MUST be called after the JSX element declarations, just like how you’d declare variables before using them Defining an HTML Class in JSX - JSX and HTML are similar but a key difference is you can’t use the word class to define html classes in JSX. - The word class is a reserved word in JS, so you have to use className in jsx - The names for html attributes and event references in JSX are now camelCase - Example: a click event in JSX is onClick instead of onclick. onchange becomes onChange.

Creating a Stateless Functional Component - There are 2 ways to create a React component - One way is to use a js function - Defining a component using a JS function creates a stateless functional component - Think of a stateless component as one that can receive data and render it, but does not manage or track changes to that data - To create a component with a function, you simply write a JS function that returns either JSX or null - React requires your function name to begin with a capital letter Create a React Component - Other way to define a React component is with the ES6 class syntax In the following example, Kitten extends React.Component: class Kitten extends React.Component { constructor(props) { super(props); } render() { return (

Hi ); } } This creates an ES6 class Kitten which extends the React.Componentclass. - So the Kittenclass now has access to many useful React features, such as local state and lifecycle hooks. - Kitten class has a constructor defined within it that calls super(). It uses super()to call the constructor of the parent class, in this case React.Component. - The constructor is a special method used during the initialization of objects that are created with the class keyword. It is best practice to call a component's constructor with super, and pass props to both. - This makes sure the component is initialized properly. For now, know that it is standard for this code to be included. Soon you will see other uses for the constructor as well as props. Create a Component with Composition - Composing multiple react components together - To compose components together you can create an App parent component that renders each of the components as children - To render a component as a child in a react component you include the component name written as a custom html tag in the jsx - For example, in the rendermethod you could write: return (



) - When React encounters a custom HTML tag that references another component (a component name wrapped in < />like in this example), it renders the markup for that component in the location of the tag. This should illustrate the parent/child relationship between the App component and the Navbar, Dashboard, and Footer -

-

Component composition is one of React's powerful features. When you work with React, it is important to start thinking about your user interface in terms of components like the App example in the last challenge. You break down your UI into its basic building blocks, and those pieces become the components. This

helps to separate the code responsible for the UI from the code responsible for handling your application logic. It can greatly simplify the development and maintenance of complex projects. Render a Class Component to the DOM You may remember using the ReactDOM API in an earlier challenge to render JSX elements to the DOM. - The process for rendering React components will look very similar. The past few challenges focused on components and composition, so the rendering was done for you behind the scenes. - However, none of the React code you write will render to the DOM without making a call to the ReactDOM API. Here's a refresher on the syntax: ReactDOM.render(componentToRender, targetNode). - The first argument is the React component that you want to render. - The second argument is the DOM node that you want to render that component within. React components are passed into ReactDOM.render()a little differently than JSX elements. -For JSX elements, you pass in the name of the element that you want to render. However, for React components, you need to use the same syntax as if you were rendering a nested component, for example ReactDOM.render(, targetNode). You use this syntax for both ES6 class components and functional components....