This was my presentation at React Conference Dhaka in 2018. I talked about how I learned Reactjs and what goes into building a React application.

1. The React Way of Doing
Things
@tamalweb

2. My React Story

3. I was a Traditional Web Developer
● Blogging -> Internet Marketing -> Web Dev
● I know how to make simple HTML and PHP
sites
● I have worked with WordPress as a freelancer
● I haven’t used much JavaScript in my work
● Got to hear a lot of buzz about Angular and
React for many years

4. “React”
“You can make apps with React!”
I took a free lesson..

5. React JS File (App.js)

6. What??

8. Class
State
JSX
Props
Children

9. I failed..

10. The End

11. But, I looked again after a year or so..

12. So This is React:

13. Development Tools

14. React Tooling:
● Node, npm (nodejs.org)
● Git bash (git-scm.com)
● VS Code (code.visualstudio.com)
● create-react-app / manual configuration

15. Sample React File

16. React JS File (App.js)

17. React uses Modern JavaScript

18. React Heavily Uses Modern JavaScript

19. <div>html inside JS?</div>

20. React Uses JSX
babeljs.io/repl

21. Hmm.. so I have to learn modern JS.

22. So I Needed To Learn a Lot About Modern JS
● Import/Export
● Class/ JS Inheritance
● Arrow functions ( ) => { }
● this keyword
● Array and Object methods
(map, filter, reduce, forEach)

23. Going back to the React code:

24. create-react-app

25. When you create a new app:
create-react-app
Modules are installed, think it like an SDK (about 100+ MB)

26. Under the
Hood:
It’s just an abstraction
Babel preset env: for converting
modern JS to older JS
Babel preset react: for converting
HTML like JSX into JS
Webpack to help with compressing
and bundling the files
Many more loaders to load CSS,
SASS, images, svgs and other tools

27. Give control to React..

28. Give Control To React:
● React manages the DOM, you don’t change
anything outside of it
● You put all HTML, images, CSS inside JS
(or import it)
● All these files and codes are then bundled into
a single file

29. Final Bundle

30. Components

31. Components:
They are
Uppercase by
convention

32. State

33. State changes the behaviour

35. React watches for changes and then re-renders

36. Event Handlers and Actions

37. In vanilla JS:

39. Working with Backend APIs

40. React Can Be used with Any Backend API
● Node.JS
● PHP
● Ruby on Rails
● Django
● WordPress REST
API
● JQuery $get, $post
● Axios
● fetch( )

42. Posts from WP
backend:

43. Working Example of posting to backend:

44. Simple Reddit Like Site

45. Multi Page Apps:

46. Multiple Pages with React Router

47. So..

48. So, I finally figure out React

49. Final Thoughts

50. React is Complicated at First, But once you get
past the hard parts, you can make truly awesome
app like websites.

51. Tips for Getting Better at React

52. Tips for Getting Better at React
● Use create-react-app a lot
● Build lots of small components
● Experiment with states
● Learn a lot about JavaScript
● React === JavaScript

53. Resources

54. Resources which helped me learn:
● https://reactjs.org/community/courses.html
● DaveCeddia.com
● Pure React ebook from Dave Ceddia

55. Questions?
About React learning?

56. Thank You!
Let’s talk about React after this
tamalweb.com
github.com/tamalweb