An introduction to React development

Transcript

1. An introduction to React development
2. What is React?
3. Glossary • Component • JSx • Functional programming • State • React Redux • React Router
4. I will not talk about • testing - e2e, unit • Deployment • ReactNative • ReactVR • ServerSide Rendering
5. How to start • CodePen • JSFiddle • etc • Create-react-app • StackBlitz • Stafolds / Project templates
6. Simple React app structure app $ tree . ├── components │ ├── App.jsx │ └── Note.jsx ├── index.jsx └── main.css
7. Architecture
8. ToolKit • Browser • VCCode :rocket: • Yarn • ES8 • Eslint • Flow • Webpack • jest
10. React Router
11. React Router index.js import React from 'react' import { render } from 'react-dom' import { BrowserRouter } from 'react-router-dom' import App from './components/App'; render(( <BrowserRouter> <App /> </BrowserRouter> ), document.getElementById('root'));
12. React Router inside the App import { Roster, Schedule } from './components' const Main = () => ( <main> <Switch> <Route exact path='/' component={Home}/> <Route path='/roster' component={Roster}/> </Switch> </main> ) export default Main
13. React Redux
14. Redux Redux is a predictable state container for JavaScript apps.
17. State { todos: [{ text: 'Learn Redux', completed: true }, { text: 'Learn React', completed: false }], visibilityFilter: 'SHOW_COMPLETED' }
18. Actions { type: 'ADD_TODO', text: 'Go to swimming pool' } { type: 'TOGGLE_TODO', index: 1 } { type: 'SET_VISIBILITY_FILTER', filter: 'SHOW_ALL' }
20. References • React Router Tutorial • Redux Glossary • EggHead courses • Create-react-app • CodePen • JSFiddle