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