-
TodoApp
container component rendering below:-
AddTodo
user form to enter/add item -
TodoList
renders list of todos -
Todo
renders single item -
VisibilityFilters
filter links: acceptsactiveFilter
prop; dispatchessetFilter
actions
-
-
constants
enum of filters -
index
renders app to the DOM -
Redux https://redux.js.org/basics/basic-tutorial
-
Actions
-
Reducers
-
Store the state
-
Data Flow
-
Other
-
Action Types
actionTypes.js
to hold reusable constants of action types -
Selectors gets data from store
-
-
-
React hypes the "virtual dom" as the reason react is so fast
-
Components "look like" HTML templates (actually JSX)
-
components may contain
state
-
may contain JS for functionality
-
must have
render()
method, typicallyreturn ($HTML_JSX)
⇐ best to have single root element -
JSX uses attribute
className
in place ofclass
because it is reserved keyword in JS -
ReactDOM.render(<MyApp />, document.getElementById('app'));
-
JSX render js in string:
<p>{ Math.random() * 10 }</p>
or<p>My name is { this.state.name }</p>
-
-
CDN of react as core links: https://reactjs.org/docs/cdn-links.html
-
option for dev vs. production (minified) links
-
browser render babel:
-
<script crossorigin src="https://unpkg.com/babel-standalone@6/bable.min.js></script>
-
<script type="text/babel">…class MyApp extends React.component {…} …</script>
-
-
-
VS Code Helper plugins
-
ES7 React/Redux/GraphQL snippets
-
Sublime Babel syntax highlighting of JSX
-
LiveServer to open code in browser
-
-
Chrome Extension:
React Developer Tools
ads "React" section in deve tools -
src/redux/reducers/todos.js
heavily leverages ES6 deconstructor syntax…XXX
-
wrap
<TodoApp />
with<Provider />
API provided by React Redux