Starting with Reactjs
Download as PPT, PDF13 likes1,247 views
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.
Starting with Reactjs
- 1. Starting with ReactJS Thinh VoXuan Sprint 2016
- 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
- 4. Create new component Starting with ReactJS 4 Game with: https://facebook.github.io/react/index.html
- 5. Reverse keywork javascript •class className •for forHtml Create new component Starting with ReactJS 5
- 6. Create new component Starting with ReactJS 6 Playground: https://jsfiddle.net/voxuanthinh/w7g5zjLn/1/
- 7. Reactlize from html Starting with ReactJS 7
- 8. Reactlize from html Starting with ReactJS 8
- 9. Reactlize from html Starting with ReactJS 9
- 10. Virtual DOM Starting with ReactJS 10
- 11. • npm install --save react react-dom • npm install --save-dev babel-core babel-loader babel- preset-react html-webpack-plugin webpack webpack-dev-server • Create folder structure as Setup first project Starting with ReactJS 11
- 12. • Config webpack Setup first project Starting with ReactJS 12
- 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
- 18. props vs state Starting with ReactJS 18
- 19. props vs state Starting with ReactJS 19
- 20. LifeCycle of Component Starting with ReactJS 20
- 21. JQuery •A Library •Imperative ways •What problem with jQuery style? Imperative vs Declarative Starting with ReactJS 21 ReactJS •A Library •Declarative ways
- 22. Container vs Presentation Starting with ReactJS 22Play ground: https://jsfiddle.net/voxuanthinh/umx2y5yx/2/
- 23. Container vs Presentation Starting with ReactJS 23Playground: https://jsfiddle.net/reactjs/n47gckhr/
- 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
- 25. React real example Starting with ReactJS 25
- 26. React Ecosystem: •React •Node.JS •Routing with react-router •Flux architecture •Inline styles React More…. Starting with ReactJS 26
- 27. • https://facebook.github.io/ • http://www.reactjsprogram.com/ • http://6.470.scripts.mit.edu/2014/slides/React-MIT.pdf • https://github.com/uberVU/react- guide/blob/master/props-vs-state.md • https://medium.com/@learnreact/container-components- c0e67432e005 • http://www.slideshare.net/krasimirtsonev3/reactjs-the- good-the-bad-and-the-ugly References Starting with ReactJS 27
- 28. Question & Answers Starting with ReactJS 28
- 29. Thank you Starting with ReactJS 29
Editor's Notes
- #5: <div> <h1> this is title </h1> <p> this is content </p> <ul> <li> first element </li> <li> second element </li> </ul> </div>
- #8: childrean