# ReactJS ## An introduction by Ivan Lausuch --- ## Materials https://github.com/ilausuch/training_sessions/tree/main/react email: ilausuch@suse.com --- ## Why ReactJS (my oppinion) - Create dynamic frontends (client-side rendering) - **Uses virtual DOM** = Speed - **Modular**: reusable code and components libraries - **Code complex apps with simplicity and elegance** - **You controls the each re-rendering** --- - Javascript and [JSX](https://reactjs.org/docs/introducing-jsx.html) - No needs nodeJS but could be used with it - Could do Server-side-rendering (SSR) and hybrid (e.g. with [NextJS](https://nextjs.org/)) --- ## Components - A component is the building block - It's a function (or a class for old fasion way) - Always returns JSX code ``` function MyComponent(props){ return ( <h1>Hello, world!</h1>; ) } ``` --- - Could use other componets in its code - Gets the HTML tag attributes as properties (props) - Should have states (a hook) - When a state or props value change will re-render the component - Could have other hooks and you can create others --- ## Let's play