6. React
React is a declarative, efficient, and flexible
JavaScript library for building user interfaces.
It lets you compose complex UIs from small and
isolated pieces of code called “components”
Fast!!!
13. React
Props and State do similar things but are used in
different ways. The majority of your components
will probably be stateless.
Props are used to pass data from parent to child
or by the component itself. They are immutable
and thus will not be changed.
State is used for mutable data, or data that will
change. This is particularly useful for user input.
Think search bars for example. The user will type
in data and this will update what they see.
14. React
Props and State do similar things but are used in
different ways. The majority of your components
will probably be stateless.
Props are used to pass data from parent to child
or by the component itself. They are immutable
and thus will not be changed.
State is used for mutable data, or data that will
change. This is particularly useful for user input.
Think search bars for example. The user will type
in data and this will update what they see.
15. React
Props and State do similar things but are used in
different ways. The majority of your components
will probably be stateless.
Props are used to pass data from parent to child
or by the component itself. They are immutable
and thus will not be changed.
State is used for mutable data, or data that will
change. This is particularly useful for user input.
Think search bars for example. The user will type
in data and this will update what they see.
21. Redux
Redux is a state container, it stores all of your
state in one place
The state is read only, the only way to change
state is to dispatch an action.
State can only be changed by pure functions or in
another term: Reducers. Redux Reducers take in
the previous state and an action object and
returns the next state.
35. Key takeaways
SMALL SPFX SOLUTION
=> NO REDUX
SPLIT UP ACTIONS USE DEVTOOLS PUT EVERYTHING IN
STATE
MIDDLEWARE FOR (SP)
API CALLS
36.
37. Please visit our sponsors who made this day possible!
Thankyou!
Rate this session with
the event app
http://rate.spsstockholm.com
Editor's Notes
React is a JavaScript library for building user interfaces. It is the view layer for web applications.
At the heart of all React applications are components. A component is a self-contained module that renders some output. We can write interface elements like a button or an input field as a React component. Components are composable. A component might include one or more other components in its output.
Broadly speaking, to write React apps we write React components that correspond to various interface elements. We then organize these components inside higher-level components which define the structure of our application.
For example, take a form. A form might consist of many interface elements, like input fields, labels, or buttons. Each element inside the form can be written as a React component. We'd then write a higher-level component, the form component itself. The form component would specify the structure of the form and include each of these interface elements inside of it.
Importantly, each component in a React app abides by strict data management principles. Complex, interactive user interfaces often involve complex data and application state. The surface area of React is limited and aimed at giving us the tools to be able to anticipate how our application will look with a given set of circumstances.
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation. This page provides an introduction to the idea of components
