- At current folder, open terminal / bash / powershell:
npx create-react-app my-app
- Components are independent and reusable bits of code. They serve the same purpose as JavaScript functions, but work in isolation and return HTML.
- Components come in two types, Class components and Function components, in this tutorial we will concentrate on Function components.
🌻 Create Your First Component
- Class Component
class Car extends React.Component {
render() {
return <h2>Hi, I am a Car!</h2>;
}
}- Function Component
function Car() {
return <h2>Hi, I am a Car!</h2>;
}- Props
- Props are arguments passed into React components.
- Props are passed to components via HTML attributes.
🔥 props stands for properties.
const myElement = <Car brand='Ford' />;function Car(props) {
return <h2>I am a {props.brand}!</h2>;
}- Pass Data
🌻 Example
// Send the "brand" property from the Garage component to the Car component:
function Car(props) {
return <h2>I am a {props.brand}!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand='Ford' />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);🌻 Example
// Create a variable named carName and send it to the Car component:
function Car(props) {
return <h2>I am a {props.brand}!</h2>;
}
function Garage() {
const carName = 'Ford';
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={carName} />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);🌻 Example
// Create an object named carInfo and send it to the Car component:
function Car(props) {
return <h2>I am a {props.brand.model}!</h2>;
}
function Garage() {
const carInfo = { name: 'Ford', model: 'Mustang' };
return (
<>
<h1>Who lives in my garage?</h1>
<Car brand={carInfo} />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);- Components in Components
function Car() {
return <h2>I am a Car!</h2>;
}
function Garage() {
return (
<>
<h1>Who lives in my Garage?</h1>
<Car />
</>
);
}
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Garage />);- Components in Files
- React is all about re-using code, and it is recommended to split your components into separate files.
- To do that, create a new file with a .js file extension and put the code inside it:
🔥 Note that the filename must start with an uppercase character.
// This is the new file, we named it "Car.js":
function Car() {
return <h2>Hi, I am a Car!</h2>;
}
export default Car;// Now we import the "Car.js" file in the application, and we can use the Car component as if it was created here.
import React from 'react';
import ReactDOM from 'react-dom/client';
import Car from './Car.js';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Car />);Install package: At root folder of project, open terminal (Ctrl + ` ), type:
npm install --save prop-types
hoặc
yarn add prop-types
https://www.youtube.com/watch?v=z6tJ5ngiF14&list=PLC3y8-rFHvwg6rjbiMadCILrjh7QkvzoQ
https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
