react - usmanlive.com · react- a frontend library usman akram cui lahore 2 developed by google @...
TRANSCRIPT
![Page 1: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/1.jpg)
ReactA FRONTEND LIBRARY
![Page 2: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/2.jpg)
REACT- A FrontEnd Library
Usman Akram http://usmanlive.com CUI LAHORE 2
Developed By Google @ 2009
![Page 3: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/3.jpg)
React Heart
Usman Akram http://usmanlive.com CUI LAHORE 3
![Page 4: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/4.jpg)
Components
Usman Akram http://usmanlive.com CUI LAHORE 4
![Page 5: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/5.jpg)
React Componentclass Tweet extends Component {
state = { }
render() {
return ( );
}
}
Usman Akram http://usmanlive.com CUI LAHORE 5
![Page 6: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/6.jpg)
Virtual DOM
Usman Akram http://usmanlive.com CUI LAHORE 6
![Page 7: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/7.jpg)
We Don’t Do This
Usman Akram http://usmanlive.com CUI LAHORE 7
![Page 8: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/8.jpg)
React Vs Angular
Usman Akram http://usmanlive.com CUI LAHORE 8
![Page 9: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/9.jpg)
Development SetupInstall Node, Visual Code
>npm i –g create-react-app
>create-react-app my-first-react-app
>cd my-first-react-app
>npm start
Usman Akram http://usmanlive.com CUI LAHORE 9
![Page 10: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/10.jpg)
Visual Code ExtensionsSimple React Snippets
Prettier
"editor.formatOnSave": true,◦ Add in User Settings
Ayu Mirage Theme “Dark One ”
Usman Akram http://usmanlive.com CUI LAHORE 10
![Page 11: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/11.jpg)
create-react-app Manages
Usman Akram http://usmanlive.com CUI LAHORE 11
Use npm eject for Custom Configurations
![Page 12: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/12.jpg)
Folder Structurenode_modules◦ Node Packages
public◦ Public Assets css, images, icons etc
src◦ React Source Code
index.js◦ Entry Point
Usman Akram http://usmanlive.com CUI LAHORE 12
![Page 13: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/13.jpg)
src/index.js import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: http://bit.ly/CRA-PWA
serviceWorker.unregister();
Usman Akram http://usmanlive.com CUI LAHORE 13
![Page 14: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/14.jpg)
public/index.html<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
Usman Akram http://usmanlive.com CUI LAHORE 14
![Page 15: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/15.jpg)
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return (
<div className="App">
From App Component
</div>
);
}
}
export default App;
Usman Akram http://usmanlive.com CUI LAHORE 15
Strange ?
![Page 16: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/16.jpg)
JSX- JavaScript XML
Usman Akram http://usmanlive.com CUI LAHORE 16
![Page 17: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/17.jpg)
Usman Akram http://usmanlive.com CUI LAHORE 17
![Page 18: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/18.jpg)
Index.js Modifiedimport React from 'react';
import ReactDOM from 'react-dom';
const element = <p>Hello My Class</p>
ReactDOM.render(element, document.getElementById('root'));
Usman Akram http://usmanlive.com CUI LAHORE 18
![Page 19: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/19.jpg)
Full Stack Architecture
Usman Akram http://usmanlive.com CUI LAHORE 19
![Page 20: React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @ 2009](https://reader035.vdocuments.site/reader035/viewer/2022062414/5ee109ccad6a402d666c10bd/html5/thumbnails/20.jpg)
MERN StackMongo, Express, React, Node
Usman Akram http://usmanlive.com CUI LAHORE 20
https://scotch.io/@deityhub/getting-started-with-the-mern-stack