Combining ReactJS & WordPress

Seeing the trends and adoption craze of Modern JavaScripts all around the world, its necessary to learn it and put it in action! In this talk, we will discuss about a way to use one of the most powerful modern JS languages, REACT!

Transcript

1. Ahmedabad WordPress Meetup Combining ReactJS & WordPress Faisal Alvi
2. Objective:
3. Overview • Why to learn React? • What is React? • Components • Important React Terms. #JSX #Babel #Webpack • Print “Hello World” in WordPress Backend using REACT • What else can we do by combining? • Pros • Cons • Resources
4. Ahmedabad WordPress Meetup Why should I learn REACT?
5. YOU Latest Technologies
6. YOU Latest Technologies
7. Ahmedabad WordPress Meetup Is this a WordPress Meetup? Answer:
9. Ahmedabad WordPress Meetup React
10. Ahmedabad WordPress Meetup IT'S A LANGUAGE
11. A most popular JavaScript LIBRARY
12. User Interface (UI) Library
13. A Tool - for building very fast UI components
14. CREATED BY:
15. Components
16. A Piece of User Interface REUSABLE 1 ROOT COMPONENT
18. Ahmedabad WordPress Meetup
19. Ahmedabad WordPress Meetup FILE ReactDOM RENDER
21. Ahmedabad WordPress Meetup Let’s Combine
22. Objective of Practical - Print “Hello World” with React in WP Backend
23. But first… Know Important Terms Ahmedabad WordPress Meetup
24. var element = <h1>Hello World!</h1> (without quotes)
25. Ahmedabad WordPress Meetup JSX EXAMPLE const element = <h1>Hello World!</h1> JavaScript XML COMBINATION
26. Ahmedabad WordPress Meetup .bablerc JSX Compiler / Translator Plain JavaScript
27. Ahmedabad WordPress Meetup A popular Module Bundler webpack.config.js Bundle (wrap) JavaScript files For usage in a browsers
28. Step 1: Install Node in System Ahmedabad WordPress Meetup
30. Step 2: Create a Setting Page Ahmedabad WordPress Meetup
34. Step 3: Create Required Files Ahmedabad WordPress Meetup
35. 3 Required Files .bablerc package.json webpack.config.js
39. Step 4: Create Components Ahmedabad WordPress Meetup
41. JSX ES5
42. Step 5: Execute Commands Ahmedabad WordPress Meetup
43. ~ npm install package-lock.json node_modules
44. ~ npm run dev
46. Objective Accomplished - Print “Hello World” with React in WP Backend
47. Ahmedabad WordPress Meetup Steps’ Summary Step 1: Install Node in System Step 2: Create a setting page in WordPress Backend having <div id="root"></div>. Step 3: Create required files: package.json | webpack.config.json | .babelrc Step 4: Create Components: index.jsx | helloworld.jsx Step 5: Execute Commands: npm install | npm run dev Step 6: KHO!
48. Ahmedabad WordPress Meetup What else can we do?
49. HEADLESS !!
51. Ahmedabad WordPress Meetup Pros
52. Ahmedabad WordPress Meetup
53. Ahmedabad WordPress Meetup
54. Ahmedabad WordPress Meetup
55. Ahmedabad WordPress Meetup
57. Ahmedabad WordPress Meetup Cons
58. For large projects, Build tools are necessary. ex:
59. Still Developing...
60. Ahmedabad WordPress Meetup Which makes us… Keep Learning!
62. Ahmedabad WordPress Meetup Today’s Session Demo at GitHub https://github.com/faisal-alvi/basic-react-files-for-wordpress/ Boilerplate https://www.codementor.io/victorgerardtemprano/combining-reactjs-and-wordpress-idhdu0v7h Like videos? Go for: Learn React by Mosh Userful Articles https://www.cipherbright.com/blog/how-to-develop-wordpress-plugin-with-react/ https://wp-and-react.com/ https://snipcart.com/blog/reactjs-wordpress-rest-api-example/ React official documentation by React Beginners guide to React by Kent C. Dodds Fundamentals of React by Samer Buna Resources
63. Ahmedabad WordPress Meetup Thank you… Questions..? /_the_faisal /cipherbright_ /faisal-alvi /alvifaisal .com /faisalalvicoder