import is the contemporary ES6 method for module importing, widely supported in modern JavaScript environments such as browsers and Node.js (with configuration). It enables better code structure, facilitates tree shaking for smaller bundles, and aligns with modern coding practices.
require is the CommonJS approach traditionally used in Node.js before ES6 modules.
type this on the terminal
npx create-react-app my-appcd my-appnpm startReact heavily favors import due to its readability, maintainability, and compatibility with modern JavaScript standards.
var React = require("react");
var ReactDOM = require("react-dom");import React from "react";
import ReactDOM from "react-dom";to write more than one html elements, use a div
ReactDOM.render(
<div>
...
</div>,
document.getElementById("root")
);ReactDOM.render(WHAT TO SHOW, WHERE TO SHOW);
eg:
ReactDOM.render(<h1>Hello World!</h1>, document.getElementById("root"));*js inside of html
Generate a random number
import React from "react";
import ReactDOM from "react-dom";
ReactDOM.render(
<div>
<p>Your lucky number is {Math.floor(Math.random() * 10)}</p>
</div>,
document.getElementById("root")
);const keyword
import React from "react";
import ReactDOM from "react-dom";
const fname = "Trixie";
const lname = "Dee";
ReactDOM.render(
<div>
<h1>Hello {fname} {lname}!</h1>
</div>,
document.getElementById("root")
);also we can combine consts like this
<h1>Hello {`${fname} ${lname}`}!</h1>to get the current date, we use new Date
var React = require("react");
var ReactDOM = require("react-dom");
const currentDate = new Date();
const year = currentDate.getFullYear();
ReactDOM.render(
<div>
<p>Copyright {year}</p>
</div>,
document.getElementById("root")
);to add css import css file to js file
import "./styles.css";Using className in JSX allows developers to define HTML classes without conflicting with the class keyword in JavaScript, ensuring consistency in JSX syntax and avoiding potential issues with the JavaScript language.
we can use contentEditable to edit contents
<h1 className="heading" contentEditable="true">add random images (from lorem picsum)
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const img = "https://picsum.photos/200";
ReactDOM.render(
<div>
<h1 className="heading">My favourite foods</h1>
<img src={img} alt="" />
</div>,
document.getElementById("root")
);for gray images
<img src={img + "?grayscale"} alt="" />in html file:
<div id="root">
<img src="https://picsum.photos/200" alt="" />
</div>Create an object and add it in html elements. When we use style properties in js, we use camel-case.
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const customStyle = {
color: "red",
fontSize: "20px",
border: "1px solid black",
};
ReactDOM.render(
<div>
<h1 style={customStyle}>Hello I'm Trixie Dee</h1>
</div>,
document.getElementById("root")
);We can call properties by using object name
customStyle.color = "blue";color change with time
import React from "react";
import ReactDOM from "react-dom";
import "./styles.css";
const date = new Date();
const currentTime = date.getHours();
let greeting;
const customStyle = {
color: "",
};
if (currentTime < 12) {
greeting = "Good Morning!";
customStyle.color = "red";
} else if (currentTime < 18) {
greeting = "Good Afternoon!";
customStyle.color = "green";
} else {
greeting = "Good Night!";
customStyle.color = "blue";
}
ReactDOM.render(
<div>
<h1 className="heading" style={customStyle}>
{greeting}
</h1>
</div>,
document.getElementById("root")
);css:
.heading {
font-size: 50px;
font-weight: bold;
border-bottom: 5px solid black;
}- Create a new .jsx file
importreact- create the function
exportthe function
import React from "react";
function List() {
return (
<ul>
<li>Trixie</li>
<li>Dee</li>
<li>Luffy</li>
</ul>
);
}
export default List;- 'import' .jsx file to .js file
- call the function
import React from "react";
import ReactDOM from "react-dom";
import List from "./List";
ReactDOM.render(
<div>
<List />
</div>,
document.getElementById("root")
);We can write the above code like this
- Create
App.jsxfile
import React from "react";
import Heading from "./Heading";
import List from "./List";
function App() {
return (
<div>
<Heading />
<List />
</div>
);
}
export default App;- 'import' 'App' to .js file and declare it
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App />, document.getElementById("root"));math.js
const pi = 3.1415962;
export default pi;'import' pi to imdex.js
import React from "react";
import ReactDOM from "react-dom";
import pi from "./math";
ReactDOM.render(
<ul>
<li>{pi}</li>
<li>2</li>
<li>3</li>
</ul>,
document.getElementById("root")
);When we use multiple functions, this is how we import those functions, math.js
const pi = 3.1415962;
function doublePi() {
return pi * 2;
}
function triplePi() {
return pi * 3;
}
export default pi;
export { doublePi, triplePi };declare functions with () index.js
import React from "react";
import ReactDOM from "react-dom";
import pi, { doublePi, triplePi } from "./math";
ReactDOM.render(
<ul>
<li>{pi}</li>
<li>{doublePi()}</li>
<li>{triplePi()}</li>
</ul>,
document.getElementById("root")
);math.js
function add(x, y) {
return x + y;
}
function multiply(x, y) {
return x * y;
}
function subtract(x, y) {
return x - y;
}
function divide(x, y) {
return x / y;
}
export { add, multiply, subtract, divide };index.js
import React from "react";
import ReactDOM from "react-dom";
import { add, multiply, subtract, divide } from "./math";
ReactDOM.render(
<ul>
<li>{add(1, 2)}</li>
<li>{multiply(2, 3)}</li>
<li>{subtract(7, 2)}</li>
<li>{divide(5, 2)}</li>
</ul>,
document.getElementById("root")
);- we can use
wildcardin index.js;
import React from "react";
import ReactDOM from "react-dom";
import * as Calculator from "./math";
ReactDOM.render(
<ul>
<li>{Calculator.add(1, 2)}</li>
<li>{Calculator.multiply(2, 3)}</li>
<li>{Calculator.subtract(7, 2)}</li>
<li>{Calculator.divide(5, 2)}</li>
</ul>,
document.getElementById("root")
);