Introduction to ReactJS

Introduction to ReactJS

• 1.  INTRODUCTION TO REACT JS INTRODUCTION TO REACT JS
• 2. What Is React JS What Is React JS React (also known as React.js or ReactJS) is a JavaScript library for building user interfaces. It is maintained by Facebook and a community of individual developers and companies.
• 3. Creating React App Creating React App To create React App first you need to install Node.js module. Then you can create your first react app at command window . After writing this command npx will install necessary things to start your react app .It will take a couple of seconds to create your app .
• 4. Npm Npm Npm is a NodeJS module you have to use to start,build,eject your react app . You can also add additional javascript modules to your react app via Npm for additional modules please check https://www.npmjs.com .
• 5. Launch Your App  Launch Your App This is how your react app will look after you execute npm start command after that you can start building your own app just by editing App.js at your src documantery.
• 6. Structure of React Structure of React Inside in your App.js file you will see code of previous screen that opened in browser . You can change code in here to affect your app’s appearance at browser.
• 7. React Components React Components There is two different type of components in react . One of them is class component that you have to use if you want to use props and states at the same time. Example class component is at right
• 8. Import React Components Import React Components You can create class components and import those into app.js . That means you can create your webpage seperately and merge them later . This way you don’t have to copy-paste code for same things in your website.
• 9. Import React Components Import React Components This is how it looks like.
• 10. State And Props State And Props State is component’s static variables that can change only with setState() function. Changed variable gets rendered as soon as possible.
• 11. State And Props State And Props Props are variables that passed on from parent component . You can pass props then use those props in your child component
• 12. State And Props State And Props This is how it looks like
• 13. Life Cycle Methods Life Cycle Methods Every component in React goes through a lifecycle of events. I like to think of them as going through a cycle of birth, growth, and death. Mounting – Birth of your component Update – Growth of your component Unmount – Death of your component Every component has to use render() life cycle method because it’s required for rendering your code into UI
• 14. Future Progress Future Progress To use react more efficiently you have to learn other libraries for state management like redux , mobx and routers like reach/Router or React’s own router, React Router Dom . Also React is a client side framework .In order to create more interactive applications you have to connect React to a backend technology . You can use Node.js , Python , Php ,Java or anything you can create a server with . Thanks for reading and see you in future lessons.