Introduction to React by Dmitry Grechko

1. Introduction to React

2. • Dmitry Grechko
• Rubizza Mentor and Full-Stack
Developer
• Minsk, Belarus
• Github: mrgrecha

4. What is react?
React is a UI library. It’s all.

5. Why should we use react?
• It’s fast.
• There are many libs to solve your issues.
• It’s quite easy to start.
• Mentors told you to use it.

6. How to start?
• React create app (https://facebook.github.io/create-react-app/
docs/getting-started). For rails: https://medium.com/
@bruno_boehm/reactjs-ruby-on-rails-api-heroku-
app-2645c93f0814
• React gems (https://www.freecodecamp.org/news/how-to-
create-a-rails-project-with-a-react-and-redux-front-
end-8b01e17a1db/)

7. Main concepts
• Components
• JSX
• Props
• State
• Rendering and rerendering
• Lifecycle

8. How does react component
look like?
Class component

9. How does react component
look like?
Function component

10. What is JSX?
It’s just syntax sugar for react.

11. More about JSX
• https://ru.reactjs.org/docs/introducing-jsx.html
• https://habr.com/ru/post/319270/

12. Props
Just parameters that you send from one component
to another

13. Props

14. State

15. Rendering and lifecycle

16. What is DOM?
https://bitsofco.de/what-exactly-is-the-dom/

17. Why React is so fast?

18. When you
try to
realize
everything
that you
have
learned
now

19. What’s next?
Ajax

20. What’s next?
Redux

22. What should I read?
• Official react documentation (https://reactjs.org/). Tutorial +
Docs
• Russian version: https://ru.reactjs.org/docs/getting-
started.html
• Redux documentation(https://redux.js.org/)
• Redux in pictures (https://medium.com/russian/a-cartoon-
intro-to-redux-e2108896f7e6)
• ES6 docs (https://habr.com/ru/post/305900/)