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.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related searches
- five components of information systems
- key components of information system
- components of an information system
- the four components of information systems
- five components of information system
- components of information technology
- components of strategic management pdf
- components of strategic management process
- components of a website
- components and use of financial analysis
- dow 30 components dividend yield
- major components of strategic management