A List:
13 |- A List
14 |
- One 15 |
- Two 16 |
A List:
- One
- Two
87 | 88 | ## Git Tutorial For userC 89 | Go to https://github.com/`userB`/`project-name` and click the "Fork" button. 90 | 91 | In the Terminal, do the following: 92 | 93 | 1. Type `cd` into the terminal and drag and drop the folder where you want to create the project folder from Finder into Terminal. You’ll see directoryPath being auto-completed in Terminal. 94 | 95 | `$ cd directoryPath` 96 | 97 | 2. Make a new folder called `project-name`. 98 | 99 | `$ mkdir project-name` 100 | 101 | 3. Go into the `project-name` folder 102 | 103 | `$ cd project-name` 104 | 105 | 4. Initialize the `project-name` folder as a git repo. This essentially makes this folder a "local git repo". 106 | 107 | `$ git init` 108 | 109 | 5. Link your "local git repo" to a "remote git repo" that you own. Call this remote git repo `origin`. 110 | 111 | `$ git remote add origin ssh://git@github.com/userC/project-name.git` 112 | 113 | 6. Populate the `project-name` folder on your computer (i.e., local repo) with the files from the remote repo's master branch. 114 | 115 | 116 | `$ git pull origin master` 117 | 118 | 7. List the files in your `project-name` folder to make sure the pull was successful. You should see this folder populated with files downloaded from the remote repo 119 | 120 | `$ ls` 121 | 122 | 8. Link your "local git repo" to another remote git repo that userB owns. Recall you forked the `project-name` repo from userB. The upstream user's (i.e., userB) repo. Call this `upstream`. 123 | 124 | `$ git remote add upstream https://github.com/userB/project-name` 125 | 126 | 9. Make sure `origin` and `upstream` are both available remote. 127 | 128 | `$ git remote` 129 | 130 | 10. Now open a file within `project-name` in [Atom](https://atom.io/) or another text editor. Make some changes to the code. To sync your local repo with your remote repo, do this: 131 | 132 | ``` 133 | $ git fetch origin 134 | $ git add --all 135 | $ git commit -m ‘I made some changes!' 136 | $ git push origin master 137 | ``` 138 | 139 | 11. To sync your local repo with userB's repo, do the following: 140 | 141 | `$ git pull upstream master` 142 | 143 | 144 | 145 | ## Other Useful Commands 146 | Some useful things you can do when things go haywire or just to get the most usefulness out of git: 147 | 148 | 1. Revert your local repo to the previously committed version when everything still worked: 149 | 150 | ``` 151 | $ git log 152 | 153 | # git will display the following: 154 | # commit:
15 | 42
16 |
17 | )
18 |
19 | // Javascript equivalent
20 | var a = React.createElement('div', null);
21 |
22 | var b = React.createElement(
23 | 'div',
24 | {
25 | foo: 'hello',
26 | bar: baz },
27 | React.createElement(
28 | 'span',
29 | null,
30 | '42'
31 | )
32 | );
33 | ```
34 |
35 | There are two libraries we'll use:
36 |
37 | * `react` contains the APIs for creating components
38 | * `react-dom` contains the APIs for rendering to the browser DOM
39 |
40 | [React Updating Cycles](http://www.react.express/lifecycle_api) and `class` vs `function`
41 |
42 | * For simple React components, we can use a function. For example:
43 |
44 | ```javascript
45 | import React from 'react'
46 | import { render } from 'react-dom'
47 |
48 | const node = document.querySelector('#app')
49 | const element = Hello World!
50 |
51 | render(element, node)
52 | ```
53 |
54 | * Often we want to render more complex components which encapsulate logic, styles, and multiple DOM components, and use lifecycle events (e.g. `componentWillMount`) and set any states. In this case, we want to use should use `class`.
55 |
56 | ```javascript
57 | import React, { Component } from 'react'
58 | import { render } from 'react-dom'
59 |
60 | class Counter extends Component {
61 |
62 | state = {count: 0}
63 |
64 | componentDidMount() {
65 | setInterval(() => {
66 | this.setState({count: this.state.count + 1})
67 | }, 1000)
68 | }
69 |
70 | render() {
71 | const {count} = this.state
72 | const {color, size} = this.props
73 |
74 | return (
75 |
76 | {count}
77 |
78 | )
79 | }
80 | }
81 |
82 | class App extends Component {
83 | render() {
84 | const style = {
85 | flex: 1,
86 | justifyContent: 'center',
87 | alignItems: 'center',
88 | }
89 |
90 | return (
91 |
92 |
97 | )
98 | }
99 | }
100 |
101 | render(Hello { this.props.world }
;
117 | }
118 | }
119 |
120 | // OK
121 | class MyClass extends React.component{
122 | constructor(props){
123 | super(props);
124 | console.log(this.props); // this.props is undefined
125 | }
126 | }
127 |
128 | // OK
129 | class MyClass extends React.component{
130 | render(){
131 | // There is no need to call `super(props)` or even having a constructor
132 | // this.props is automatically set for you by React
133 | // not just in render but another where else other than the constructor
134 | console.log(this.props); // it works!
135 |
136 | }
137 | }
138 | ```
139 |
140 | In summary:
141 |
142 | * Calling `super()` is necessary if you need to have a `constructor`.
143 | * Calling `super(props)` is necessary if you want to access `this.props` inside the `constructor`
144 | * ES6 class constructors MUST call `super()` if they are subclasses; however a subclass does not have to have a constructor.
145 |
146 |
147 | According to the [Official Documentation](https://reactjs.org/docs/react-component.html#constructor)
148 | > The `constructor` for a React component is called before it is mounted. When implementing the `constructor` for a `React.Component` subclass, you should call `super(props)` before any other statement. Otherwise, this.props will be undefined in the constructor
149 |
150 | >The `constructor` is the right place to initialize state. To do so, just assign an object to this.state; don’t try to call `setState()` from the constructor. The constructor is also often used to bind event handlers to the class instance.
151 |
152 | >If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.
153 |
154 | Note, The difference between `constructor` and `getInitialState` is the difference between ES6 and ES5 itself. `getInitialState` is used with React.createClass and `constructor` is used with `React.Component`.
155 |
156 | ```javascript
157 | import React, { Component } from 'react'
158 | import { render } from 'react-dom'
159 | class MyClass extends React.component{
160 | constructor(props) {
161 | super(props);
162 | this.handleChange = this.handleChange.bind(this);
163 | this.state = {
164 | color: props.initialColor
165 | }
166 | }
167 | handleChange(e) {
168 | this.setState({temperature: e.target.value});
169 | }
170 | render() {
171 | // ...
172 | }
173 |
174 | }
175 |
176 | ```
177 | Beware of this pattern, as state won’t be up-to-date with any props update. Instead of syncing props to state, you often want to [lift the state up](https://reactjs.org/docs/lifting-state-up.html) instead.
178 | > Often, several components need to reflect the same changing data. We recommend lifting the shared state up to their closest common ancestor. Let’s see how this works in action.
179 |
180 | **TL;DR** You want to make children render `this.props` instead of `this.state` and have the parent pass a function (say `changeParentProps` which modifies its states, to the chilren so the children can call `onClick={this.props.changeParentProps}` in their render functions.
181 |
182 |
183 | [Styling React Component](http://www.react.express/styling) - Three ways:
184 |
185 | 1. Inline Styles
186 | * Pro: No libraries/dependencies), dynamic (variables, themes, merging, etc) and works on Works on every React renderer (web, native, etc)
187 | * Con: No CSS features (psuedoclasses, media queries, keyframe animations) out of the box.
188 | 2. CSS and Class Names
189 | * Simply write CSS using any pre-processor or post-processor you'd like (LESS, Sass, Stylus, PostCSS), and use the className attribute of your components to apply styles. With this option, you can have many of the CSS features for dynamic styles - pseudo classes (`:hover`), media queries, keyframe animations, etc.
190 |
191 |
192 | [Event Handling](http://www.react.express/event_handling)
193 |
194 | ```javascript
195 | // Bad practice
196 |
197 | import React, { Component } from 'react'
198 | import { render } from 'react-dom'
199 |
200 | class CounterButton extends Component {
201 |
202 | state = {count: 0}
203 |
204 | render() {
205 | const {count} = this.state
206 |
207 | return (
208 |
211 | )
212 | }
213 | }
214 |
215 | render({subtitle}
256 | )} 257 | 258 | // Rendering with ternary ? 259 | 260 | {subtitle ? ( 261 |{subtitle}
262 | ) : ( 263 |No subtitle
264 | )} 265 | 266 | // Rendering with if/else 267 | class Card extends Component { 268 | renderContent() { 269 | const {title, subtitle} = this.props 270 | 271 | return ( 272 |
273 |
280 | )
281 | }
282 | render() {
283 | const {loading, error} = this.props
284 |
285 | let content
286 |
287 | if (error) {
288 | content = 'Error'
289 | } else if (loading) {
290 | content = (
291 | {title}
274 | {subtitle ? ( 275 |{subtitle}
276 | ) : ( 277 |No subtitle
278 | )} 279 |Loading...
292 | ) 293 | } else { 294 | content = this.renderContent() 295 | } 296 | 297 | return ( 298 |
299 | {content}
300 |
301 | )
302 | }
303 | }
304 |
305 | class App extends Component {
306 | render() {
307 | return (
308 |
309 |
313 | )
314 | }
315 | }
316 |
317 | ```
318 |
319 | [List and Keys](http://www.react.express/lists_and_keys)
320 |
321 | * Every React component can be passed a special prop called the `key`. React uses this `key` to determine the rendered element's identity. Understanding element identity is critical for performance and minimizing DOM manipulation: for example, if the first element in a list of thousands should no longer be rendered, React needs some way to detect this. Instead of re-rendering thousands of elements, React can simply remove a single DOM node for the first element, which is much more efficient.
322 | * if you wanted to, you could assign a key to every element. You can even force a component to re-render by assigning a different key (this tells React that the element's identity has changed, thus triggering a re-render). But most of the time, you don't need to consider keys because React takes care of them automatically. It's likely the only time you'll need to use them is when rendering lists of elements.
323 | * Ideally, we want to make the `key` the unique identifier for the items in the list (i.e., its actual value). If items in our data have no unique identifier of any kind, then we will generally resort to using the index of the item as its key. This silences the warning from React about forgetting to include keys, but remember that doing this will cause React to identify elements incorrectly if the data is modified
324 |
325 | ### Learning Resources
326 | **React**
327 |
328 | * Brad Westfall's [LearnReact Series](https://github.com/bradwestfall/Learn-React)
329 | * [React.Express Tutorial](http://www.react.express) - Learn about React, Redux, ES6, Babel, Webpack
330 |
331 | **React Router**
332 |
333 | * [react-router-config](https://www.npmjs.com/package/react-router-config)
334 | * [Starter project tutorial](https://www.mokuji.me/article/universal-app-react-router)
335 | * [Egghead Tutorial](https://egghead.io/lessons/react-create-basic-routes-with-the-react-router-v4-browserrouter)
336 | * [route-config example](https://reacttraining.com/react-router/web/example/route-config)
337 | * [A Simple Tutorial](https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf)
338 | * [Site Point Tutorial](https://www.sitepoint.com/react-router-v4-complete-guide/)
339 | * [Detailed Tutorial](https://blog.digitalkwarts.com/server-side-rendering-with-reactjs-react-router-v4-react-helmet-and-css-modules/)
340 | * [Lessons learned from migrating to v4 from an earlier version](https://webuild.envato.com/blog/a-real-word-story-of-upgrading-react-router-to-v4-in-an-isomorphic-app/)
341 | * [unofficial migration guide](https://codeburst.io/react-router-v4-unofficial-migration-guide-5a370b8905a).
342 | 5. [Read this](https://github.com/ReactTraining/react-router/pull/4934) for more on how to fix the deprecation warnings.
343 | > Failed Context Types: Calling PropTypes validators directly is not supported by the `prop-types` package
344 | * [Integrate React Router v4 with Server Router](https://crypt.codemancers.com/posts/2017-06-03-reactjs-server-side-rendering-with-router-v4-and-redux/)
--------------------------------------------------------------------------------