· 6 years ago · Feb 09, 2020, 05:08 PM
1REACT NEW CONCEPTS
2
31. Don’t touch the DOM. I’ll do it.
42. Build websites like lego blocks
53. Unidirectional data flow
64. UI, the rest is up to you
7
8DOM
9- what the browser uses to display a web site or web app and javascript is simply manipulating.
10- tree representation of the page
11
12Imperative
13- imperative paradigm you directly change individual parts of your app in response to various user events.
14
15Declarative
16- declarative paradigm is called that because we declare what is the state or data
17- less complexity, better code quality and faster developer times
18
19DOM manipulation is one of the biggest performance bottlenecks. Its takes a long time for DOM changes to happen. The browser has to do two really intensive operations.
20
21material ui
22blueprint js
23ant design
24
25components
26- plain javascript functions
27- can be reuse, share between projects
28
29Unidirectional data flow
30- a restriction on how data can move through our app
31
32React Keywords
33- Declarative
34- State
35- JSX
36- Props
37- Components
38- VirtualDOM
39
40
41https://robohash.org/4?set=set2
42
43https://github.com/nvm-sh/nvm
44
45{} - javascript expression
46
47
48json placeholder api
49https://jsonplaceholder.typicode.com/users
50
51
52super()
53- helps us with this by calling React.Component’s constructor
54
55SPA (Single Page Application)
56- requesting for data
57- always communicating outside the servers
58
59JSON (JavaScript Object Notation)
60- is a lightweight format for storing and transporting data
61- is often used when data is sent from a server to a web page
62
63Job Of React Developer
64- Decide on Components
65- Decide the State and where it lives
66- What changes when state changes
67
68Breaking into components
69- used in multiple locations
70- more flexible
71- the bigger a file gets the more JSX we have
72- flexibility of performance improvements
73- east to test
74
75CSS Tricks
76https://css-tricks.com/snippets/css/complete-guide-grid/
77https://gridbyexample.com/what/
78
79State
80https://reactjs.org/docs/react-component.html#setstate
81
82
83Synchronous
84- will wait for that thing to finish before it continues
85
86Asynchronous
87- takes an indefinite amount of time
88
89Events are actions or occurrences that happen in the system you are programming
90
91
92SyntheticEvent
93- onChange
94- onClick
95
96Object Destructuring
97https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment#Object_destructuring
98
99
100filter()
101- iterated
102- filters out anything where the function condition returns false
103- anything that returns true keep in the new array
104
105includes(element, start of searching)
106
107
108primitive types
109- string
110- boolean
111- null
112- undefined
113- number
114- symbol
115
116objects
117- has property and values
118
119
120Lifting State Up
121- place state where it gives us access to whatever needs it
122
123React events are named using camelCase, rather than lowercase.
124
125
126bind - function that returns a new function
127
128Generating SSH Key
129https://help.github.com/en/enterprise/2.15/user/articles/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent
130
131
132predeploy
133- build our real code into the final code that our browser needs
134
135deploy
136- gh-pages -d build
137
138git remote add origin https://github.com/mnlcandelaria/monsters-rawr.git
139
140
141"homepage": "https://mnlcandelaria.github.io/monster-rawr",
142
143"predeploy": "yarn build",
144"deploy": "gh-pages -d build"
145
146yarn deploy
147
148
149LIFE CYCLE METHODS
150https://github.com/ZhangMYihua/lifecycles-lesson
151http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
152- componentDidMount
153-
154
155
156
157Components are the heart of React's powerful, declarative programming model.
158
159React Router is a collection of navigational components that compose declaratively with your application.
160
161exact - exact url path
162
163switch - allow us to follow a pattern
164
165withRouter
166- higher order component
167 - a function that takes a component as an argument and which turns you a modified component.
168
169
170Event.preventDefault()
171- stop the default behaviour
172
173
1742 types of development
175Frontend - JS, HTML, CSS (users sees)
176Backend - Database, Server Authentication (users can’t see)