Go on. Explore!

lvl 0 • 0 xp

lvl 1

Home Market Decks Interests

React pt.1

memorize.ai (lvl 286)

(0)

24 cards

()

Section 1

Preview this deck

SASS

Front

1 / 24

TypeScript

0.0

0 reviews

5			0
4			0
3			0
2			0
1			0

Active users

All-time users

Favorites

Last updated

6 years ago

Date created

Mar 1, 2020

Cards (24)

Section 1

(24 cards)

SASS

Front

Super Awesome Style Sheets

Back

Yarn

Front

A package manager created by Facebook Has performance & security improvements vs npm

Back

JSX and its expressions and behavior

Front

Javascript XML allows us to write html templates easily gets compiled down to using react methods / components 1 root element in jsx can refer to javascript variables by writing expressions {varname || expression}

Back

Virtual DOM

Front

The algorithm that makes the react library super fast creates a copy of the DOM whenever there are changes in the virtual DOM the real DOM will be reflected

Back

Component life cycle methods and order

Front

Constructor initialized componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount Render phase, pre-commit phase, commit phase mounting(constructor, component did mount) updating(shouldComponentUpdate, componentDidUpdate) unmounting(componentWillUnmount)

Back

Setting up webpack

Front

teach webpack to run babel by using a loader loaders let us customize the behavior of webpack on how they treat files in a solution we can use rules on how webpack will use the loader test is used to define a regular expression to look for the loader after these are set up we can configure a babel.rc file in order to configure babel

Back

How to render components in virtual DOM

Front

JSX template returns an object the object contains data about that specific element being rendered to render changes you call ReactDOM.render this looks for changes in the template and the virtual DOM creates a new representation the virtual dom the gets recalculated and apply's changes or a "patch" to the real DOM

Back

State

Front

In charge of displaying the current state of a component whenever state is changed on a component it will re render in the DOM we change state with setState method setState returns the new state object with new values

Back

Binding methods in components

Front

each component has its own methods when components get rendered the methods come with

Back

Applying events and attributes in JSX

Front

Just like HTML we can apply events inside jsx sometimes names can be different than HTML but similar html: class="name" jsx: className="name"

Back

What makes up a React Application

Front

components views jsx modules models node for server side

Back

Ways to create Pure Components

Front

manual- call shouldComponentUpdate - write if else statements for props value - return false vs return true React.PureComponent - Create a class component - Inherit using extends the React.PureComponent - "does manual way for you by default

Back

Component

Front

Every component in react has to return a jsx template you can nest components within components static components have very little functionality

Back

Babel

Front

A compiler that compiles es6/jsx syntax to es5 it is compatible in all browsers jsx is not supported in browsers Define presets in react and env to teach babel how to compile

Back

Webpack

Front

A bundler Separation of files provides a good architecture developers can work in Spits out two files (css/js)

Back

Passing data via Props

Front

Back

Stateless Functional Components

Front

A component with less functionality and no state or lifecycle methods They improve performance because they do not inherit any components

Back

Props

Front

An object property react implements props allow you to render components in areas, you can place attributes in the component and display that data to display data in a component write {this.props.propName}

Back

3rd party components

Front

React has a great community of developers that make 3rd party components we can utilize

Back

React Features

Front

State Props Custom elements/Components Virtual DOM

Back

React, what is it, why and when to use it, and what are some of its features

Front

React is a framework library for building user interfaces easily Is very easy to implement in any existing application why to use it react: Is easy to learn if you know javascript the use of components easy to implement lots of developer tools when to use react: when there is an application with models and controllers if you are manipulating the DOM consistently (react has DOM management capabilities)

Back

Pure Components

Front

Fastest component in town Do not re-render when props value is changed

Back

Re-rendering of components

Front

JSX template returns an object the object contains data about that specific element being rendered to render changes you call ReactDOM.render this looks for changes in the template and the virtual DOM creates a new representation the virtual dom the gets recalculated and apply's changes or a "patch" to the real DOM

Back

Configuring Webpack and properties that make up the webpack.config.js file

Front

public/ index.html, bundle.js src/ app.js, utils.js node_modules/ react.js, react-dom.js

Back