01 Element Factory - React From Zero

` tag 113 | 114 | gets converted to 115 | 116 | ### Lesson 5 - Properties 117 | 118 | Components, like elements, can use properties, too 119 | 120 | Which also works with an object and the spread (...) operator 121 | 122 | This allows components with dynamic content 123 | 124 | If an array is used as "child node" each child needs a unique key-property 125 | 126 | ### Lesson 6 - Property Types 127 | 128 | PropTypes were removed from `React` 16 and are now their own package 129 | 130 | Components get created to encapsulate stuff that should be together in one 131 | place and for reuse. 132 | Reuse requires the user of the component to supply the correct properties so 133 | we can define a type of each property and set defaults 134 | 135 | Add the propTypes (function-)property to the component function 136 | to let it validate its (element-)properties 137 | 138 | `React` supplies us with a bunch of types, like string 139 | 140 | Add defaultProps (function-)property to set the defaults 141 | if nothing was provided by the user 142 | 143 | This will show a warning in the console, because customData should be a string 144 | 145 | This will use the defaults 146 | 147 | ### Lesson 7 - Property Example 148 | 149 | Here's a more practical example of a component 150 | it formats a date and returns a `` containing that formatted string 151 | 152 | Also a more sophisticated type check for the date property 153 | The property is required, because there are no defaults set 154 | 155 | We have to supply a date object and the component does the formatting 156 | 157 | ### Lesson 8 - Nested Components 158 | 159 | Components, like elements, can be nested 160 | 161 | for this, the children property is used inside the component 162 | 163 | This component just wraps its children in an `

` element 164 | 165 | This component wraps its children into an `

` is created without children it gets a default child 168 | 169 | now we render two ``s, without and with Items 170 | 171 | ### Lesson 9 - Component Classes 172 | 173 | `React.createElement()`reateClass was removed from `React` 16 and is now its own package 174 | 175 | Often a component needs to maintain some internal state 176 | for example if there is an interaction involved 177 | in this case a component function is not sufficient 178 | the component function can only have properties and no state 179 | we need a component class with a render function 180 | 181 | used for type-checking of the properties 182 | same as with the component function 183 | 184 | this method sets default values for missing properties 185 | it will be called by `React` 186 | before the components gets mounted into the DOM 187 | 188 | this method sets the initial state for the component 189 | it will be called by `React` 190 | before the components gets mounted into the DOM 191 | if this method is missing, `this.state` will be undefined 192 | 193 | The state can be any `JavaScript` value, often it is an object 194 | 195 | this method handles all the clicks on the `` element 196 | 197 | setState() can be called with an object that contains the new state 198 | normally this triggers a call of render(), but `React` can batch multiple 199 | calls and defer the render() call (make the call asynchronous) 200 | To prevent this, setState can take a callback instead 201 | 202 | This can lead to unexpected behaviour, if we rely on `this.state` or 203 | `this.props` for our calculations 204 | `this.setState`({times: `this.state.times` + 1}) 205 | 206 | The callback version doesn't have this problem 207 | The callback gets the right state and `props` at time of the update 208 | 209 | this method will be called by `React` 210 | after the component got mounted into the DOM 211 | also every time `this.setState`() was called 212 | it's like the component function from before 213 | but without a `props` argument 214 | 215 | using the prop given by the creator of this component 216 | properties are now in `this.props` instead of the `props` argument 217 | 218 | returning an element with a click-handler and the `props` and 219 | state values. state is stored in `this.state` 220 | 221 | creating some instances of the interactive stateful component class 222 | one with default color 223 | Everything works exactly like with the simpler component functions 224 | The interface has not changed for the user of this component 225 | 226 | ### Lesson 10 - Example App 227 | 228 | An example of a simple `React` app 229 | It uses simple component functions for its stateless components 230 | and a complex component class to handle the interactions 231 | 232 | First we have the Task and TaskList 233 | They get all their data/state through their properties 234 | `` 235 | `` 236 | `` 237 | `` 238 | 239 | Task needs a text property 240 | 241 | TaskList needs an array of Task in its children property 242 | 243 | Print the first element bold 244 | 245 | This component handles the input 246 | It needs to be a class, because the `` element is stateful 247 | 248 | gets called when someone types into the `` element 249 | 250 | gets called when someone clicks the `