Check for Existing Version
node --version
npm --version
Installation
Create Starter Code
npm init react-app app_name
OR
npm init react-app .
Run app
npm start
Build App
npm run build
Component
[App.js]
function Heading(){
return (
<h1>This is Heading</h1>
)
}
function App() {
return (
<div className = "App">
<Heading />
This is an App
</div>
)
}
export default App;
Export
Default Exports
[func.js]
export defauly function func(){
console.log("This is a function");
}
OR
function func(){
console.log("This is a function");
}
export default func;
Named Exports
export function func1(){
console.log("This is function 1");
}
export function func2(){
console.log("This is function 2");
}
OR
function func1(){
console.log("This is function 1");
}
function func2(){
console.log("This is function 2");
}
export {function1, function2};
Import
import func from "./func";
OR
import {func} from "./func";
props
[App.js]
import Person from "./Person"
function App() {
return (
<div className = "App">
<Person name = "Henry" />
</div>
)
}
export default App;
[Person.js]
function Person(props) {
return (
<p>Hello, {props.name}!</p>
)
}
export default Person;
Embedded JSX Expressions
const result = <p>Hello, Henry!</p>;
function hello(name) {
return (
"Hello, " + name + "!";
)
}
const result = <p>{hello("Henry")}</p>;
const url = "photo.jpg";
const result = <img src= {url}></img>;
Styling JSX Elements
function Person() {
return (
<div className = "hello">
<p>Hello, World!</p>
</div>
)
}
//CSS
.hello{
font-weight: bold;
font-size: 16pt;
}
function Person() {
return (
<div>
<p style={{fontWeight:"bold",fontSize: "16pt"}}>Hello, World!</p>
</div>
)
}
const helloStyle = {
fontWeight:"bold",
fontSize: "16pt"
}
function Person() {
return (
<div>
<p style={helloStyle}>Hello, World!</p>
</div>
)
}
Arrow Function
function Hello(prop) {
return (
<p>Hello, {prop.name}!<p>
)
}
const Hello = function(props){
return(
<p>Hello, {props.name}!<p>
)
}
const Hello = props =>{
return(
<p>Hello, {props.name}!<p>
)
}
If the Hello component does not have parameter
const Hello = () =>{
return(
<p>Hello, World!<p>
)
}
If only one line of code
const Hello = () => <p>Hello, World!<p>
Passing Data
[App.js]
import Person from "./Person"
const name ={
first: "Huo"
last: "Chen"
}
function App() {
return (
<div className = "App">
<Person
first = {name.first}
last = {name.last}
/>
</div>
)
}
export default App;
[Person.js]
function Person(props) {
return (
<p>Hello, {props.first} {props.last}!</p>
)
}
export default Person;