Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

React JS

Introduction

Introduction

- React is an opensource library used for building User Interfaces (UI).

- It is responsible only for building UI.

- Created and maintained by Facebook.

- Has huge community support with high demand for skillset.

- It has a component based architeture which allows breakdown down your application into small encapsulated parts which can then be composed to make complex apps

- Components makes it possible to make reusable code

- React is declarative : tell react what you want and it will build the actual UI.

HelloWorld Example in React JS

- Install nodejs, vscode or use any editor of your choice.

- To create a project run

1. `npx create-react-app hello-world`

2. `cd hello-world`

3. `npm start`

- To get started edit app.js inside src folder of hello-world.

- what is npx : it is a npm package runner

- install react globally

1. `npm install create-react-app -g`

2. `create-react-app <project-name>`

HelloWorld Example

Folder Structure

- package.json :- contains the script and dependancies required for the project

- node_modules :- contails all the dependencies required by react when you run npx create-react-app appname

- public/index.html :- is the file that get served up you don't need to edit this file.

- src/index.js :- is the file you work with and edit

- src/app.js :- is the app component which represent the view we see in the browser.

Folder Structure

Components

- A component represents a part of the user interface.

- The component that carries all other component is known as the root component, and it is the containing component usually called AppComponent.

- Components are reusable.

- Types of Component

1. Stateless Functional Component :

- These are literally js functions

- that return html which describe the UI

2. Stateful Class Component.

- Class component are regular ES6 libraries that extent the component class from the ReactJS Library.

Functional Components

This is a javascript funtions that accepts objects of properties known as props. It accepts an input of properties and return the UI.

- Funtional components should be used as much as possible over the class based component

- Reasons

- Absence of this

- Solution without using state

- Mainly responsible for the UI

Functional Components

Class Components

- They are basically ES6 Classes, they can optionally recieve props as import and return html.

- They can also maintain a private internal state (maintain info and use it to decribe UI).

- Class Component are:

- Feature rich

- Maintain their own private data

- Complex UI Logic

- Provide life cycle hooks

Class Components

Props

- Props is short for properties

- It is the optional input your component can accept which allows the component to be dynamic.

- We specify props as attributes

- props are immutable(unchanging over time)

- They get passed to the component

- A parent passes props down to the children

- this.props is used to access props

Props

State

- State is managed within the component

- State can be changed

- this.state is used to access state

State

State

- State is managed within the component

- State can be changed

- this.state is used to access state

Hooks

React Routing

Routing

Routing is a process in which a user is directed to different pages based on their action or request.

ReactJS Router is mainly used for developing Single Page Web Applications

React and Http

- React itself do not have a way to fetch or send data to the server, it doesn't even have to know if there is a server in the app.

- Thus we use and HTTP Library such as

- axios `npm install axios`

- fetch API

React API

Components Lifecycle Methods

- Life cycle methods available for a class component can be classified into four phases

1. Mounting : they are called when an instance of a component is being created and inserted into the DOM. The mounting phase has four methods

- constructor

- static getDerivedStateFromProps

- render and

- componentDidMount

2. Updating : called when a component is being re-rendered as a result of changes to either its props or state. During the updating state we have 5 methods

- static getDerivedStateFromProps

- shouldComponentUpdate

- render

- getSnapshotBeforeUpdate and

- componentDidUpdate

3. Unmounting : called when a component is being removed from the DOM. Unmount has just 1 method

- componentWillUnmount

4. Error Handling : called when there is an during rendering, in a lifecycle method or in the constructor of any child component. This has 2 methods

- static getDerivedStateFromError and

- componentDidCatch

Components Lifecycle Methods

Basics of Form Handling

- Controlled Component

- To create a controlled component,

1. create a component state that will control the value of the imput element

2. then handle the onChange event

Basics of Form Handling

setState

Use setState to modify a component state.

- Always make use of setState and never modify the state directly.

- Code has to be executed after the state has been updated? Place that code in the the callback function which is the second argument to the setState method.

- When you have to update state based on the previous state value, pass in a function as an argument instead of the regular object.

SetState

Conditional Rendering

- if/else :

- don't work inside the JSX

- adding if/else statements within the JSX is not valid

- Element variables

- This a better approach which uses Javascript variables to store elements.

- Helps render the entire component or just a part of the component.

- Ternary conditional operator

- Even more simpler, can be used inside the JSX

- Short circuit operator

- Uses the && logical operator to evaluate both the right hand and left hand side if either the right or left hand side is false nothing with be returned.

Conditional Rendering

Component Mounting Life Cycle Methods

1. constructor(props) :

- is a special function that is called whenever a new component is created.

- It is used for initializing state or binding the event handlers.

- Never make HTTP requests from withing a constructor.

- It is the only place you are expected to set or change the state by directly overwriting `this.state` fields in other scenarios you are expected to use `this.setState()`.

2. static getDerivedStateFromProps(props, state) :

- rarely used, when the state of the component depends on changes in props over time.

- since static, it does not have access to the this keyword. thus `this.setState()` cannot be called here instead you return an object that represents the new state of the component.

- do not cause side effects like HTTP requests

3. render() :

- this is the only require method in a class component

- we simply read this.props and this.state and return the JSX which describe the UI

- it is a pure function for the given props and state it should always render the same UI.

- Do not change the state of the component, interact with the DOM or make ajax calls here.

- Children component lifecycle methods are also executed here.

4. componentDidMount():

- is called only once in the entire lifecycle of a component and is invoked immediately after a component and all its children components have been rendered to the DOM.

- here is the perfect place to cause side effects e.g interact with DOM, make any ajax calls to load data etc.

Component Mounting Life Cycle Methods

Learn more about creating dynamic, engaging presentations with Prezi