This document provides an introduction and overview of ReactJS. It discusses that React is a JavaScript library developed by Facebook and Instagram for building user interfaces. It introduces key React concepts like components, props, state, lifecycles, and differences between imperative and declarative programming. It also covers setting up a basic React project using tools like Webpack and Babel and references additional React resources.
2. • Fullstack developer @ GEEKUp
• Love Javascript
Thinh VoXuan
Starting with ReactJS
2
3. • A Facebook & Instagram collaboration.
• Initial release from 2013
• 37.776 Star in GitHub
• A JAVASCRIPT LIBRARY FOR BUILDING
USER INTERFACES
Short Summary
Starting with ReactJS
3
13. • Config .babelrc
• Change run script in package.json
Setup first project
Starting with ReactJS
13
14. • Add html to index.html
• Add script to index.js
Setup first project
Starting with ReactJS
14
15. • Add script to index.js
• Then run npm run start. Check your browser with
address localhost:8080
Setup first project
Starting with ReactJS
15
16. • What is Babel?
• What is Webpack ?
Setup first project - Question
Starting with ReactJS
16
17. props
•Pass from Parent
•Updating from parent
Component
•Could pass from Parent to
Child component
props vs state
Starting with ReactJS
17
state
•Initial value from Parent
•self-update via
this.setState()
•Is private property of
component.
props & state
•Input data for render() function of a Component
•Trigger render update
24. A container does data fetching and then
renders its corresponding sub-component.
That’s it.
Reference:
•https://medium.com/@learnreact/container-components-
c0e67432e005
•https://facebook.github.io/react/docs/thinking-in-react.html
Container vs Presentation
Starting with ReactJS
24
<div>
<h1> this is title </h1>
<p> this is content </p>
<ul>
<li> first element </li>
<li> second element </li>
</ul>
</div>