Why JavaScript? • It’s pretty much everywhere • It’s very easy for the new learner • It’s fun • It’s powerful • Powerful & free frameworks and libraries • High demand in the current job market Why ReactJS? • A declarative, efficient, and flexible JavaScript library for building user interfaces • View ( V ) of MVC architecture • Developed by Facebook

1. GETTING STARTED WITH
&

2. About Me
Iftekher Islam Sunny
Senior Software Engineer @ ThemeXpert
https://www.linkedin.com/in/iftekhersunny
iftekhersunny@gmail.com

3. Why JavaScript
§ It’s pretty much everywhere
§ It’s very easy for the new learner
§ It’s fun
§ It’s powerful
§ Powerful & free frameworks and libraries
§ High demand in the current job market

4. A Little History
§ JavaScript was created by Brendan Eich in 1995
§ Inspired by Java, Scheme and Self
§ Currently trademark by Oracle

5. JavaScript Basic

6. JavaScript Basic ( continued… )

7. JavaScript Basic ( continued… )

8. JavaScript Basic ( continued… )

9. JavaScript Basic ( continued… )

10. JavaScript Basic ( continued… )

11. JavaScript Basic ( continued… )

12. JavaScript Basic ( continued… )

13. JavaScript Basic ( continued… )

14. JavaScript Basic ( continued… )

15. JavaScript Basic ( continued… )

16. JavaScript Basic ( continued… )

17. JavaScript Basic ( continued… )

18. JavaScript Basic ( continued… )

19. JavaScript Basic ( continued… )

20. JavaScript Basic ( continued… )

21. JavaScript Basic ( continued… )

22. JavaScript Basic ( continued… )

23. What Is ReactJS
§ A declarative, efficient, and flexible JavaScript library for
building user interfaces
§ View ( V ) of MVC architecture
§ Developed by Facebook

24. Who Uses ReactJS

25. Component
Self-contained reusable building blocks
of
web application

26. Component ( Example )

27. Props
Passing custom data to your ReactJS component.
Accessed via this.props

28. Props ( Example )

29. State
Represent internal state of your component. When
state will change the render method will re-invoke.
Accessed via this.state

30. State ( Example )

31. State ( Example )

32. State ( Example )

33. Parent-Child Component

34. Parent-Child Component ( On Browser )

35. Resources
§ Basic JavaScript
1. http://speakingjs.com/es5
2. https://babeljs.io
3. https://www.udemy.com/understand-javascript
§ ReactJS
1. https://reactjs.org/docs
2. https://egghead.io/courses/start-learning-react
3. https://github.com/facebook/create-react-app
§ Helpful Libraries For Your Daily Project
1. https://www.udemy.com/react-redux
2. https://github.com/ReactTraining/react-router
3. https://ant.design
4. https://mobx.js.org/getting-started.html
5. https://redux-form.com/7.3.0

36. Let’s Start Building ReactJS App
https://github.com/facebook/create-react-app
• npx create-react-app my-app
• cd my-app
• npm start