React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @...
Transcript of React - usmanlive.com · REACT- A FrontEnd Library Usman Akram CUI LAHORE 2 Developed By Google @...
ReactA FRONTEND LIBRARY
REACT- A FrontEnd Library
Usman Akram http://usmanlive.com CUI LAHORE 2
Developed By Google @ 2009
React Heart
Usman Akram http://usmanlive.com CUI LAHORE 3
Components
Usman Akram http://usmanlive.com CUI LAHORE 4
React Componentclass Tweet extends Component {
state = { }
render() {
return ( );
}
}
Usman Akram http://usmanlive.com CUI LAHORE 5
Virtual DOM
Usman Akram http://usmanlive.com CUI LAHORE 6
We Don’t Do This
Usman Akram http://usmanlive.com CUI LAHORE 7
React Vs Angular
Usman Akram http://usmanlive.com CUI LAHORE 8
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
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
create-react-app Manages
Usman Akram http://usmanlive.com CUI LAHORE 11
Use npm eject for Custom Configurations
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
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
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
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 ?
JSX- JavaScript XML
Usman Akram http://usmanlive.com CUI LAHORE 16
Usman Akram http://usmanlive.com CUI LAHORE 17
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
Full Stack Architecture
Usman Akram http://usmanlive.com CUI LAHORE 19
MERN StackMongo, Express, React, Node
Usman Akram http://usmanlive.com CUI LAHORE 20
https://scotch.io/@deityhub/getting-started-with-the-mern-stack