presentation with react

Top 10 JavaScript frameworks to create presentation slides

Presentation frameworks are tools or libraries that can help you create presentations using web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You’ll have full control over the appearance and layout of your slides.

They allow you to export your slides as HTML files that can be viewed in any modern browser. You don’t need to install any software or plugin to view your slides. You can also share your slides online using platforms such as Slides.com, GitHub Pages, Netlify.

Reveal.js ( 67.1k ⭐) — An open source HTML presentation framework that allows you to create beautiful and interactive presentations using web technologies. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Impress.js ( 37.5k ⭐) — Another open source HTML presentation framework that is similar to reveal.js, but with a different approach, inspired by the idea behind prezi.com. It uses CSS3 3D transforms to create dynamic and spatial presentations that can zoom, rotate, and pan across the slides.

Slidev ( 31.5k ⭐) — A web-based slides maker and presenter that is designed for developers. It allows you to create beautiful and interactive presentations using Markdown, HTML, Vue components, and other web technologies. You can also use features such as live coding, recording, drawing, LaTeX, diagrams, icons, and more to enhance your slides.

MDX Deck ( 11.3k ⭐) — A library based on MDX that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- . You can also import and use any React component in your slides, as well as customize the theme and layout of your presentation.

Spectacle ( 9.7k ⭐) — A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code, created and maintained by Formidable Labs. You can use it to create beautiful and interactive slides with animations, transitions, code highlighting, and other features.

Code Surfer ( 6.3k ⭐) — A library that allows you to create presentations using Markdown and React components. You can write your slides in a single MDX file and separate them with --- , add code highlighting, code zooming, code scrolling, code focusing, code morphing, and fun to MDX Deck slides.

WebSlides ( 6.2k ⭐) — A library that allows you to create beautiful HTML presentations and websites. Just choose a demo and customize it in minutes. 120+ slides ready to use. You can use HTML, CSS, JavaScript, Markdown, LaTeX, and more to create stunning slides with animations, transitions, code highlighting, and other features.

Fusuma ( 5.4k ⭐) — A tool that allows you to create slides with Markdown easily. You can use HTML, CSS, JavaScript, Markdown, Vue components, and other web technologies to create stunning slides with animations, transitions, code highlighting, and other features.

md2googleslides ( 4.4k ⭐) — Generate Google Slides from markdown & HTML. Run from the command line or embed in another application. While it does not yet produce stunningly beautiful decks, you are encouraged to use this tool for quickly prototyping presentations.

PptxGenJS ( 2.5k ⭐) — A JavaScript library that allows you to create presentations, compatible with PowerPoint, Keynote, and other applications that support the Open Office XML (OOXML) format. You can use it to generate PPTX files with just a few simple JavaScript commands in any modern desktop and mobile browser. You can also integrate PptxGenJS with Node, Angular, React, and Electron.

Common features

Presentation frameworks typically share several common features that aim to enhance the creation and delivery of visually engaging and interactive presentations. Here are some of the common features you can find:

Ease of use : They allow you to use web technologies that you are familiar with, such as HTML, CSS, JavaScript, Markdown, Vue, React, and more. You don’t need to learn a new software or tool to create your slides. You can also use your favorite code editor or IDE to write and edit your slides.

Nested slides : They allow you to create sub-sections or sub-topics within your presentation. You can use nested slides to organize your content, add more details, or create interactive menus.

Markdown support : Markdown is a lightweight markup language that allows you to format text using simple syntax. You can use Markdown to write your slides in a plain text editor and then convert them to HTML. Markdown makes it easy to create headings, lists, links, images, code blocks, and more.

Auto-Animate : A feature that automatically animates the transitions between slides or elements to create smooth and dynamic effects for your presentation, detect the changes between slides and animate them accordingly.

PDF export : You can use PDF export to print your presentation, share it online, or view it offline. PDF export can also preserve the layout, fonts, and images of your presentation.

Speaker notes : You can use speaker notes to prepare your speech, add additional information, or provide references. Speaker notes are usually hidden from the audience but visible to you in a separate window or screen.

LaTeX support : LaTeX is a document preparation system that allows you to create high-quality typesetting for mathematical and scientific expressions. You can use LaTeX to write complex formulas, equations, symbols, and diagrams in your presentation. LaTeX can also handle cross-references, citations, and bibliographies.

Syntax highlighted code : You can use syntax highlighted code to display your source code in your presentation. Syntax highlighted code can make your code more readable, understandable, and attractive.

You might also like

DEV Community

Posted on Jul 1, 2021

Create a Slideshow With React

In order to create a slideshow, we need to have two components:

• The container that holds contents.
• The individual slide.

For a slideshow, we need a container that can:

• contain all slides.
• hide slides that outside viewport of the container.
• sent a signal that tells slides to move in.
• sent a signal that tells slides to move out.
• track which slide should be shown.

First, let's create a basic container with style:

Second, let's add a context that will track activated slide and a timer:

And that's all for the container.

The slide will have at least three stages:

• on stage - slide is in viewport and has highest z-index.
• off stage - slide is in viewport and has lowest z-index
• ready for stage - slide is moved out from viewport, and it's waiting at ready position.

The reason we don't move out the slide at "off stage", is because, for this slideshow, we want to move "off" slide after the "on" slide completely cover the "off" one.

Slide will update it's stage when received signal from the container, so it will like:

• slide at ready position.
• when signal come and the slide is activated, moved to viewport.
• when signal come and the current slide is not the activated one, lower the z-index.
• when next signal come, move to ready position.

So, we can have something like this:

And now, we have a simple Slideshow. Thanks all!

Top comments (0)

Templates let you quickly answer FAQs or store snippets for re-use.

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink .

Hide child comments as well

For further actions, you may consider blocking this person and/or reporting abuse

Top 23 React UI Component Libraries for Your Next Project🚀

Dharmendra Kumar - May 30

Buy Some Happiness This Summer! - Web Page

Sarthak Mittal - May 30

Screenshots optimization on OpenAI tokens

Artur Daschevici - May 17

Enhance CSS view transitions with Velvette

Megan Lee - May 30

We're a place where coders share, stay up-to-date and grow their careers.

React Framework

Reveal.js can be added to a React project a few different ways.

• Install and setup reveal.js via npm
• Use third-party packages

Installing From npm

You can add and initialize reveal.js in a JavaScript/TypeScript source file like main.tsx or app.tsx .

You can do so globally i.e. outside of app/component functions or inside one of them. In the latter case, you have to be careful not to stack initializations. Only initialize a slide deck once. If you need to reconfigure, use the configure function or destroy the deck before initializing again.

To begin, install reveal using npm :

If you are using TypeScript, you need to install the types as well:

You will need the following imports:

Initialization

Finally, add the initialization code most suitable to your project's needs.

If you decide to intialize the slide deck inside an app or component function where slide deck containers are in the returned JSX, we recommended you use a useEffect hook to do so. This will ensure that initialization happens after the containers are first rendered.

It is also recommended to use refs to maintain a handle on the slide deck container div and the corresponding reveal instance. These refs can help make sure each slide deck is only initialized once.

Here's a full working example:

Note the use of deckDivRef in the Reveal constructor. This is important if you want to add multiple decks to the the same React app.

React Portals

If you only want to sprinkle a few components into specific slides, we recommend keeping the reveal.js DOM tree outside of React and using React Portals to place react component into specific sections.

Third Party Packages

The following third-party packages might prove useful for adding Reveal.js presentations to React projects or for adding React components/apps to Reveal.js presentations:

• revealjs-react - A React wrapper for the RevealJS Presentation Library.
• react-reveal-slides - A React component for creating Reveal.js presentations entirely in React.
• revealjs-react-boilerplate - A boilerplate for creating revealJS presentations using React.

Slides.com — the reveal.js presentation editor.

Become a reveal.js pro in the official video course.

Ready-to-use Presentations

Pick a topic to present with ready-made presentations, get started with react, module source.

This workshop is based on the Getting started with React module on Microsoft Learn. All of the steps the attendees will follow to complete the workshop are contained in the module.

In this workshop, you will learn how to build a web application with React.

Video walk-through

🎥 Click this image to watch Christopher walk you through the workshop

Pre-Learning

• Create a new Node.js project and work with dependencies

Prerequisites

• Visual Studio Code
• Have created HTML pages and used CSS for style
• Written basic JavaScript applications
• Created a project and managed packages using npm

What students will learn

React is a popular front-end framework for creating websites. Its modular structure allows for quick prototyping and streamlined development. During this workshop you will create your first React project. You will explore JSX, the syntax most commonly used to create React components. You will close by adding style to your pages.

Introducing React and JSX

You will start by exploring React and JSX . While you can create React applications without using JSX, most React developers use JSX. You’ll also be introduced to components, which are reusable modules to help streamline development and encourage reuse.

Create a starter project

With the core concepts covered, you’ll create a starter project . Because JSX needs to be built or converted into HTML and JavaScript, a build process is required. This project uses Snowpack to manage the build.

React app structure and create Hello world

Most React apps follow a common structure, with an index.html file to host the React app, and some JavaScript to load the appropriate libraries and display the app. You’ll explore how those are setup while creating Hello world .

Exploring and creating components

As highlighted earlier, React is based around components. You will explore the concepts of a component, and create your first component .

Displaying dynamic data

The primary goal of most front-end JavaScript frameworks is to streamline the display of dynamic data stored in JavaScript variables or constants. With React, you will use “handlebars” (``) to indicate where you want variables and constants displayed. You will create a new component and display data .

Adding style

As with any webpage, you will want to update the style by using CSS. With React, you can import a CSS file much in the same way you would import a JavaScript module. You will complete the workshop by adding style to your site .

Quiz or Code Challenge

Knowledge check

• Explore Azure Static Web Apps
• Build JavaScript applications with Node.js

Now that you know how to build a web application in React, either create a new project and build a blog or todo app, or add on to your Recipe app. Can you build a form so that someone could add a recipe? Can you style your recipes into cards that flip? Be creative!

Be sure to give feedback about this workshop !

Code of Conduct

Separation of Concerns in React –How to Use Container and Presentational Components

Many new React developers combine logic and presentation inside the same React component. And they may not know why it's important to separate these two – they just want to make it work.

But later, they'll find that they need to make changes to the file and doing so becomes a humungous task. Then they'll have to re-work things to separate these two parts.

This comes from not knowing about the separation of concerns and the presentation and container components pattern. That's why I'm going to teach you about them so you can mitigate this problem early in your project's development lifecycle.

In this article, we are going to dive into container and presentational components and briefly touch on the concept of separation of concerns.

Without further ado, let's get started!

Table of Contents

• What is the separation of concerns?
• What are presentation and container components?
• Why do we need these components?
• Presentation and container component example
• How to replace container components with React hooks

What is the Separation of Concerns?

Separation of concerns is a concept that is widely used in programming. It states that logic that performs different actions should not be groupled or combined together.

For example, what we discussed in the introduction section violates the separation of concerns, because we placed the logic of fetching the data and presenting the data in the same component.

To solve this and to adhere to the separation of concerns, we should separate these two pieces of logic – that is, fetching data and presenting it on the UI – into two different components.

This is were the container and presentation component pattern will help us solve this issue. In the following sections, we are going to dive deep into this pattern.

What are Container and Presentational Components?

To achieve a separation of concerns we have two types of components:

Container components

Presentational components.

These are the components that provide, create, or hold data for the children components.

The only job of a container component is to handle data. It does not consist of any UI of its own. Rather, it consists of presentational components as its children that uses this data.

A simple example would be a component named FetchUserContainer that consists of some logic that fetches all the users.

These are the components whose primary responsibility is to present the data on the UI. They take in the data from the container components.

These components are stateless unless they need their own state for rendering the UI. They do not alter the data that they receive.

An example of this would be a UserList component that displays all the users.

Why Do We Need These Components?

To understand this, let's take a simple example. We want to display a list of posts that we fetch from the JSON placeholder API . Here is the code for the same:

Here is what this component does:

• It has 3 state variables: posts , isLoading , and error .
• We have a useEffect hook that consists of the business logic. Here we are fetching the data from the API: [https://jsonplaceholder.typicode.com/posts](https://jsonplaceholder.typicode.com/posts) with the fetch API .
• We make sure that when the data is fetched, we store it in the posts state variable using setPosts .
• We also make sure that we toggle the isLoading and error values during the respective scenarios.
• We put this entire logic inside an async IIFE.
• Finally, we return the posts in the form of an unordered list and map through all the posts that we fetched earlier.

The problem with the above is that the logic of fetching the data and displaying the data is coded into a single component. We can say that the component is now tightly coupled with the logic. This is the exact thing that we don’t want.

Below are some reasons as to why we require container and presentational components:

• They help us create components that are loosely coupled
• They help us maintain separation of concerns
• Code refactoring becomes much easier.
• Code becomes more organized and maintainable
• It makes testing much easier.

Presentation and Container Component Example

Ok, enough talk – let’s get things working by starting off with a simple example. We are going to use the same example as above – fetching the data from a JSON placeholder API.

Let's understand the file structure here:

• Our container component will be PostContainer
• Posts : A component that has an unordered list.
• SinglePost : A component that renders a list tag. This will render each element of the list.

Note: We are going to store all the above components in a separate folder named components .

Now that we know which things go where, let's start off with the container component: PostContainer . Copy-paste the below code into the components/PostContainer.tsx file

From the example we saw in the previous section of this article, the above code just contains the logic of fetching the data. This logic is present in the useEffect hook. Here this container component passes this data to the Posts presentational component.

Let's have a look at the Posts presentational component. Copy-paste the below code in the components/Posts.tsx file:

As you can see, this is a simple file that consists of a ul tag – an unordered list. This component then maps over the posts that are being passed as props. We pass each to the SinglePost component.

There is another presentational component that renders the list tag, that is the li tag. It displays the title and the body of the post. Copy-paste the below code in the components/SinglePost.tsx file:

These presentational components, as you can see, just display the data on the screen. That’s all. They don’t do anything else. Since they are just displaying the data here, they will also have their own styling.

Now that we have setup the components, let's look back on what we have achieved here:

• The concept of separation of concerns is not violated in this example.
• Writing unit tests for each component becomes easier.
• Code maintainability and readability are much better. Thus our codebase has become much more organized.

We have achieved what we wanted here, but we can further enhance this pattern with the help of hooks.

How to Replace Container Components with React Hooks

Since React 16.8.0 , it has become so much easier to build and develop components with the help of functional components and hooks.

We are going to leverage these capabilities here and replace the container component with a hook.

Copy-paste the below code in the hooks/usePosts.ts file:

Here we have,

• Extracted logic that was present in the PostContainer component into a hook.
• This hook will return an object that contains the isLoading , posts , and error values.

Now we can simply remove the container component PostContainer . Then, rather than passing the container's data to the presentational components as a prop, we can directly use this hook inside the Posts presentational component.

Make the following edits to the Posts component:

By making use of hooks we have eliminated an extra layer of component that was present on top of these presentational components.

With hooks, we achieved the same results as that of the container/presentational components pattern.

So in this article, we learned about:

• Separation of concerns
• Container and presentational components
• Why we need these components
• How hooks can replace container components

For further reading I would highly recommend going through the react-table: . This library extensively uses hooks and it has great examples.

You can find the entire code for this article in this codesandbox .

Thanks for reading!

Follow me on  Twitter ,  GitHub , and  LinkedIn .

Front-end developer👨‍💻; Book enthusiasts📖

If you read this far, thank the author to show them you care. Say Thanks

Learn to code for free. freeCodeCamp's open source curriculum has helped more than 40,000 people get jobs as developers. Get started

Create presentation decks using MDX, React, and Next.js with Web3 capabilities

📖 Turbo Slides

• 📽 React-based Slideshow
• ✍️ Write using Markdown, React components, even HTML!
• 🎨 Themeable with Tailwind or Styled Components
• ♻️ Sync slides between browser tabs
• 👨‍💻 Presentation Mode
• 📝 Speaker Notes

Getting Started

• Clone the project: `git clone https://github.com/turbo-eth/turbo-slides
• Install dependencies: npm i or yarn
• Run the dev server: npm run dev or yarn dev
• Edit the first slide in /pages/index.mdx and save to see changes !

When you’re done, run npm run build && npm run export or yarn build && yarn export will create a static app you can deploy anywhere (or use locally). See below for more details.

This project is easy to build locally or using a host with build services (like Netlify or Now).

• ⚙️ Run the build process: yarn export
• 🚀 Upload the static contents of out folder to host/CDN (or run the out/index.html locally)

💬 Changing the Title/Date/etc

The default theme includes a title, date, author (and link to the author’s website) in of the <Header> component. You can edit this data inside the site.config.js file.

✍️ Writing JSX

You can use JSX in a few ways in your MDX files:

• You can use the syntax with HTML ( <button style={{ color: "red" }}> )
• You can import React component from other files ( import Button from "../components/Button" ). Then you can use that component anywhere in that MDX file. The path to the component is relative to the MDX file.
• You can use any React component imported into the <MDXProvider> (inside /components/MDXProvider.js ). This allows you to use the component without importing it inside each MDX file.
• You can define React components inside MDX files and then use them. MDX supports the use of JS inside files, like exporting variables, or in this case — defining new functions. const Button = () => <button style={{ color: "red" }}>

Check out the MDX docs for more information on the syntax.

📃 Creating Slide Pages

You can create new slide pages by making new .mdx files inside the /pages/ directory. Each slide is separated by a markdown divider ( --- ).

You have to wrap the contents of each .mdx file with a <SlidePage> component. This is what breaks up each slide page into individual slides using the markdown dividers.

🗺 Navigation

Slide pages represent real pages – so page-2.mdx == your-site.com/page-2 . By using the next prop on the <SlidePage> component you can control the next page you navigate to (after you go through all the slides).

🎨 Theming the Slideshow

Theming is accomplished with CSS custom properties and/or Styled Components .

Design tokens are stored as CSS custom properties inside the SlidePage layout ( /layouts/SlidePage.jsx ), which are injected into the app using Styled Component’s global styling utility. There you can change the color of text, background colors, fonts, etc.

The actual CSS styles of the Slideshow are also stored in the SlidePage layout. There you can change the padding of slides, alignment of quotes, etc.

When the Markdown is parsed into HTML, you can replace HTML with React components. These “swaps” are handled by the <MDXProvider> component. You can import custom components and swap elements (like a <button> with <Button> ), or import components to use inside MDX (great for creating things like 2-col layouts with component). There you can change the syntax highlighting or find any custom MDX components. It’s recommended to use Styled Components there to create custom components.

Presentation Mode

Presentation mode allows you to view the current slide alongside any “speaker notes” included inside the slide.

• Press ALT/OPT + P to toggle presentation mode on and off.
• You can also add the mode query parameter to the URL (e.g. http://localhost:3000/slides/1?mode=presentation ).

The most common way to use presentation mode:

• Open two browser tabs with any slide page.
• Activate presentation mode in one tab.
• Navigate through slides – they’ll be synced in both tabs!

This way you can view your presentation on one monitor, while displaying the slides on another screen. Or if you’re livestreaming, you can capture the slideshow window in software like OBS, and view the presentation window privately.

Note that syncing between tabs is achieved using localStorage . If you want to use an “Incognito” browser, make sure both tabs are “incognito” or they won’t sync.

Speaker Notes

Speaker notes are only displayed during presentation mode. This allows you to write private notes to yourself that you can see in “presentation” mode, while the audience only sees the other slide content in “slideshow” mode.

Speaker notes can contain Markdown , MDX/JSX , and even HTML (as JSX) . The notes are displayed in a scrollable window to the side of slide content during “presenation” mode.

To create speaker notes, you use the <SpeakerNotes> component inside of your MDX files. No need to import it, it’s automatically imported into any MDX slide page . You can also use it multiple times within the same slide, all the notes (per slide) will be combined.

Here’s an example:

Adding/replacing components in MDX

MDX allows you to use JSX inline or import components, but if you want to use a React component across all slides without importing it, you can use the <MDXProvider> component. This component wraps the app in a “context” that provides MDX with components to pass into the parser.

This also lets you replace Markdown parsed HTML elements with React components, like replacing ## Headings with <Heading as="h2"> instead of the default <h2> . This comes in handy if you have a React component library and you want to use it’s primitives like <Text> for paragraphs.

You can pass new components, or swap HTML elements inside the mdComponents object in the /components/MDXProvider.jsx file:

Available Components

Framer motion.

You can use any Framer Motion component:

Displays content centered and larger, commonly for the first slide in a deck.

Reveals content step by step as the user does next/prev slide button.

Custom order

You can also define the order explicitly:

You can control the animation duration using the prop and providing an integer (representing seconds):

To learn more about MDX , take a look at the following resources:

• MDX Documentation
• Getting started with MDX
• Using MDX with Next.js

To learn more about Next.js , take a look at the following resources:

• Next.js Documentation – learn about Next.js features and API.
• Learn Next.js – an interactive Next.js tutorial.
• Gatsby Starter Deck
• react-syntax-highlighter

View Github

A simple library that provides a component to render user's yearly activity on a calendar

A collaborative rich text editing experience (similar to google docs) using nostr-crdt, you might also like..., a next.js template with everthing your web3 app needs, a simple solana wallet built with react.js, everything you need to use nextjs with brownie, subscribe to react.js examples.

Get the latest posts delivered right to your inbox

react-use-presentation

• 0 Dependencies
• 0 Dependents

Create pure HTML (React enriched if you will) presentations with a provided array of components and their time durations. The library will do the rest triggering a re-render per array item.

Table of Contents

Running example, documentation, contributors.

You may also find a running example in this project which are served at Github Pages .

• Set up your presentation array with each object acting as a movie frame. See the example and contract below:
• To initialize a Presentation component:
• To initialize a delayed (in milliseconds) Presentation component:
• To initialize a delayed (in milliseconds) and also in loop Presentation component:
• To initialize multiple separated presentations and with its current frame and length:
• You can also render elements as children (note that the component passed via array must support children):
• You can control when to start the presentation using startTrigger as a control. You can also specify a callback to when it finishes:

usePresentation() constructor:

usePresentation() returns:

An array with 3 positions, described below:

• The very animation component;
• The current position of the frame (1 based);
• The total quantity of frames;

As the return is an array you may name each array position in an arbitrary way, e.g.:

CSS selectors :

• Both frames with or without children have its own CSS selectors:
• Without children: className="animation-frame"
• With children: className="animation-frame with-children"
• You can also pass in your own className:
• With or without children:
• The default behaviour is to automatically merge classNames.

Thanks goes to these wonderful people ( emoji key ):

This project follows the all-contributors specification. Contributions of any kind welcome!

react-use-presentation is MIT licensed .

This hook is created using create-react-hook .

Package Sidebar

npm i react-use-presentation

Git github.com/the-bugging/react-use-presentation

github.com/the-bugging/react-use-presentation#readme

Downloads Weekly Downloads

Unpacked size, total files, last publish, collaborators.

• Skip to main content
• Skip to search
• Skip to select language
• Sign up for free
• Português (do Brasil)

Getting started with React

• Overview: Understanding client-side JavaScript frameworks

In this article we will say hello to React. We'll discover a little bit of detail about its background and use cases, set up a basic React toolchain on our local computer, and create and play with a simple starter app — learning a bit about how React works in the process.

Hello React

As its official tagline states, React is a library for building user interfaces. React is not a framework – it's not even exclusive to the web. It's used with other libraries to render to certain environments. For instance, React Native can be used to build mobile applications.

To build for the web, developers use React in tandem with ReactDOM . React and ReactDOM are often discussed in the same spaces as — and utilized to solve the same problems as — other true web development frameworks. When we refer to React as a "framework", we're working with that colloquial understanding.

React's primary goal is to minimize the bugs that occur when developers are building UIs. It does this through the use of components — self-contained, logical pieces of code that describe a portion of the user interface. These components can be composed together to create a full UI, and React abstracts away much of the rendering work, leaving you to concentrate on the UI design.

Unlike the other frameworks covered in this module, React does not enforce strict rules around code conventions or file organization. This allows teams to set conventions that work best for them, and to adopt React in any way they would like to. React can handle a single button, a few pieces of an interface, or an app's entire user interface.

While React can be used for small pieces of an interface , it's not as easy to "drop into" an application as a library like jQuery, or even a framework like Vue — it is more approachable when you build your entire app with React.

In addition, many of the developer-experience benefits of a React app, such as writing interfaces with JSX, require a compilation process. Adding a compiler like Babel to a website makes the code on it run slowly, so developers often set up such tooling with a build step. React arguably has a heavy tooling requirement, but it can be learned.

This article is going to focus on the use case of using React to render the entire user interface of an application with the support of Vite , a modern front-end build tool.

How does React use JavaScript?

React utilizes features of modern JavaScript for many of its patterns. Its biggest departure from JavaScript comes with the use of JSX syntax. JSX extends JavaScript's syntax so that HTML-like code can live alongside it. For example:

This heading constant is known as a JSX expression . React can use it to render that <h1> tag in our app.

Suppose we wanted to wrap our heading in a <header> tag, for semantic reasons? The JSX approach allows us to nest our elements within each other, just like we do with HTML:

Note: The parentheses in the previous snippet aren't unique to JSX, and don't have any effect on your application. They're a signal to you (and your computer) that the multiple lines of code inside are part of the same expression. You could just as well write the header expression like this:

However, this looks kind of awkward, because the <header> tag that starts the expression is not indented to the same position as its corresponding closing tag.

Of course, your browser can't read JSX without help. When compiled (using a tool like Babel or Parcel ), our header expression would look like this:

It's possible to skip the compilation step and use React.createElement() to write your UI yourself. In doing this, however, you lose the declarative benefit of JSX, and your code becomes harder to read. Compilation is an extra step in the development process, but many developers in the React community think that the readability of JSX is worthwhile. Plus, modern front-end development almost always involves a build process anyway — you have to downlevel modern syntax to be compatible with older browsers, and you may want to minify your code to optimize loading performance. Popular tooling like Babel already comes with JSX support out-of-the-box, so you don't have to configure compilation yourself unless you want to.

Because JSX is a blend of HTML and JavaScript, some developers find it intuitive. Others say that its blended nature makes it confusing. Once you're comfortable with it, however, it will allow you to build user interfaces more quickly and intuitively, and allow others to better understand your codebase at a glance.

To read more about JSX, check out the React team's Writing Markup with JSX article.

Setting up your first React app

There are many ways to create a new React application. We're going to use Vite to create a new application via the command line.

It's possible to add React to an existing project by copying some <script> elements into an HTML file, but using Vite will allow you to spend more time building your app and less time fussing with setup.

Requirements

In order to use Vite, you need to have Node.js installed. As of Vite 5.0, at least Node version 18 or later is required, and it's a good idea to run the latest long term support (LTS) version when you can. As of 24th October 2023, Node 20 is the latest LTS version. Node includes npm (the Node package manager).

To check your version of Node, run the following in your terminal:

If Node is installed, you'll see a version number. If it isn't, you'll see an error message. To install Node, follow the instructions on the Node.js website .

You may use the Yarn package manager as an alternative to npm but we'll assume you're using npm in this set of tutorials. See Package management basics for more information on npm and yarn.

If you're using Windows, you will need to install some software to give you parity with Unix/macOS terminal in order to use the terminal commands mentioned in this tutorial. Gitbash (which comes as part of the git for Windows toolset ) or Windows Subsystem for Linux ( WSL ) are both suitable. See Command line crash course for more information on these, and on terminal commands in general.

Also bear in mind that React and ReactDOM produce apps that only work on a fairly modern set of browsers like Firefox, Microsoft Edge, Safari, or Chrome when working through these tutorials.

See the following for more information:

• "About npm" on the npm blog
• "Introducing npx" on the npm blog
• Vite's documentation

Initializing your app

The npm package manager comes with a create command that allows you to create new projects from templates. We can use it to create a new app from Vite's standard React template. Make sure you cd to the place you'd like your app to live on your machine, then run the following in your terminal:

This creates a moz-todo-react directory using Vite's react template.

Note: The -- is necessary to pass arguments to npm commands such as create , and the --template react argument tells Vite to use its React template.

Your terminal will have printed some messages if this command was successful. You should see text prompting you to cd to your new directory, install the app's dependencies, and run the app locally. Let's start with two of those commands. Run the following in your terminal:

Once the process is complete, we need to start a local development server to run our app. Here, we're going to add some command line flags to Vite's default suggestion to open the app in our browser as soon as the server starts, and use port 3000.

Run the following in your terminal:

Once the server starts, you should see a new browser tab containing your React app:

Application structure

Vite gives us everything we need to develop a React application. Its initial file structure looks like this:

index.html is the most important top-level file. Vite injects your code into this file so that your browser can run it. You won't need to edit this file during our tutorial, but you should change the text inside the <title> element in this file to reflect the title of your application. Accurate page titles are important for accessibility.

The public directory contains static files that will be served directly to your browser without being processed by Vite's build tooling. Right now, it only contains a Vite logo.

The src directory is where we'll spend most of our time, as it's where the source code for our application lives. You'll notice that some JavaScript files in this directory end in the extension .jsx . This extension is necessary for any file that contains JSX – it tells Vite to turn the JSX syntax into JavaScript that your browser can understand. The src/assets directory contains the React logo you saw in the browser.

The package.json and package-lock.json files contain metadata about our project. These files are not unique to React applications: Vite populated package.json for us, and npm created package-lock.json for when we installed the app's dependencies. You don't need to understand these files at all to complete this tutorial. However, if you'd like to learn more about them, you can read about package.json and package-lock.json in the npm docs. We also talk about package.json in our Package management basics tutorial.

Customizing our dev script

Before we move on, you might want to change your package.json file a little bit so that you don't have to pass the --open and --port flags every time you run npm run dev . Open package.json in your text editor and find the scripts object. Change the "dev" key so that it looks like this:

With this in place, your app will open in your browser at http://localhost:3000 every time you run npm run dev .

Note: You don't need the extra -- here because we're passing arguments directly to vite , rather than to a pre-defined npm script.

Exploring our first React component — <App />

In React, a component is a reusable module that renders a part of our overall application. Components can be big or small, but they are usually clearly defined: they serve a single, obvious purpose.

Let's open src/App.jsx , since our browser is prompting us to edit it. This file contains our first component, <App /> :

The App.jsx file consists of three main parts: some import statements at the top, the App() function in the middle, and an export statement at the bottom. Most React components follow this pattern.

Import statements

The import statements at the top of the file allow App.jsx to use code that has been defined elsewhere. Let's look at these statements more closely.

The first statement imports the useState hook from the react library. Hooks are a way of using React's features inside a component. We'll talk more about hooks later in this tutorial.

After that, we import reactLogo and viteLogo . Note that their import paths start with ./ and / respectively and that they end with the .svg extension at the end. This tells us that these imports are local , referencing our own files rather than npm packages.

The final statement imports the CSS related to our <App /> component. Note that there is no variable name and no from directive. This is called a side-effect import — it doesn't import any value into the JavaScript file, but it tells Vite to add the referenced CSS file to the final code output, so that it can be used in the browser.

The App() function

After the imports, we have a function named App() , which defines the structure of the App component. Whereas most of the JavaScript community prefers lower camel case names like helloWorld , React components use Pascal case (or upper camel case) variable names, like HelloWorld , to make it clear that a given JSX element is a React component and not a regular HTML tag. If you were to rename the App() function to app() , your browser would throw an error.

Let's look at App() more closely.

The App() function returns a JSX expression. This expression defines what your browser ultimately renders to the DOM.

Just under the return keyword is a special bit of syntax: <> . This is a fragment . React components have to return a single JSX element, and fragments allow us to do that without rendering arbitrary <div> s in the browser. You'll see fragments in many React applications.

The export statement

There's one more line of code after the App() function:

This export statement makes our App() function available to other modules. We'll talk more about this later.

Moving on to main

Let's open src/main.jsx , because that's where the <App /> component is being used. This file is the entry point for our app, and it initially looks like this:

As with App.jsx , the file starts by importing all the JS modules and other assets it needs to run.

The first two statements import the React and ReactDOM libraries because they are referenced later in the file. We don't write a path or extension when importing these libraries because they are not local files. In fact, they are listed as dependencies in our package.json file. Be careful of this distinction as you work through this lesson!

We then import our App() function and index.css , which holds global styles that are applied to our whole app.

We then call the ReactDOM.createRoot() function, which defines the root node of our application. This takes as an argument the DOM element inside which we want our React app to be rendered. In this case, that's the DOM element with an ID of root . Finally, we chain the render() method onto the createRoot() call, passing it the JSX expression that we want to render inside our root. By writing <App /> as this JSX expression, we're telling React to call the App() function which renders the App component inside the root node.

Note: <App /> is rendered inside a special <React.StrictMode> component. This component helps developers catch potential problems in their code.

You can read up on these React APIs, if you'd like:

• ReactDOM.createRoot()
• React.StrictMode

Starting fresh

Before we start building our app, we're going to delete some of the boilerplate code that Vite provided for us.

First, as an experiment, change the <h1> element in App.jsx so that it reads "Hello, World!", then save your file. You'll notice that this change is immediately rendered in the development server running at http://localhost:3000 in your browser. Bear this in mind as you work on your app.

We won't be using the rest of the code! Replace the contents of App.jsx with the following:

Practice with JSX

Next, we'll use our JavaScript skills to get a bit more comfortable writing JSX and working with data in React. We'll talk about how to add attributes to JSX elements, how to write comments, how to render content from variables and other expressions, and how to pass data into components with props.

Adding attributes to JSX elements

JSX elements can have attributes, just like HTML elements. Try adding a <button> below the <h1> element in your App.jsx file, like this:

When you save your file, you'll see a button with the words Click me! . The button doesn't do anything yet, but we'll learn about adding interactivity to our app soon.

Some attributes are different than their HTML counterparts. For example, the class attribute in HTML translates to className in JSX. This is because class is a reserved word in JavaScript, and JSX is a JavaScript extension. If you wanted to add a primary class to your button, you'd write it like this:

JavaScript expressions as content

Unlike HTML, JSX allows us to write variables and other JavaScript expressions right alongside our other content. Let's declare a variable called subject just above the App() function:

Next, replace the word "World" in the <h1> element with {subject} :

Save your file and check your browser. You should see "Hello, React!" rendered.

The curly braces around subject are another feature of JSX's syntax. The curly braces tell React that we want to read the value of the subject variable, rather than render the literal string "subject" . You can put any valid JavaScript expression inside curly braces in JSX; React will evaluate it and render the result of the expression as the final content. Following is a series of examples, with comments above explaining what each expression will render:

Even comments in JSX are written inside curly braces! This is because comments, too, are technically JavaScript expressions. The /* block comment syntax */ is necessary for your program to know where the comment starts and ends.

Component props

Props are a means of passing data into a React component. Their syntax is identical to that of attributes, in fact: prop="value" . The difference is that whereas attributes are passed into plain elements, props are passed into React components.

In React, the flow of data is unidirectional: props can only be passed from parent components down to child components.

Let's open main.jsx and give our <App /> component its first prop.

Add a prop of subject to the <App /> component call, with a value of Clarice . When you are done, it should look something like this:

Back in App.jsx , let's revisit the App() function. Change the signature of App() so that it accepts props as a parameter and log props to the console so you can inspect it. Also delete the subject const; we don't need it anymore. Your App.jsx file should look like this:

Save your file and check your browser. You'll see a blank background with no content. This is because we're trying to read a subject variable that's no longer defined. Fix this by commenting out the <h1>Hello {subject}!</h1> line.

Note: If your code editor understands how to parse JSX (most modern editors do!), you can use its built-in commenting shortcut — Ctrl + / (on Windows) or Cmd + / (on macOS) — to create comments more quickly.

Save the file with that line commented out. This time, you should see your "Click me!" button rendered by itself. If you open your browser's developer console, you'll see a message that looks like this:

The object property subject corresponds to the subject prop we added to our <App /> component call, and the string Clarice corresponds to its value. Component props in React are always collected into objects in this fashion.

Let's use this subject prop to fix the error in our app. Uncomment the <h1>Hello, {subject}!</h1> line and change it to <h1>Hello, {props.subject}!</h1> , then delete the console.log() statement. Your code should look like this:

When you save, the app should now greet you with "Hello, Clarice!". If you return to main.jsx , edit the value of subject , and save, your text will change.

For additional practice, you could try adding an additional greeting prop to the <App /> component call inside main.jsx and using it alongside the subject prop inside App.jsx .

This brings us to the end of our initial look at React, including how to install it locally, creating a starter app, and how the basics work. In the next article, we'll start building our first proper application — a todo list. Before we do that, however, let's recap some of the things we've learned.

• Components can import modules they need and must export themselves at the bottom of their files.
• Component functions are named with PascalCase .
• You can render JavaScript expressions in JSX by putting them between curly braces, like {so} .
• Some JSX attributes are different than HTML attributes so that they don't conflict with JavaScript reserved words. For example, class in HTML translates to className in JSX.
• Props are written just like attributes inside component calls and are passed into components.

Mark's Dev Blog

Presentations: intro to react, redux, and typescript (2020).

I've done several previous iterations of an "Intro to React + Redux" presentation. The last one I did was back in 2018, and a lot has changed for both React and Redux since then. In particular, React Hooks have changed how we write React code, Redux Toolkit is now the standard approach for writing Redux logic, and the React-Redux hooks API is now the default.

I've updated this presentation to teach React hooks instead of classes, filled out additional examples, and added material on Redux Toolkit and the React-Redux hooks. I've also included my intro to TS section as well, and expanded that to include advice on using TS with React and Redux.

Slides: Intro to React, Redux, and TypeScript (2020) 🔗︎

I've also published a copy of the slides as a PDF, per request:

PDF: Intro to React, Redux, and TypeScript (2020) 🔗︎

This is a post in the Presentations series. Other posts in this series:

• Nov 13, 2023 - React Summit US 2023: What's New in Redux Toolkit 2.0
• Oct 24, 2023 - React Advanced 2023 - Building Better React DevTools with Replay Time Travel
• Aug 16, 2023 - React Rally 2023 - A (Brief) Guide to React Rendering Behavior
• Jun 01, 2023 - Presentations: Debugging JavaScript
• Dec 11, 2022 - Presentations: 2022 Podcasts
• Jun 27, 2022 - Presentations: Modern Redux with Redux Toolkit
• May 04, 2022 - Reactathon 2022: The Evolution of Redux Async Logic
• May 04, 2022 - TS Congress 2022: Lesson from Maintaining TS Libraries
• May 29, 2021 - Presentations: Learn Modern Redux Livestream
• May 29, 2021 - Presentations: The State of Redux, May 2021
• May 29, 2021 - Presentations: Podcast Appearances in 2021
• May 25, 2021 - Presentations: Using Git Effectively
• Dec 20, 2020 - Presentations: Intro to React, Redux, and TypeScript (2020)
• Dec 03, 2020 - Presentations: Podcast Appearances in 2020
• Oct 08, 2020 - Global React Meetup: The State of Redux 2020
• Oct 19, 2019 - Git Under the Hood: Internals, Techniques, and Rewriting History
• Sep 24, 2019 - React Boston 2019: Hooks, HOCs, and Tradeoffs
• Jun 11, 2019 - ReactNext 2019: A Deep Dive into React-Redux
• May 22, 2019 - Presentation: JavaScript for Java Devs
• Mar 31, 2019 - Reactathon 2019 Keynote: The State of Redux
• Oct 01, 2018 - React Boston 2018 Presentation: The State of Redux
• Jun 30, 2018 - Redux Fundamentals Workshop Slides
• Mar 20, 2018 - Reactathon Presentation: Redux Fundamentals
• Mar 07, 2018 - Presentation: Intro to React and Redux (March 2018)
• Sep 24, 2017 - React Boston 2017 Presentation: You Might Need Redux (And Its Ecosystem)
• Feb 24, 2017 - Presentation Sources Published
• Feb 17, 2017 - Presentation: Intro to React and Redux
• Oct 07, 2016 - Presentation: Modern Web Dev Overview

• Presentations

React.js fundamentals

What is React.js?

• Developed by Facebook
• React is a view layer library, not a framework like Backbone, Angular etc.
• You can't use React to build a fully-functional web app

Why was React developed?

• Complexity of two-way data binding
• Bad UX from using "cascading updates" of DOM tree
• A lot of data on a page changing over time
• Complexity of Facebook's UI architecture
• Shift from MVC mentality

Who uses React?

https://github.com/facebook/react/wiki/Sites-Using-React

React in the wild:

React:  the good, easy to understand what a component will render.

• Declarative code → predictable code
• You don't really need to study JS in the view file in order to understand what the file does

Easy to mix HTML and JS

• You do it already with template libraries (e.g. Handlebars, Mustache, Underscore etc.)

Uses full power of JS

• Decoupling templates from logic does not rely on the templates’ primitive abstractions, but uses full power of JavaScript in displaying views

No complex two-way data flow

• Uses simple one-way reactive data flow
• Easier to understand than two-way binding
• Uses less code

React is fast!

• Real DOM is slow
• JavaScript is fast
• Using virtual DOM objects enables fast batch updates to real DOM, with great productivity gains over frequent cascading updates of DOM tree

React dev tools

• React Chrome extension makes debugging  so much easier

Server-side rendering

• React.renderToString() returns pure HTML

React:  the bad

React is nothing but the view.

• No data / models
• No promises / deferreds
• No idea how to add all of the above

Very little info in the docs

• But it's not hard to learn

Architectural annoyances

• Setting state on unmounted components
• discussion is here:  https://github.com/facebook/react/issues/2787

Building JSX requires some extra work

• But most of the work is already done for you by react-tools

No support for older browsers

• React won't work with IE8
• There some polyfills / shims that help

Why should I use React?

• Easy to read and understand views
• Concept of components is the future of web development
• If your page uses a lot of fast updating data or real time data - React is the way to go
• Once you and your team is over the React's learning curve, developing your app will become a lot faster

Is switching to React easy?

Understanding how it works will take time and will slow you down at first (but once you and your team get it, things will start happening much faster)

Fundamentals

Most important terms in React

Components are self-contained reusable building blocks of web application.

React components are basically just idempotent functions (same input produces same output).

They describe your UI at any point in time, just like a server-rendered app.

• Created using React.createClass()
• The only required method is render()
• Inserted into DOM using React.renderComponent()
• Passed down to component from parent component and represents data for the component
• accessed via this.props
• Represents internal state of the component
• Accessed via this.state
• When a component's state data changes, the rendered markup will be updated by re-invoking render() method
• Arguably, one of the coolest things in React
• XML-like syntax for generating component's HTML
• Easier to read and understand large DOM trees
• Translates to plain JavaScript using react-tools

Virtual DOM

• The virtual DOM is used for efficient re-rendering of the DOM
• React aims to re-render the virtual tree only when the state changes
• Uses 2 virtual trees (new and previous) to find differences and batch update real DOM
• Observes data changes (setState) and does dirty-checking to know when to re-render component
• Whenever possible, does not update entire component in real DOM - only computes a patch operation that updates part of the DOM

A simple component

* see live example *, a nested component, a stateful component.

• Node.js + Nginx static server
• Exoskeleton (lean Backbone)
• Grunt, Gulp, Bower

core.teradek.com

Alexander Farennikov Sr. Software Engineer at Teradek LLC (www.teradek.com)

www.linkedin.com/in/farennikov/en

[email protected]

Special thanks

My UI team in Odessa, Ukraine: - Denis Turenko - Pavel Mashchenko

By Alexander Farennikov

Get on Track with React.js

Alexander Farennikov

Disappointment Voiced by Fans Following PlayStation’s May 2024 State of Play Presentation

T he much-talked-about May 2024 edition of PlayStation’s State of Play unfolded yesterday amidst a swirl of rumors and expectations. Yet, despite the anticipation, the event failed to deliver on its promise, leaving a majority of fans feeling let down. With leaks disseminating information prior to the broadcast, some followers had already set their expectations at a moderate level. Nonetheless, the lack of a standout surprise during the event was a sore point for many.

Fan Reactions to May 2024 PlayStation State of Play

Perusing the swath of comments across social media platforms and video game forums, it’s clear the event did not resonate as hoped with the gaming community. This stands as a recurrent theme: another PlayStation showcase draws to a close with a trail of disillusioned fans in its wake.

The decision to remake Until Dawn for the PS5 left many scratching their heads, particularly as a PC version might have been a more logical step given the clamor for a Bloodborne remake for the latest console instead. Concord’s introduction met with lukewark interest, as skepticism arose about Sony’s decision to introduce what seems to be just another iteration in the already crowded Overwatch-type game niche. Astro Bot did manage to garner positive attention amidst the sea of shooter, gacha, and live service game announcements.

“They reminded us it was to be a brief showcase, which I’m fine with, but how many shooters, gachas, and live services do we actually need?” questioned a disappointed user on Reddit . “I have to say I was quite let down, the only game that really caught my interest was Astro Bot,” a second gamer added.

The sentiment was shared by others as well. What do our readers have to say about this State of Play? We’re interested in your perspective, so please share your opinions in the comments section below.

Frequently Asked Questions (FAQs) About PlayStation State of Play May 2024

Politicians and celebrities flood social media with reactions to Trump's guilty verdict

by GEOFF HARRIS | The National Desk

WASHINGTON (TND) — Following Thursday's guilty verdict announcement against former President Donald Trump, both politicians and celebrities took to social media.

Some celebrated the decision, while others defended Trump and called the verdict a disgrace.

House Speaker Mike Johnson, R-La., said in part on X, formerly known as Twitter, " Today is a shameful day in American History."

Representative Eric Swalwell, D-Calif., commented in part, "Donald Trump is a convicted felon. This verdict is not a win for any single person."

Florida Governor Ron DeSantis, R, took to X, saying "Today's verdict represents the culmination of a legal process that has been bent to the political will of the actors involved."

Senator Tim Scott, R-S.C., decided to post a video on 'X' calling the verdict an "injustice."

Representative Marjorie Taylor Greene, R-Ga., didn't use words, but instead, posted a photo of an upside-down American flag in response to the verdict. The symbol, around the time of the Jan. 6 Capitol riots, was seen as a sign of support for former President Donald Trump.

Representative Adam Schiff, D-Calif., wrote in part on X, "despite his efforts to distract, delay and deny, justice arrived for Donald Trump all the same."

Singer and actress Barbara Streisand said in part, "Americans must not allow this felon anywhere near the White House again."

Roseanne Barr, an outspoken supporter of Donald Trump, reacted to the verdict by writing "Lol" which stands for laugh out loud.

Actor Billy Baldwin tweeted in part, "Election interference, espionage and inciting an insurrection coming up."

Actor James Woods defended former President Trump, saying on X, "Had the jury been given clear instructions and returned a guilty verdict on a few counts, it would have been more authentic. This was simply ridiculous."

Musician and Sopranos actor Stevie Van Zandt wrote on X, "guilty on all 34 counts."

Actor Dean Cain responded to the verdict, writing in part "What a joke our judicial system has become under the administration."

The first former U.S. president convicted of felony crimes is expected to speak Friday at 11 a.m. ET.

Navigation Menu

Search code, repositories, users, issues, pull requests..., provide feedback.

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly.

To see all available qualifiers, see our documentation .

• Notifications You must be signed in to change notification settings

Making an awesome presentations easy with React

GeorgioWan/react-impressjs

Folders and files, repository files navigation, react-impressjs.

impress.js via React 🎉

Why React-impressJS

Easy to create an impressive Slide / Introduction / Presentation in ReactJS.

Quick Navigation

Navigation on mobile devise (yes we provide mobile browser now 🎉).

Just Swipe to navigate:

swipe right : Go to the previous Step.

swipe left : Go to the next Step.

Navigation on PC/Laptop

You can use Spacebar or Arrow keys to navigate, and here's all the keys for navigation:

← or ↑ or PageUp : Go to the previous Step.

→ or ↓ or Space or PageDown : Go to the next Step.

Home : Go to the first Step.

End : Go to the last Step.

p.s. You can also Click the Step directly.

Progress (Step Counter)

Provide progress bar and Slide Counter (current/total number), let presentation more clearly.

Hash Permalinks

You can navigate to the Step you want with #/step-id .

React-impressJS have two components: <Impress /> and <Step /> , as same as impress.js .

<Impress /> contains the root of impress and the camera , then put <Step /> inside impress component, magic happens ✨

What's impress.js !? It's an awesome presentation framework power of CSS3 transorms and transitions, please check THIS first!!

Impress props

Currently, you can use style of impress.js or React-impressJS in your app:

We suggest you use the React-impressJS . If you have the better one, I'm glad you can share with us, expect yours! 😁😁

Development

This Component is still under development, if you have any suggestion, you could tell me in issue or fork this repo 💪

React-impressJS is released under the MIT license .

This project was bootstrapped with Create React App .

Contributors 2

• JavaScript 73.7%

New to Shacknews? Signup for a Free Account

Already have an account? Login Now

•  Subscribe

•  Latest Pets
•  Forum: Posts today 1438

Shack Chat: What's your favorite announcement from PlayStation's May 2024 State of Play?

The Shacknews staff reacts to this week's State of Play presentation from PlayStation.

There were some exciting announcements to come out of Thursday's State of Play presentation from PlayStation. There's now a clearer picture of what's coming to Sony's console later this year, but what single announcement stood out to the Shacknews staff. We're weighing in with our picks and welcome you to chime in with your own.

Question: What's your favorite announcement from PlayStation's May 2024 State of Play?

Astro bot - ozzie mejia, senior mascot jumper.

I'm a sucker for mascot platformers. I grew up on Mario, Sonic, and Crash. I even enjoy the second and third-tier ones. I thought Super Lucky's Tale was a perfectly underappreciated romp, for example. That's why I was thrilled to see Astro Bot, which I fully expected to be a cynical marketing ploy for other PlayStation properties. And, granted, it is that, judging by how many cameos are on display, but it looks like a lot of fun too. So sure, count me in.

Monster Hunter Wilds - TJ Denzer, Senior Charge Blade Main

I've been very excited to see the next mainline Monster Hunter come to fruition and everything we saw in the State of Play just stoked that fire. The monsters looked burly and unforgiving, the Great Sword's new attacks have me excited for upgrades to my own main weapon classes, and the weather effects and terrain look rugged as heck.

And let's talk about character design. Capcom's RE Engine has made for beautiful and stylish characters for years, but they're looking top of their game in Wilds. I especially liked who I assume must be our new handler and guide. She looked cool as hell, like she belonged in Street Fighter or Devil May Cry. It also gets me hyped to make my own character. Top-notch showing all around and I'm excited to see more.

Monster Hunter Wilds - Asif Khan, Shacknews CEO/EIC/EIEIO

After taking nearly a decade off of the Monster Hunter series, I am ready to spend 400 hours preparing for battles with giant monsters and fishing for random stuff. Monster Hunter Wilds looks like it builds on everything they got right in Monster Hunter World, and I am ready to sink hundreds of hours into that world again.

God of War Ragnarok on PC - Bill Lavoy, Samurai

While there is little question that I will spend 1,000 hours in Monster Hunter Wilds, most of our team chose that, and Sam Chandler is about to tell you all about it again in his response below. Thanks a lot, Sam!

Instead, I'm going to talk about God of War Ragnarok coming to PC. I'm smack in the middle of Ghost of Tsushima on PC after waiting nearly four years to play that game. I'm a PC nerd to my core, and I never did get around to beating Ragnarok on PS5. However, I'm definitely going to play it to completion on PC when it releases. So, in the interest of not making this a sweep for Monster Hunter Wilds, I'm going with God of War Ragnarok.

Monster Hunter Wilds - Sam Chandler, Insect Glaive main

Monster Hunter World was the first MH game I played and I totally got it. I totally understood why players have long loved the series. I didn't really connect with the Stories spin-offs or even Rise, but the upcoming release of Wilds has me jazzed. Every single thing I see about this upcoming title looks incredible and the gameplay trailer from State of Play ratified my position: this game is gonna rule.

Concord - Donovan Erskine, Green Arrow Main

I'll be the outsider on this one! I think the world and characters for Concord actually look really cool. That cinematic kind of made me wish this was a narrative-driven story game, but the PvE looks solid, too. It has its own style, and the decision to launch simultaneously on PC might actually give this thing a fighting chance. Why not!

Astro Bot- Steve Tyminski, Stevetendo show host, Do the robot!

What was my favorite announcement from PlayStation's June 2024 State of Play? I think if I have to come up with one word to describe the presentation, it would be “ok.” There were a few games that I could see myself playing when they were released, but for the most part, the presentation didn't really do anything for me. Infinity Nikki looks like a fun time and one of those games that you don't know what to think going into it and then having a fun time. Until Dawn is another game that caught my interest. I like watching streamers play games like this because it feels like I'm watching a movie. I think the idea of picking scenarios for characters that I like and doom the ones I hate is fun, too.

Astro Bot reminds me a lot of an old-school Nintendo game and that always get me interested. I also like when games pay homage to history with little easter eggs strewn throughout the gameplay. My answer for this question would have to be Astro Bot with honorable mention to Infinity Nikki and Until Dawn.

Those are our picks, but what are yours? Let us know what impressed you from the May 2024 State of Play. Join the conversation and let us know in the comments or jump into the Official Shacknews Community Discord .

Shack Staff stories are a collective effort with multiple staff members contributing. Many of our lists often involve entires from several editors, and our weekly Shack Chat is something we all contribute to as a group. 

• PlayStation State of Play

Shack Staff posted a new article, Shack Chat: What's your favorite announcement from PlayStation's May 2024 State of Play?

Astro Boy stole the show.

Bot, you dumb phone.