2.
What Is React JSWhat 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 AppCreating 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.
NpmNpm 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 ReactStructure 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 ComponentsReact 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 ComponentsImport 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.
10.
State And PropsState 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 PropsState 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 PropsState And Props This is how it looks like
13.
Life Cycle MethodsLife 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 ProgressFuture 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.
Thank you for your comment.