React Components

[Pages:38]React Components

A FRONTEND LIBRARY

Starter Code

There are two projects Vidly and Counter Go to specific folder and run >npm install Then >npm start

Usman Akram

CUI LAHORE

2

Using bootstrap in react app

>npm i bootstrap >npm install font-awesome Then you can use Use below code in either index.js or in any component import "bootstrap/dist/css/bootstrap.css"; import "font-awesome/css/font-awesome.css";

Usman Akram

CUI LAHORE

3

Function and Class Components

function Welcome(props) { return Hello, {props.name}; } class Welcome extends ponent { render() { return Hello, {this.props.name}; } }

Usman Akram

CUI LAHORE

4

Using a Component

Attributes passed to a component are props Props are read only Don't be afraid to split components into smaller components.

Usman Akram

CUI LAHORE

5

HTML ? FancyBorder Tag?

Welcome Thank you for visiting our spacecraft!

Usman Akram

CUI LAHORE

6

FancyBorder

function FancyBorder(props) { return (

{props.children} ); }// Child elements are passed in props.children

Usman Akram

CUI LAHORE

7

Composing Components

function App() { return (

); }

Usman Akram

CUI LAHORE

8

 ................
................

In order to avoid copyright disputes, this page is only a partial summary.

Google Online Preview   Download