This Next.js slide is for the short introduction.
Next.js is a react framework for projection. Some people call it as a full stack react framework. Because we can write both client and server side code on it.
NextJS - Online Summit for Frontend Developers September 2020Milad Heydari
Developers may think launching SSR application with react must be painful. In this talk, i was describe a simple SSR method, does a deep dive into SSR with Next.js, and how i using it. it's about some useful tips about challenges, optimizations, writing clean codes beside do’s and don’ts in Next.js and cover many of the Next.js features to accomplish a great website application with acceptable performance and speed.
React Global Online Summit for Frontend Developers.
September 2020
https://react.geekle.us/september-2020
https://youtu.be/fkp5_5rezsE
This Next.js slide is for the short introduction.
Next.js is a react framework for projection. Some people call it as a full stack react framework. Because we can write both client and server side code on it.
NextJS - Online Summit for Frontend Developers September 2020Milad Heydari
Developers may think launching SSR application with react must be painful. In this talk, i was describe a simple SSR method, does a deep dive into SSR with Next.js, and how i using it. it's about some useful tips about challenges, optimizations, writing clean codes beside do’s and don’ts in Next.js and cover many of the Next.js features to accomplish a great website application with acceptable performance and speed.
React Global Online Summit for Frontend Developers.
September 2020
https://react.geekle.us/september-2020
https://youtu.be/fkp5_5rezsE
React Js Basic Details and Descriptions
Frontend Javascript Library, to make decent SPA
The fastest way to build a segregated component based front end for software development.
Come see how easy it is to build fast, accurate, and responsive web UIs using the React library. Even if you’ve never written Javascript before, React’s straightforward syntax can get you started with your UI project quickly. In this session, you’ll learn about React’s declarative syntax and state representation, explore some of the basic components that are used to build sophisticated UIs, and leave with a foundational application you can continue to build on.
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.
Introduction to web development🌐: HTML, CSS, and JavaScript
Problems with traditional approaches to web development 🤔
Introduction to ReactJS ⚛️: What is React, and why use it for modern web development?
Building a simple web application with React🧑🏻💻👩🏻💻
React Js Basic Details and Descriptions
Frontend Javascript Library, to make decent SPA
The fastest way to build a segregated component based front end for software development.
Come see how easy it is to build fast, accurate, and responsive web UIs using the React library. Even if you’ve never written Javascript before, React’s straightforward syntax can get you started with your UI project quickly. In this session, you’ll learn about React’s declarative syntax and state representation, explore some of the basic components that are used to build sophisticated UIs, and leave with a foundational application you can continue to build on.
Plain React detects changes by re-rendering your whole UI into a virtual DOM and then comparing it to the old version. Whatever changed, gets patched to the real DOM.
Getting started with the reactjs, basics of reactjs, introduction of reactjs, core concepts of reactjs and comparison with the other libraries/frameworks
React (or React Js) is a declarative, component-based JS library to build SPA(single page applications) which was created by Jordan Walke, a software engineer at Facebook. It is flexible and can be used in a variety of projects.
Introduction to web development🌐: HTML, CSS, and JavaScript
Problems with traditional approaches to web development 🤔
Introduction to ReactJS ⚛️: What is React, and why use it for modern web development?
Building a simple web application with React🧑🏻💻👩🏻💻
What is Server-side Rendering? How to Render Your React App on the Server-sid...Shelly Megan
Server-side rendering using React is a modern concept used by several app development companies. This blog explains the importance of rendering React apps on the server-side. It also explains the pros and cons of doing so. Besides, it helps the ReactJS developers know the basic process of rendering apps on the server-side.
Why do we use react JS on the website_.pdfnearlearn
React is a JavaScript library for building user interfaces. It is widely used in web development for creating interactive and reusable UI components. Some of the key benefits of using React are:
Performance and Scalability Art of Isomorphic React ApplicationsDenis Izmaylov
A couple weeks ago I have talked at React Amsterdam Meetup about Performance and Scalability of Isomorphic React Application.
Have a look at the video from this talk: https://www.youtube.com/watch?list=PLNBNS7NRGKMGLeJj3cuE4JDqJ0_9xAbZV&v=kI19MCP-wIE
Next JS vs React: Which is the best framework for front-end development? Here you can read the difference, advantages, and disadvantages of Next Js and React.
For More Information: https://www.albiorixtech.com/blog/nextjs-vs-react/
The Best Guide to Know What, Why, When to Use Is ReactJSWeblineIndia
We have prepared this guide for people who are starting with React. Read the complete post to know what, why, when to use ReactJS. Read more https://www.weblineindia.com/blog/everything-you-should-know-about-reactjs/
Boost Startup Success: Hire Skilled ReactJS Developers TodayBOSC Tech Labs
Skip tech stack struggles! Power your startup with ReactJS. Build fast, scalable apps for better growth & performance. Hire Skilled ReactJS Developers now!
React Js vs Node Js_ Which Framework to Choose for Your Next Web Applicationadityakumar2080
React js is more of a JavaScript library than a framework that is developed and maintained by Facebook. Initially released in May 2013, it is a tool for building UI components. React js has an MVC or Model View Controller architecture. Node js is an open-source Google Chrome v8 JavaScript framework. The main idea of developing applications in Node js is to execute JavaScript on the server-side.
React Native Market is a platform where developers can buy and sell React Native components, templates, and themes. It offers a wide range of high-quality assets that can be used to build mobile applications for iOS and Android platforms. Users can browse through the collection of products, preview demos, and read reviews from other developers before making a purchase. Sellers can also create and sell their own products on the platform, gaining exposure and earning income for their work. Overall, React Native Market is a valuable resource for developers looking to enhance their mobile app development projects.
Sulok Jha and Ramani Iyengar, engineers at Atlogys Technical Consulting deliver a very informative talk on reactJS - what it is, how to use it, when to use it etc.
This is a must watch for anyone wanting to get started with .reactJS technology.
Vered Flis: Because performance matters! Architecture Next 20CodeValue
“If your website takes longer than 3 seconds to load, you could already be losing nearly half of your visitors”
Performance is one of the most critical aspects of any web project and plays a major role in the success of any online venture. Your site may have the best services, products, and content found on the web, but if your site performance is off, you’re hurting your brand and driving users to the competition.
How can we make sure that performance is not going to hold us back from success?
Join me in this session as we tackle these big questions head-on and unravel different approaches and practices that will assist you in writing highly performant web apps as is expected today.
DevOps and Testing slides at DASA ConnectKari Kakkonen
My and Rik Marselis slides at 30.5.2024 DASA Connect conference. We discuss about what is testing, then what is agile testing and finally what is Testing in DevOps. Finally we had lovely workshop with the participants trying to find out different ways to think about quality and testing in different parts of the DevOps infinity loop.
GraphRAG is All You need? LLM & Knowledge GraphGuy Korland
Guy Korland, CEO and Co-founder of FalkorDB, will review two articles on the integration of language models with knowledge graphs.
1. Unifying Large Language Models and Knowledge Graphs: A Roadmap.
https://arxiv.org/abs/2306.08302
2. Microsoft Research's GraphRAG paper and a review paper on various uses of knowledge graphs:
https://www.microsoft.com/en-us/research/blog/graphrag-unlocking-llm-discovery-on-narrative-private-data/
GDG Cloud Southlake #33: Boule & Rebala: Effective AppSec in SDLC using Deplo...James Anderson
Effective Application Security in Software Delivery lifecycle using Deployment Firewall and DBOM
The modern software delivery process (or the CI/CD process) includes many tools, distributed teams, open-source code, and cloud platforms. Constant focus on speed to release software to market, along with the traditional slow and manual security checks has caused gaps in continuous security as an important piece in the software supply chain. Today organizations feel more susceptible to external and internal cyber threats due to the vast attack surface in their applications supply chain and the lack of end-to-end governance and risk management.
The software team must secure its software delivery process to avoid vulnerability and security breaches. This needs to be achieved with existing tool chains and without extensive rework of the delivery processes. This talk will present strategies and techniques for providing visibility into the true risk of the existing vulnerabilities, preventing the introduction of security issues in the software, resolving vulnerabilities in production environments quickly, and capturing the deployment bill of materials (DBOM).
Speakers:
Bob Boule
Robert Boule is a technology enthusiast with PASSION for technology and making things work along with a knack for helping others understand how things work. He comes with around 20 years of solution engineering experience in application security, software continuous delivery, and SaaS platforms. He is known for his dynamic presentations in CI/CD and application security integrated in software delivery lifecycle.
Gopinath Rebala
Gopinath Rebala is the CTO of OpsMx, where he has overall responsibility for the machine learning and data processing architectures for Secure Software Delivery. Gopi also has a strong connection with our customers, leading design and architecture for strategic implementations. Gopi is a frequent speaker and well-known leader in continuous delivery and integrating security into software delivery.
JMeter webinar - integration with InfluxDB and GrafanaRTTS
Watch this recorded webinar about real-time monitoring of application performance. See how to integrate Apache JMeter, the open-source leader in performance testing, with InfluxDB, the open-source time-series database, and Grafana, the open-source analytics and visualization application.
In this webinar, we will review the benefits of leveraging InfluxDB and Grafana when executing load tests and demonstrate how these tools are used to visualize performance metrics.
Length: 30 minutes
Session Overview
-------------------------------------------
During this webinar, we will cover the following topics while demonstrating the integrations of JMeter, InfluxDB and Grafana:
- What out-of-the-box solutions are available for real-time monitoring JMeter tests?
- What are the benefits of integrating InfluxDB and Grafana into the load testing stack?
- Which features are provided by Grafana?
- Demonstration of InfluxDB and Grafana using a practice web application
To view the webinar recording, go to:
https://www.rttsweb.com/jmeter-integration-webinar
Key Trends Shaping the Future of Infrastructure.pdfCheryl Hung
Keynote at DIGIT West Expo, Glasgow on 29 May 2024.
Cheryl Hung, ochery.com
Sr Director, Infrastructure Ecosystem, Arm.
The key trends across hardware, cloud and open-source; exploring how these areas are likely to mature and develop over the short and long-term, and then considering how organisations can position themselves to adapt and thrive.
UiPath Test Automation using UiPath Test Suite series, part 4DianaGray10
Welcome to UiPath Test Automation using UiPath Test Suite series part 4. In this session, we will cover Test Manager overview along with SAP heatmap.
The UiPath Test Manager overview with SAP heatmap webinar offers a concise yet comprehensive exploration of the role of a Test Manager within SAP environments, coupled with the utilization of heatmaps for effective testing strategies.
Participants will gain insights into the responsibilities, challenges, and best practices associated with test management in SAP projects. Additionally, the webinar delves into the significance of heatmaps as a visual aid for identifying testing priorities, areas of risk, and resource allocation within SAP landscapes. Through this session, attendees can expect to enhance their understanding of test management principles while learning practical approaches to optimize testing processes in SAP environments using heatmap visualization techniques
What will you get from this session?
1. Insights into SAP testing best practices
2. Heatmap utilization for testing
3. Optimization of testing processes
4. Demo
Topics covered:
Execution from the test manager
Orchestrator execution result
Defect reporting
SAP heatmap example with demo
Speaker:
Deepak Rai, Automation Practice Lead, Boundaryless Group and UiPath MVP
Connector Corner: Automate dynamic content and events by pushing a buttonDianaGray10
Here is something new! In our next Connector Corner webinar, we will demonstrate how you can use a single workflow to:
Create a campaign using Mailchimp with merge tags/fields
Send an interactive Slack channel message (using buttons)
Have the message received by managers and peers along with a test email for review
But there’s more:
In a second workflow supporting the same use case, you’ll see:
Your campaign sent to target colleagues for approval
If the “Approve” button is clicked, a Jira/Zendesk ticket is created for the marketing design team
But—if the “Reject” button is pushed, colleagues will be alerted via Slack message
Join us to learn more about this new, human-in-the-loop capability, brought to you by Integration Service connectors.
And...
Speakers:
Akshay Agnihotri, Product Manager
Charlie Greenberg, Host
Encryption in Microsoft 365 - ExpertsLive Netherlands 2024Albert Hoitingh
In this session I delve into the encryption technology used in Microsoft 365 and Microsoft Purview. Including the concepts of Customer Key and Double Key Encryption.
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Tobias Schneck
As AI technology is pushing into IT I was wondering myself, as an “infrastructure container kubernetes guy”, how get this fancy AI technology get managed from an infrastructure operational view? Is it possible to apply our lovely cloud native principals as well? What benefit’s both technologies could bring to each other?
Let me take this questions and provide you a short journey through existing deployment models and use cases for AI software. On practical examples, we discuss what cloud/on-premise strategy we may need for applying it to our own infrastructure to get it to work from an enterprise perspective. I want to give an overview about infrastructure requirements and technologies, what could be beneficial or limiting your AI use cases in an enterprise environment. An interactive Demo will give you some insides, what approaches I got already working for real.
Dev Dives: Train smarter, not harder – active learning and UiPath LLMs for do...UiPathCommunity
💥 Speed, accuracy, and scaling – discover the superpowers of GenAI in action with UiPath Document Understanding and Communications Mining™:
See how to accelerate model training and optimize model performance with active learning
Learn about the latest enhancements to out-of-the-box document processing – with little to no training required
Get an exclusive demo of the new family of UiPath LLMs – GenAI models specialized for processing different types of documents and messages
This is a hands-on session specifically designed for automation developers and AI enthusiasts seeking to enhance their knowledge in leveraging the latest intelligent document processing capabilities offered by UiPath.
Speakers:
👨🏫 Andras Palfi, Senior Product Manager, UiPath
👩🏫 Lenka Dulovicova, Product Program Manager, UiPath
Securing your Kubernetes cluster_ a step-by-step guide to success !KatiaHIMEUR1
Today, after several years of existence, an extremely active community and an ultra-dynamic ecosystem, Kubernetes has established itself as the de facto standard in container orchestration. Thanks to a wide range of managed services, it has never been so easy to set up a ready-to-use Kubernetes cluster.
However, this ease of use means that the subject of security in Kubernetes is often left for later, or even neglected. This exposes companies to significant risks.
In this talk, I'll show you step-by-step how to secure your Kubernetes cluster for greater peace of mind and reliability.
Transcript: Selling digital books in 2024: Insights from industry leaders - T...BookNet Canada
The publishing industry has been selling digital audiobooks and ebooks for over a decade and has found its groove. What’s changed? What has stayed the same? Where do we go from here? Join a group of leading sales peers from across the industry for a conversation about the lessons learned since the popularization of digital books, best practices, digital book supply chain management, and more.
Link to video recording: https://bnctechforum.ca/sessions/selling-digital-books-in-2024-insights-from-industry-leaders/
Presented by BookNet Canada on May 28, 2024, with support from the Department of Canadian Heritage.
3. INTRODUCTION
Server-Side Rendering (SSR)is
a technique that allows your
web application to pre-render
HTML on a server,providing
faster load times and a better
user experience.In this tutorial,
we'll cover Next.js,a framework
for building server-rendered
React applications.
Binumon Joseph, Assistant Professor 3
4. WhyUseSSR?
SSR can improve SEO,performance,
and user experience. It allows search
engines to better crawl your site,
reduces the time to first paint,and
provides users with a fully rendered
page on the initial load. Next.js
simplifies the process of building
SSR applications.
Binumon Joseph, Assistant Professor 4
5. GETTINGSTARTEDWITHNEXT.JS
To get started with Next.js,you'll
need to install it and create a
new project.Next.js provides
several built-in features,such as
dynamic imports,automatic
code splitting,and server-side
rendering.You can also easily
add custom routes and API
endpoints.
Binumon Joseph, Assistant Professor 5
6. T
o build pages with Next.js,you'll
create a pages directory and add
React components for each page.
Next.js uses getI
nitialProps to
fetch data and render the page on
the server.You can also use
dynamic routing and static site
generation to optimize
performance.
BUILDINGPAGESWITHNEXT.JS
Binumon Joseph, Assistant Professor 6
7. Deploying
Your
Next.js
App
Next.js makes it easy to deploy
your app to Vercel,a cloud
platform for static and serverless
sites.Vercel provides automatic
SSL,custom domains,and
global CDN.You can also deploy
to other platforms such as
Heroku or AWS.
Binumon Joseph, Assistant Professor 7
DeployingYourNext.jsApp
8. Next.js provides a powerful framework for building
server-rendered React applications. By using SSR,
you can improve SEO, performance, and user
experience. With Next.js, you can easily create
dynamic routes, API endpoints, and deploy your app
to the cloud. Keep learning and building!
CONCLUSION
Binumon Joseph, Assistant Professor 8
9. Building Blocks of a Web Application
• User Interface - how users will consume and interact with your application.
• Routing - how users navigate between different parts of your application.
• Data Fetching - where your data lives and how to get it.
• Rendering - when and where you render static or dynamic content.
• Integrations - what third-party services you use (CMS, auth, payments, etc) and how
you connect to them.
• Infrastructure - where you deploy, store, and run your application code (Serverless,
CDN, Edge, etc).
• Performance - how to optimize your application for end-users.
• Scalability - how your application adapts as your team, data, and traffic grow.
• Developer Experience - your team’s experience building and maintaining your
application. 9
Binumon Joseph, Assistant Professor
10. React ?
Interactive User Interface
• JavaScript library for building
interactive user interfaces.
• User interfaces, - Elements that
users see and interact with on-
screen.
• Library - React provides helpful
functions to build UI, but leaves it up
to the developer where to use those
functions in their application.
10
Binumon Joseph, Assistant
Professor
11. Next.js?
• React framework that gives you building blocks to create web
applications.
• Framework - Next.js handles the tooling and configuration needed
for React, and provides additional structure, features, and
optimizations for your application.
11
Binumon Joseph, Assistant Professor
15. UI update with
JavaScript
• Create new file 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>
15
Binumon Joseph, Assistant
Professor
16. Imperative vs Declarative Programming
• Imperative programming is like giving a chef step-by-step instructions
on how to make a pizza.
• Declarative programming is like ordering a pizza without being
concerned about the steps it takes to make the pizza.
• React is a Declarative Library
16
Binumon Joseph, Assistant Professor
17. Imperative vs Declarative Programming
• Imperative programming is like giving a chef step-by-step instructions
on how to make a pizza.
• Declarative programming is like ordering a pizza without being
concerned about the steps it takes to make the pizza.
• React is a Declarative Library
17
Binumon Joseph, Assistant Professor
18. Getting Started
with React
• To use React in your project,
you can load two React scripts
from an external website
called unpkg.com:
• react is the core React library.
• react-dom provides DOM-
specific methods that enable
you to use React with the DOM.
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script
src="https://unpkg.com/react@17/umd/react.dev
elopment.js"></script>
<script src="https://unpkg.com/react-
dom@17/umd/react-
dom.development.js"></script>
<script type="text/javascript">
const app = document.getElementById('app');
</script>
</body>
</html>
18
Binumon Joseph, Assistant Professor
19. Rendering React
• Instead of directly manipulating
the DOM with plain JavaScript,
you can use the
ReactDOM.render() method
from react-dom to tell React to
render our <h1> title inside our
#app element.
<!-- index.html -->
<html>
<body>
<div id="app"></div>
<script
src="https://unpkg.com/react@17/umd/react.dev
elopment.js"></script>
<script src="https://unpkg.com/react-
dom@17/umd/react-
dom.development.js"></script>
<script type="text/javascript">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship.
</h1>, app);
</script>
</body>
</html>
19
Binumon Joseph, Assistant Professor
20. JSX- JavaScript
Syntax Extension
• JSX is a syntax extension for JavaScript
that allows you to describe your UI in a
familiar HTML-like syntax.
• The nice thing about JSX is that apart from
following three JSX rules, you don’t need
to learn any new symbols or syntax outside
of HTML and JavaScript.
• Note that browsers don’t understand JSX
out of the box, so you’ll need a JavaScript
compiler, such as a Babel, to transform
your JSX code into regular JavaScript.
<html>
<body>
<div id="app"></div>
<script
src="https://unpkg.com/react@17/umd/react.developm
ent.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.j
s"></script>
<script type="text/jsx">
const app = document.getElementById('app');
ReactDOM.render(<h1>Develop. Preview. Ship. </h1>,
app);
</script>
</body>
</html>
20
Binumon Joseph, Assistant Professor
21. React Core Concepts
Components
User interfaces can
be broken down into
smaller building
blocks
Props State
21
Binumon Joseph, Assistant Professor
23. Component
• Creating components
• In React, components are functions. Inside
your script tag, write a function called
Header
<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>
<script
src="https://unpkg.com/@babel/standalone/babel.min.js"></scr
ipt>
<script type="text/jsx">
const app = document.getElementById('app');
function Header() {
return <h1>Develop. Preview. Ship. </h1>;
}
ReactDOM.render(<Header />, app);
</script>
</body>
</html>
23
Binumon Joseph, Assistant Professor
24. Nesting
Components
• Applications usually include more
content than a single component. You
can nest React components inside
each other like you would regular
HTML elements.
<script type="text/jsx">
const app = document.getElementById('app');
function Header() {
return <h1>Develop. Preview. Ship. </h1>;
}
function HomePage() {
return ( <div> <Header /> </div> );
}
ReactDOM.render(<HomePage />, app);
</script>
24
Binumon Joseph, Assistant Professor
26. Displaying Data with Props
• Regular HTML elements have attributes that you can use to pass
pieces of information that change the behavior of those elements.
For example, changing the src attribute of an <img> element
changes the image that is shown. Changing the href attribute of an
<a> tag changes the destination of the link.
• In the same way, you can pass pieces of information as properties
to React components. These are called props.
26
Binumon Joseph, Assistant Professor
27. Using props
• In your HomePage component, you
can pass a custom title prop to the
Header component, just like you’d
pass HTML attributes
<script type="text/jsx">
const app = document.getElementById('app');
function Header(props) {
return <h1>{props.title}</h1>;
}
function HomePage() {
return ( <div> <Header title="React 💙" />
<Header title="A new title" /> </div> );
}
ReactDOM.render(<HomePage />, app);
</script>
27
Binumon Joseph, Assistant Professor
28. Iterating through
lists
• It’s common to have data that you
need to show as a list. You can use
array methods to manipulate your data
and generate UI elements that are
identical in style but hold different
pieces of information.
function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper',
'Margaret Hamilton’];
return (
<div>
<Header title="Develop. Preview. Ship. " />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
</div>
);
}
28
Binumon Joseph, Assistant Professor
29. Adding Interactivity with State
• Listening to Events
• Handling Events
• State and Hooks
29
Binumon Joseph, Assistant Professor
30. State
• Listening to Events
• Handling Events
• State and Hooks
function HomePage() {
const [likes, setLikes] = React.useState(0);
function handleClick() {
setLikes(likes + 1);
}
return ( <div> {/* ... */}
<button onClick={handleClick}>Likes
({likes})</button>
</div> );
}
30
Binumon Joseph, Assistant Professor
31. From React to Next.js
31
Binumon Joseph, Assistant Professor
32. Starting with Next.js
• Install Node.js
• create a new file called package.json with an empty object {}
• In your terminal, run npm install react react-dom next
• Remove
• The react and react-dom scripts since you’ve installed them with NPM.
• The <html> and <body> tags because Next.js will create these for you.
• The code that interacts with app element and ReactDom.render() method.
• The Babel script because Next.js has a compiler that transforms JSX into valid
JavaScript browsers can understand.
• The <script type="text/jsx"> tag.
• The React. part of the React.useState(0) function
32
Binumon Joseph, Assistant Professor
34. Changing Environment
1. Move the index.js file to a new folder called pages (more on this
later).
2. Add default export to your main React component to help Next.js
distinguish which component to render as the main component of
this page.
export default function HomePage() {
Add a script to your package.json file to run the Next.js development
server while you develop.
// package.json { "scripts": { "dev": "next dev" },
// "dependencies": { // "next": "^11.1.0", // "react": "^17.0.2", // "react-
dom": "^17.0.2" // } }
34
Binumon Joseph, Assistant Professor
35. Running the development server
import { useState } from 'react’;
function Header({ title }) {
return <h1>{title ? title : 'Default title'}</h1>;
}
export default function HomePage() {
const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton’];
const [likes, setLikes] = useState(0);
function handleClick() {
setLikes(likes + 1);
}
return ( <div> <Header title="Develop. Preview. Ship. " />
<ul>
{names.map((name) => (
<li key={name}>{name}</li>
))}
</ul>
<button onClick={handleClick}>Like ({likes})</button>
</div> );
}
npm run dev
35
Binumon Joseph, Assistant Professor
36. Create a Next.js App
npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/master/basics/learn-starter"
36
Binumon Joseph, Assistant Professor
37. Link Component
• On your pages/index.js
• To include link
<Link href="/posts/first-post">this page!</Link>
import Link from 'next/link';
37
Binumon Joseph, Assistant Professor
38. Assets, Metadata, and CSS
• Image Component and Image Optimization
import Image from 'next/image’;
return(
<Image src="/images/profile.jpg" // Route of the image file
height={144} // Desired size with correct aspect ratio
width={144} // Desired size with correct aspect ratio
alt="Your Name" />
);
38
Binumon Joseph, Assistant Professor
39. Adding Head
39
import Head from 'next/head';
export default function FirstPost() {
return ( <>
<Head> <title>First Post</title> </Head>
<h1>First Post</h1>
<h2> <Link href="/">← Back to home</Link> </h2> </>
);
}
Binumon Joseph, Assistant Professor
40. Adding CSS
• Create a file called components/layout.module.css with the
following content:
.container {
max-width: 36rem;
padding: 0 1rem;
margin: 3rem auto 6rem;
}
40
Binumon Joseph, Assistant Professor
41. Adding CSS
• Create a top-level directory called components.
• Inside components, create a file called layout.js with the following
content:
import styles from './layout.module.css’;
export default function Layout({ children }) {
return <div className={styles.container}>{children}</div>;
}
41
Binumon Joseph, Assistant Professor
42. Adding CSS
import Head from 'next/head’;
import Link from 'next/link’;
import Layout from '../../components/layout’;
export default function FirstPost() {
return ( <Layout>
<Head> <title>First Post</title> </Head>
<h1>First Post</h1>
<h2> <Link href="/">← Back to home</Link> </h2>
</Layout>
);
}
42
Binumon Joseph, Assistant Professor
43. THANKS
Do you have any questions?
binumonjosephk@amaljyothi.ac.in
+
919539 373 1
71
Binumon Joseph, Assistant Professor 43