Twitter: @graefin_senil
Web: lisabaut.de
index.html
style.css
index.html
style.css
logo.svg
Server
Client / Browser
index.html
style.css
Upload
Upload
Serves
Requests
Server
Response
Browser
(Client)
GET Request
http://react-js-girls-frankfurt.de
index.html
style.css
...
Response
GET Request
http://react-js-girls-frankfurt.de/about
about.html
style.css
...
http://
HTML => STATIC
CSS => STATIC
=> No programming languages
=> No interactive Changes
On every data change:
=> Need to reload /
make new http request
Next to HTML and CSS
=> Core Technology in WorldWideWeb
Programming Language
Enables INTERACTIVE webpages
All major Browsers have a dedicated
JavaScript Engine! ☄️
Representation of an HTML document
Interface between JavaScript and the HTML document
JavaScript can
document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()
... and so much more....
bundle.js
JavaScript library
- easier to select DOM elements
- easier to add animations
- easier to handle events
- asynchronious actions with Ajax
- easy to create Plug-Ins on top
- cross-browser support
Every 2nd website uses jQuery!
=> Wikipedia
Click !
DOM Manipulations
Event Handler
Change the DOM
Change the DOM
Change the DOM
$('#accordion li a').click(function(){
var currentID = $(this).attr('id');
if($(this).hasClass('inactive')){
$('#accordion li a').addClass('inactive');
$(this).removeClass('inactive');
$('#'+ currentID).fadeIn('slow');
}
});
HTML 🤩 CSS 🤩 JavaScript/jQuery
- Maps
- Chats
- News-Feeds
- Follower-Counts
- Friends Requests
- Activity of Followers
....
HTML
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
Fire jQuery!
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
Event Handler
Change the DOM
We need more control !
Before React:
=> separation of concerns ! HTML-file, CSS-file, JS-file
React introduced new thinking:
=> Websites are made of smaller JavaScript components
=> each with their own state, logic, markup and styles
index.html
style.css
bundle.js
Server
Browser
index.html
bundle.js
- pages
- routing
- data changes
...
Virtual Dom: copy of actual DOM
Dom Diffing: compare VirtualDom with actual Dom
=> re-render only the elements which changed !
=> high performance ! 👈
Components let you split the UI into independent, reusable pieces, and think about each piece in isolation.
- Facebook React Docs -
- a re-usable chunk of code
- plug it anywhere you want
- a view of your application
- might contain other components
- might provide data
- might contain logic like:
=> what happens if someone clicks
on a ChildComponent
=> where does data come from
A Component is a function !
- input parameters/props
- output is your view/your UI
- input new props
=> re-render your view/your UI
- render method is required !
- render should always return an Element
- Elements are created with JSX
- JSX looks like HTML => EASY !
- JSX Elements are converted to HTML
=> rendered to the DOM
Component Architecture according to your needs!
Keep it simple ! 👌
ACTION !
STATE CHANGE
PROPS
ACTION !
STATE CHANGE
PROPS
A way to trigger view changes
- can be any document event:
- onClick
- onSubmit
- onChange
- onMouseIn/Out
- onScroll
- onDoubleClick
...
Where your data lives !
- every class component can hold its own state
- may pass state to child
- every state change triggers a Component render()
Where your data comes from !
- pass data down to components via props
- if props change => re-render
- a prop can be anything that JavaScript supports:
boolean, string, object, array, number ...
ACTION !
STATE CHANGE
=> decide what to render according to state!
Triggers state changes => triggers re-render UI
Props, State, Actions
Props, State, Actions
=> state is often moved up in the Component tree, so that it can be
shared between components that need to access it
https://medium.freecodecamp.org/the-react-handbook-b71c27b0a795
=> How to get data into your application
For other options see => https://reactjs.org/community/data-fetching.html
Choose your own solution !
React is a library to render your view
=> not a framework
Mounting
Updating
Unmounting
=> use this phases to execute what you need
Components have several LifeTimes
Hey DOM ! I am here! 🤗
UPDATE!
My props or my state changed! 🥳
Bye! I am outta here ! ✌️
Mounting:
- constructor
- getDerivedStateFromProps
- render
- componentDidMount
Updating:
- getDerivedStateFromProps
- shouldComponentUpdate
- render
- getSnapshotBeforeUpdate
- componentDidUpdate
Unmounting:
- componentWillUnmount
Example: Fetch Data when Component is Mounted
The view is a result of your application state !
http://chibicode.com/react-js-introduction-for-people-who-know-just-enough-jquery-to-get-by/
- https://reactjs.org/
- https://reactjs.org/docs/thinking-in-react.html
- https://medium.freecodecamp.com/the-5-things-you-need-to-know-to-understand-react-a1dbd5d114a3
- https://css-tricks.com/projects-need-react/
- http://chibicode.com/react-js-introduction-for-people-who-know-just-enough-jquery-to-get-by/
- https://jquery.com/
- https://medium.freecodecamp.org/yes-react-is-taking-over-front-end-development-the-question-is-why-40837af8ab76
- https://news.ycombinator.com/item?id=19205657
- https://syntax.fm/show/066/the-react-episode
- the internet in general
Learn Es6:
https://es6.io/
React Components mit ES6
http://babeljs.io/blog/2015/06/07/react-on-es6-plus
React written in jQuery
http://hackflow.com/blog/2015/03/08/boiling-react-down-to-few-lines-in-jquery/
Getting Started with Redux
https://egghead.io/courses/getting-started-with-redux
Learn Redux mit WesBos
https://learnredux.com/