While brushing up on React... wow, there are a lot of new things now. I also found myself looking at Next.js -- the HOT? framework that wasn't around back in the day, but which by now pretty much every well-known service has adopted and runs on. https://nextjs.org/
Next.js by Vercel - The React Framework
Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build static and dynamic websites and web applications.
nextjs.org
While reading through the official docs, I ran into a phrase worthy of a "wow" -- which was, aim to improve the Developer Experience .
User experience... but before that, developer experience. Ah, so this is why people keep saying "Next.js, Next.js" -- the view is different. As a TMI, the official Next.js site itself is user-friendly. And the UX writing you encounter in their learn track is simply top-tier.
As I was following along, I'm also noting some extra research links and memos I picked up.
From JavaScript to React
01. React: A declarative UI library
https://sung-studynote.tistory.com/m/109
Declarative vs Imperative
Declarative: listing how you want a task to proceed. Languages: Haskell, HTML, SQL, etc. Imperative: defining how to carry out a task. Languages: Java, C, etc.
sung-studynote.tistory.com
02. ReactDom
1) BabelScript
<html>
<body>
<div id="app"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<!-- Babel Script -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/jsx">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. ?</h1>, app);
</script>
</body>
</html>2) JavaScript
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script type="text/javascript">
// Select the div element with 'app' id
const app = document.getElementById('app');
// Create a new H1 element
const header = document.createElement('h1');
// Create a new text node for the H1 element
const headerContent = document.createTextNode(
'Develop. Preview. Ship. ?',
);
// Append the text to the H1 element
header.appendChild(headerContent);
// Place the H1 element inside the div
app.appendChild(header);
</script>
</body>
</html>
03. Essential JavaScript for React
Functions and Arrow Functions
Objects
Arrays and array methods
Destructuring
Template literals
Ternary Operators
ES Modules and Import / Export Syntax
04. React Core Concepts
Components
Props
State
05. Props used that adding attributes to HTML elements for in React
1) warning code
function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
return (
<div>
<Header title="Develop. Preview. Ship. ?" />
<ul>
{names.map((name) => (
<li>{name}</li>
))}
</ul>
</div>
);
}If you run this code, React will give us a warning about a missing key prop. This is because React needs something to uniquely identify items in an array so it knows which elements to update in the DOM.
2) correct code
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
06. State and Hooks
React has a set of functions called hooks. Hooks allow you to add additional logic such as state to your components.
You can use state to store and increment the number of times a user has clicked the like button. In fact, this is what the React hook to manage state is called: useState()
function HomePage() {
// ...
const [likes, setLikes] = useState()
function handleClick() {
setLikes(likes + 1)
}}
return (
<div>
{/* ... */}
<button onClick={handleClick}>Likes ({likes})</button>
</div>
)
}From React to Next.js
To add Next.js to your project, you will not need to load the react and react-dom scripts from unpkg.com anymore. Instead, you can install these packages locally using the Node Package Manager: npm.
Hmm... as expected, 티스토리 is awkward to write in, so...
...I'm moving back to Notion to organize it there. T_T
https://www.notion.so/thinknormal/next-js-854a71ca3d9c41aa841957c15004a1c5
next.js
From JavaScript to React
www.notion.so
