react presentations

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

ReactJS Powered Presentation Framework

ReactJS based Presentation Library.

Getting Started

The new best way to get started is by running create-react-app my-presentation --scripts-version spectacle-scripts . This will use create-react-app to create almost everything you need. This however, doesn't include publish scripts, and ejecting is required for fancy stuff.

The second best way to get started is by using the Spectacle Boilerplate .

Alternatively, you can npm install spectacle and write your own build configurations. We also provide full UMD builds (with a Spectacle global variable) of the library at dist/spectacle.js and dist/spectacle.min.js for more general use cases. You could, for example, include the library via a script tag with: https://unpkg.com/spectacle@VERSION/dist/spectacle.min.js .

Note that we have webpack externals for react , react-dom , and prop-types , so you will need to provide them in your upstream build or something like linking in via script tags in your HTML page for all three libraries. This comports with our project dependencies which place these three libraries in peerDependencies .

But really, it is SO much easier to just use the boilerplate. Trust me.

To aid with speedy development / kicking the tires on spectacle, we support using a simple boilerplate HTML page with a bespoke script tag that contains your entire presentation. The rest of the setup will take care of transpiling your React/ESnext code, providing Spectacle, React, and ReactDOM libraries, and being raring to go with a minimum of effort.

We can start with this project's sample at one-page.html . It's essentially, the same presentation as the fully-built-from-source version, with a few notable exceptions:

There are no import s or require s. Everything must come from the global namespace. This includes Spectacle , React , ReactDOM and all the Spectacle exports from ./src/index.js -- Deck , Slide , themes , etc.

The presentation must include exactly one script tag with the type text/spectacle that is a function. Presently, that function is directly inserted inline into a wrapper code boilerplate as a React Component render function. The wrapper is transpiled. There should not be any extraneous content around it like outer variables or comments.

Good examples:

Bad examples of what not to do:

... with those guidelines in mind, here's the boilerplate that you can literally copy-and-paste into an HTML file and start a Spectacle presentation that works from the get go!

Development

After downloading the boilerplate, your first order of business is to open terminal and run npm install

Next run rm -R .git to remove the existing version control.

Then, to start up the local server, run npm start

Open a browser and hit http://localhost:3000 , and we are ready to roll

Build & Deployment

Building the dist version of the slides is as easy as running npm run build:dist

If you want to deploy the slideshow to surge, run npm run deploy

⚠️ If you are deploying the dist version to GitHub Pages , note that the built bundle uses an absolute path to the /dist/ directory while GitHub Pages requires the relative ./dist/ to find any embedded assets and/or images. A very hacky way to fix this is to edit one place in the produced bundle, as shown in this GitHub issue .

Spectacle comes with a built in presenter mode. It shows you a slide lookahead, current time and your current slide:

Otherwise, it can also show you a stopwatch to count the elapsed time:

To present:

Run npm start
Open two browser windows on two different screens
On your screen visit http://localhost:3000/ . You will be redirected to a URL containing the slide id.
Add presenter& or presenter&timer immediately after the questionmark, e.g.: http://localhost:3000/#/0?presenter or http://localhost:3000/#/0?presenter&timer
On the presentation screen visit http://localhost:3000/
Give an amazingly stylish presentation

Note: Any windows/tabs in the same browser that are running Spectacle will sync to one another, even if you don't want to use presentation mode

Check it out:

You can toggle the presenter or overview mode by pressing respectively alt+p and alt+o .

Fullscreen can be toggled via browser options, or by hovering over the bottom right corner of your window until the fullscreen icon appears and clicking it .

Exporting a totally sweet looking PDF from your totally sweet looking Spectacle presentation is absurdly easy. You can either do this via the browser, or from the command line:

Run npm install spectacle-renderer -g
Run npm start on your project and wait for it to build and be available
Run spectacle-renderer
A totally cool PDF is created in your project directory

For more options and configuration of this tool, check out:

https://github.com/FormidableLabs/spectacle-renderer

Open http://localhost:3000/
Add export& after the ? on the URL of page you are redirected to, e.g.: http://localhost:3000/#/?export&_k=wbyhif
Bring up the print dialog (ctrl or cmd + p)
Check "Background Graphics" to on if you are about that life
Change destination to "Save as PDF", as shown below:

If you want to print your slides, and want a printer friendly version, simply repeat the above process but instead print from http://localhost:3000/?export&print

Basic Concepts

Your presentation files & assets will live in the presentation folder.

The main .js file you write your deck in is /presentation/index.js

Check it out here in the boilerplate.

Here is where you can use the library's tags to compose your presentation. While you can use any JSX syntax here, building your presentation with the supplied tags allows for theming to work properly.

The bare minimum you need to start is a Deck element and a Slide element. Each Slide element represents a slide inside of your slideshow.

In Spectacle, themes are functions that return style objects for screen & print .

You can import the default theme from:

Or create your own based upon the source.

index.js is what you would edit in order to create a custom theme of your own, using object based styles.

You will want to edit index.html to include any web fonts or additional CSS that your theme requires.

createTheme(colors, fonts)

Spectacle's functional theme system allows you to pass in color and font variables that you can use on your elements. The fonts configuration object can take a string for a system font or an object that specifies it‘s a Google Font. If you use a Google Font you can provide a styles array for loading different weights and variations. Google Font tags will be automatically created. See the example below:

The returned theme object can then be passed to the Deck tag via the theme prop, and will override the default styles.

A collection of easy to use charts for your React applications

Animated shuffling of child components on change, you might also like..., fast interface building for react, the html-first framework. instant apps of any size with ~ 1kb js, flexible, framework-agnostic static site generation for sites and spas built with vite, subscribe to react.js examples.

Get the latest posts delivered right to your inbox

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.

The Complete React Tutorial for 2021 – Learn Major React Concepts by Building a Project

Welcome to the complete React tutorial for 2021. This guide should help you become effective with React as quickly as possible as you build a complete application along the way.

Compared to many tutorials you might have gone through before, this one is meant to be thoroughly practical from start to finish.

You will learn how to create an entire React application all within around 100 lines of code, which makes use of many of the core concepts of React: hooks, state management, forms, JSX elements, components, props, styling, and conditionals.

And best of all, you will learn all of these concepts while coding yourself, hands-on. Let's get started!

How to Bootstrap our React Project

We're going to create our React application by going to the website react.new .

What this will do is create a new code sandbox for us. We can use code sandbox to create and develop complete React applications without having to install anything on our computer.

Once you visit react.new, you will see your code editor and, on the right hand side, we see a live version of our application to which we can make changes:

Quick tip: Make sure to hit command/ctrl S. Doing so will fork our sandbox and create a special URL that we can revisit in the future.

Right now we're looking at our app component, which is the only component that's being displayed in our application. If we look at our file explorer on the left, we'll see app is being imported and rendered here within this index.js file.

What does all of this code do?

It simply "renders" or displays our app by injecting it into an index.html file, which is what we see on the right hand side of the page.

The code also finds and puts our app in the so-called root element (a div with the id of "root"). If you want see where that element is, you can find it within our public folder, specifically in the index.html file.

How to Use JSX

Now that we have a working React app, let's start building it and changing what we see.

Let's begin within our div by removing this h2 element, and within our h1, just calling our app "Todo List":

What we are working with here is called JSX . It looks very similar to HTML, but is in fact JavaScript. We use it to build the structure of our application, just as we would use HTML.

We can use any standard HTML elements within JSX: divs, any heading element, paragraph, spans, buttons, and so on.

It's important to note that there are some minor differences between JSX and HTML.

The attributes that we use on JSX are slightly different than in normal HTML elements. They are written in the camelcase style, which is a standard way of writing variables or properties in JavaScript.

For example, to apply a class on a JSX element, we use an attribute called className . For normal HTML, that would just be called class .

If we use class instead of className for JSX, we're going to get a warning saying class is an invalid DOM property:

How to Create a List of Todo Elements

Since we're making a todo application, let's create our todo list underneath our h1 header.

We could begin by making an unordered list with some list items as children elements. Each todo would be listed within an li element:

We can do something better as React developers, however. Instead, let's make a dedicated component that is responsible for displaying our todos.

How to Create New React Components

Components are the backbone of any React application.

We use components to separate different parts of our user interface. This makes them reusable wherever we need them across our app, it better organizes our code, and it makes it easier to understand our projects.

Components fulfill an important concept in programming which is called "separation of concerns." This means it is preferable for each part of our component to have its own clearly defined role and responsibilities, separate from any other component.

Just as we have an App component, we can create a component to be displayed within App. Since it is a list of todos, let's call it "TodoList":

React Component rules

Every component must begin with a capital letter. And once a component is declared, it can be written and used very similarly to an HTML element.

A component can consist of just one tag or two tags. If it doesn't have anything between the two tags, which are called children , it should only have as one tag as the code above displays: <TodoList /> .

Additionally, if a component or element consists of just one tag, it must be self-closing. Meaning, it must end in a forward slash (like <TodoList /> and not <TodoList> ).

We are attempting to display our TodoList component, but we haven't created it yet. To do that, we can create another function component like App, with the name TodoList.

At this point, we're going to get this error saying nothing was returned from render:

We need to return something, specifically some JSX. Every component we make must return JSX elements and components (which must also, ultimately, be composed of JSX).

In our case, we want to return our list of todos. Let's take our unordered list with all of our list items that we want to show. We don't really have any data just yet, so let's create some.

In particular, let's create a set of todo data, which we can include in an array. Let's add this to the App component:

How to Pass Data to Components with Props

Now the question is – how do we pass all this data to and display it within our todo list?

With React components, we can do that with special properties that we add to the component called props.

Props are custom attributes we can add to React components to pass data to our components. They are the React equivalent of arguments in JavaScript.

Since our data is called todos, let's name our prop the same: "todos". We use the equals operator to set a prop's value as well as a set of curly braces. This is because our todos array is a variable (a dynamic value):

If we wanted to make it a string, for example, we would wrap it in a set of quotes. But since this is a dynamic value that can change, we want to always include it within curly braces.

Within the TodoList component, where are our props going to be received to ultimately display our todos data? They're going to be received exactly where any function would receive their arguments.

We receive our prop data on an object which we usually call "props", but we can give it whatever name we like.

We can see that we're passing this data down by using console.log(props) . If we look at our console tab, we have this property on our props object called "todos".

It has an array of three items just like we would expect:

How to Map Over Array Items with the Map Function

In order to display each of these list items, we can take the array that is on props.todos .

In particular, we can use a special function that React gives us on the todos array called map .

Since we want to display this within TodoList, we once again need to use a set of curly braces to display it within our JSX. Using props.todo.map , we will map over this array just like we would a normal JavaScript array.

The React map function is slightly different than the normal JavaScript map function because it is made to return and render JSX elements.

.map() accepts an inner function and in that function, we can get access to each todo. Using an arrow function, we can return each todo within its own JSX.

Finally, we can immediately return that JSX by wrapping it in a set of parentheses:

Within our inner function, we get access to each todo's data. To display that data, we can take each todo which we know is an object. We can use a set of curly braces to output the dynamic value of whatever is on todo.text .

When we do that, we can see our three todos:

What are React Keys (and Why They Matter)?

If we look at the console tab at the bottom we will see a warning, saying each child in the list should have a "unique key prop."

The reason for this is that React needs to keep track of the order of each of the items in our list. It does so with the help of a special React prop called a key .

For a key, you generally want to use a unique identifier, a unique value that is only associated with one piece of data. In our case, to identify each todo's data we will use the unique number provided on todo.id .

So why are keys important? It is important for React to figure out how it should appropriately update our user interface. If we were to update a todo's text or done value, the key is what tells React which todo item needs to be updated.

Once we add the key prop to the element or component that we're looping over, we no longer get that warning:

How to Get Individual Props with Destructuring

Note that one additional shorthand is that instead of referencing the entire object within the TodoList, we can reference the individual properties on that object to make our code a little bit shorter by using object destructuring.

Object destructuring is not a React concept, but a standard JavaScript feature that makes accessing object properties easier by immediately declaring them as individual variables.

As of right now, we only have one prop being passed down to TodoList, so let's destructure that one prop, todos , individually.

To do so, we add a set of curly braces within our functions parameters, and just grab the property that we need from the props object. This means that we can change props.todos to just todos :

How to Add New Todo List Items

Now what about adding some new todos to our list?

Underneath our TodoList component, let's add a new component that's responsible for adding new todos. A logical name for this would be "AddTodo".

We can create this underneath our to do list component. Let's have AddTodo return a form element that contains a basic text input and a submit button.

Note that any JSX element that consists of just one tag (such as our input) must end in a forward slash. If we do not include it, we're going to get a compiler error saying "unterminated JSX contents."

Now the question is: how do we type into our input, submit our form, and have a new todo added to our todos array?

How to Handle Form Submissions in React

To take care of submitting our form, we need to start working with events in React.

In our case, we want to use the "submit" event when our form is submitted by our user and for React to handle that form submission by adding a new todo.

React adds a special prop to the form element called onSubmit . onSubmit accepts a function within a set of curly braces. Let's create a new function, which we will call handleAddTodo .

Note that most functions that handle events in React are prefixed with the word "handle". It's ultimately up to you how you want to name your functions, but this is a helpful convention.

It's important to note that this function should be created within the component itself (AddTodo), not outside of it. When handleAddTodo is passed to the onSubmit prop, it will be called when our form is submitted:

How to Prevent Default Form Behavior

When we click the submit button or hit the return key, data from the submit event is passed automatically to our function that's connected to onSubmit. We receive that event data in the parameters of handleAddTodo .

The first thing that we want to do with this event is call a method on it called .preventDefault() . This method prevents the default action whenever we submit a form:

Whenever we submit a form, by default, the page is refreshed. We don't want that behavior with React – we want JavaScript to control whatever happens next.

After preventing a refresh, we want to get access to what was typed into the input to create a new todo with it. How do we do that?

How to Access Form Data on Submit

The way that we get access to all of the elements within our form is with the help of the property event.target.elements .

First of all, this will give us the event target, which is the form itself. elements is a property that will give us all of the elements within that form, including our input and our submit button.

If we were to console.log event.target.elements right now, submit our form, and look at our console, we see just an object with a couple of properties, one called "0", and one called "1".

This isn't very helpful to us, although we do see that it is our input and our button:

Instead, we want to get what was typed into our input.

To do so, we can add either an "id" or a "name" attribute to our input. Let's add the name attribute with a value of "addTodo". When we hit submit again, this will give us a new property on the elements object also called addTodo . From that reference, we can very easily get what was typed into it.

This allows us to use event.target.elements.addTodo.value to get what was typed in whatever text was typed in. When we do so, when we type text into our input, and hit submit, we see it logged to the console:

Now that we have our text, we'll put it in a variable called "text". Using this, we want to create a new todo.

We know that each todo is an object and it has to consist of the properties id, text, and done. Let's create a variable todo and that will be equal to a new object where the id will be 4, the text will be equal to the text that we're getting from the elements object, and we can set done to false.

By default, new todos that are added are not going to be done:

And finally, the big question is, how do we add this todo to our array, todos ?

Introduction to State in React

This is where the concept of state comes in.

Right now we're dealing with static data – there is no real way to update this todos array. To be clear, there is a way to do it using JavaScript, but what we are not currently able to do is tell React, even if we were to update it, that it needs to re-render this list.

In other words, to perform an update to our data and then show us the updated data in our view. So while we could update the data, we also need React to show our users the updated data.

State is required to fix our problem.

State is a means of managing our application data and also allows React to update our UI (user interface) in response to data changes.

How to Manage State in React with the useState Hook

We can manage state in React using the useState hook. To use the useState hook, the first thing that we need to do is import React up at the top, because useState comes from the core React library.

After that, we can simply call the useState hook up at the top of our app component. Once we call useState just like a normal function, we will pass in our entire array of todos as our initial data. Our application will break for a moment since we're no we're no longer showing our todos just yet.

useState returns an array with two elements:

The initial value we called useState with (our array of todos) and this becomes our state variable
A special function that allows us to update what is stored in the state variable

We can destructure the values that are returned from useState by adding a set of array brackets to immediately get the values that are returned from it. First the state and second, the function to update the state:

We'll call our state variable todos and the setter to manage our state setTodos .

All we have to do to update our state is to pass it, whatever we want the new state to be. This setTodos function is going to be passed down to our AddTodo component, so let's add that as a prop of the same name. We'll also destructure setTodos from our props object within AddTodo.

And finally, we can call setTodos at the bottom of handleAddTodo . What's great about this function is instead of having to pass down the todos array as well, this function can give us the previous state with the help of a function that we can receive inside of it:

This may seem strange at first, but within setTodos we get access to the previous todo data. If we write an arrow function or any function for that matter, we can simply provide what we want the new state to be.

The benefit of being able to access the previous state variable's value directly within the setter function is that it prevents us from having to pass down the entire todos state variable as an additional prop to every component in which we want to update its value.

If we wanted to empty our todos state, we could just return an empty array right here. If we were to submit our form, we would see that all of our todos were removed.

Once we submit our form, state is updated, and our app is re-rendered as a result.

Re-renders in React

Note that any re-render within a parent component will cause any child components to re-render. That means whenever our todo data is updated, the TodoList component (a child of the App component) is updated with that new data.

If we go back to handleAddTodo , we can take our previous todos and use the .concat() method to add this new todo to our array in state. All we have to do is return this expression.

Let's add a new todo, such as "Balance Checkbook." Once we hit submit, we see that immediately added to our list:

Now there's one problem here: we aren't clearing out our input after our form is submitted.

This means if we wanted to add another todo we would have to manually clear it out. How do we take this input's value and clear it out?

React refs and useRef

To perform common actions such as clearing out an input's value or focusing our input we can use what's called a ref .

A ref is a feature that React provides to reference to a given DOM element.

In this case, we want a reference to this input element with the name of "addTodo."

Just like our state, we can work with refs by calling the appropriate React hook. To create a ref, we just need to call React.useRef() at the top of AddTodo. We don't have to pass it an initial value, but we can give it a default value if we needed to.

We will call this created ref inputRef . Using inputRef, we can create a reference to our input element which we can access wherever we like by using the built-in ref prop by setting ref={inputRef} :

What does this do? It allows us within handleAddTodo to use the property inputRef.current , which contains the input element itself. If we were to log input.ref.current , we would see our input element.

We have a direct reference to our input, which means we access any property that we like off of it. In our case, we want to take the value of the input on the value property. To clear the value from our input, we can just mutate inputRef directly by setting value to an empty string:

Whenever we hit submit, our input is cleared out without having to clear it out ourselves manually.

Essential Rules of React Hooks

Since useRef is another React hook, we're starting to see some common features among React hooks. They are often prefixed with the word "use". In fact, most all React hooks have this prefix to denote that they are hooks and should be used as such.

Additionally, React hooks are called up at the very top of function components. Hooks cannot be used within class components. And finally, hooks cannot be conditional (that is, used within an if statement).

But as you can see, there's nothing too special about React hooks. They operate very much like regular JavaScript functions.

How to Mark Todos as Done with onClick

After creating todos, we want to toggle them done – to strike through them if we've finished a given todo. How do we add this feature?

If we go back to our list item, within TodoList, we can see what that will look like by applying some inline styles. We saw how to add styles through classes. For styles that we want to apply inline to any given element, we cannot use the same syntax as we would with normal HTML.

If we tried to using the HTML syntax, we're going to get an error telling us "the style prop expects style properties within an object, not within a string":

To fix this, we will provide an object. We need to provide this object within another set of curly braces. Then, we will provide any property like we would in a normal JavaScript object to apply this strike through style.

For each of our list items, we can set the property textDecoration to "line-through":

We do not want every item to be struck through, we only want this to be applied if a given todo is done. How do we do that?

We can use a normal JavaScript conditional, in particular a ternary, to say that if a given todo's property done is true, then we want to apply the strike through value for text decoration, otherwise not.

If we change one of our todos array to have a done value of true , we see that that style rule is applied:

How do we actually toggle that todo?

We might want our user to click or double click on our todo in order to strike through it. That means we want to see how to register and handle a new type of event – a click event.

To handle a click event with React we provide the onClick prop to a given element for which we want to register that event. In this case, it's the li element.

Once again, we need to connect it to a function to handle our click event. We're going to call this handleToggleTodo and create it within our TodoList component. In this case, our function that we use to handle the event doesn't have to receive any event data. This function will handle updating our todo's state.

We want handleToggleTodo to go through the todos array and see if the one that the user has clicked on exists in our array. If so, its done value can be toggled to the opposite boolean value.

To receive the appropriate todo data for the appropriate list item that is clicked on, we can call handleToggleTodo as an inline arrow function and pass the todo data as an argument:

To update our todos state, we'll pass down setTodos to our TodoList component. We'll pass down setTodos as a prop to TodoList, and destructure it from the props object.

Once again, we can call setTodos and get access to the previous todos by including an inner function. First, what we can do is take our entire todos array and map over it with the .map() array function.

In the inner function passed to map, we will check that the todos id we're mapping over is equal to the todo that we've clicked on. If so, we return a new object with all of the previous todo's properties, but with done toggled to its opposite boolean value:

Otherwise, if that todo that we're iterating over is not the one that we clicked on, we just want to return it (without changing it). This updated array is what we'll pass to setTodos to update our state.

If we click on a todo, we toggle it done. If we click on it again, it's toggled back to undone:

For this to work appropriately, to see that a past todo's id is equal to the todo that we're clicking on, we need to make sure that each todo's id is unique.

Instead of setting each new todo to have an id of 4, we can just use Math.random() to make a semi-random value and ensure there are no list items with the same id.

Finally, as an alternative to onClick , we can use another event prop, onDoubleClick , in the event that users accidentally click a given todo. Now if a user double clicks a list item, only then do we toggle it done.

How to Handle Deleting Todos

The final bit of functionality that we're looking for is to be able to delete a given todo.

We can add that functionality within TodoList by adding another nested component. Underneath our todo text, we'll add a new component: DeleteTodo. Let's declare this new component above where we declared AddTodo.

What will this component consist of? In it, we will return a span, which will function like a button for us. A user can click on this and delete a given todo.

If you want a non-button element to operate like a button, we need to make its "role" property set to "button".

To our span, let's add some style rules – we can give it a color of red, make it bold, and separate it from the todo text by setting marginLeft: 10 . What's neat about the style object is that we don't have to say 10 pixels as a string – we can use the value 10 or include any integer that we like.

Here is the code for our DeleteTodo component so far:

To delete a todo, we want to be able to click on it and show a confirmation dialog. If the user confirms they want to delete it, only then is the todo removed.

Since we're mapping over each todo item, including DeleteTodo, we can pass down a prop called just todo with each todo's data on it.

In DeleteTodo, on our span element, we want to add an onClick to handle deleting our todo. To handle this, we will call a new function: handleDeleteTodo .

Using this function, we first want to show a confirmation dialog. We can do so by saying window.confirm() with the message, "Do you want to delete this"? window.confirm is going to return a value of true or false based on whether the user has confirmed the dialog or not. We'll put the result of this action in a variable called confirmed :

If confirmed is true, only then do we want to delete the todo.

To do that, we need to use setTodos once again. We'll pass it down one more level from TodoList to the DeleteTodo component and destructure it from the props object.

Then, within handleDeleteTodo , we can call it and use the inner function to get the previous todos. To remove the todo that a user has clicked on, we can filter through this array to make sure that we are removing the one that the user selected.

To do so, we make sure all the todos in our array do not have an id equal to the one we are attempting to delete:

Now if we attempt to delete one of our todos, we see our confirmation dialog, we hit "ok", and immediately it's removed from our list.

If we delete all of our todos, we no longer see anything. If we want to tell our user there are no todos in the list when the array is empty, let's head up to our TodoList component.

If we have an empty todos array, we can add a conditional above our return and check if our array's length is equal to 0. If so, we will display a paragraph element with the text "No todos left":

Congratulations!

You now have a working todo app that has full CRUD functionality that can create, read, update, and delete todos.

You've been able to see how many of the major React concepts work firsthand and you're now in a great position to start building your own React applications.

If you would like to take a look at our final app code, you can see it here .

Become a Professional React Developer

React is hard. You shouldn't have to figure it out yourself.

I've put everything I know about React into a single course, to help you reach your goals in record time:

Introducing: The React Bootcamp

It’s the one course I wish I had when I started learning React.

Click below to try the React Bootcamp for yourself:

Full stack developer sharing everything I know.

If this article was helpful, share it .

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

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

The library for web and native user interfaces

Create user interfaces from components

React lets you build user interfaces out of individual pieces called components. Create your own React components like Thumbnail , LikeButton , and Video . Then combine them into entire screens, pages, and apps.

Video description

Whether you work on your own or with thousands of other developers, using React feels the same. It is designed to let you seamlessly combine components written by independent people, teams, and organizations.

Write components with code and markup

React components are JavaScript functions. Want to show some content conditionally? Use an if statement. Displaying a list? Try array map() . Learning React is learning programming.

VideoList.js

First video, second video, third video.

This markup syntax is called JSX. It is a JavaScript syntax extension popularized by React. Putting JSX markup close to related rendering logic makes React components easy to create, maintain, and delete.

Add interactivity wherever you need it

React components receive data and return what should appear on the screen. You can pass them new data in response to an interaction, like when the user types into an input. React will then update the screen to match the new data.

SearchableVideoList.js

React videos.

A brief history of React

React: The Documentary

The origin story of React

Rethinking Best Practices

Pete Hunt (2013)

Introducing React Native

Tom Occhino (2015)

Introducing React Hooks

Sophie Alpert and Dan Abramov (2018)

Introducing Server Components

Dan Abramov and Lauren Tan (2020)

You don’t have to build your whole page in React. Add React to your existing HTML page, and render interactive React components anywhere on it.

Go full-stack with a framework

React is a library. It lets you put components together, but it doesn’t prescribe how to do routing and data fetching. To build an entire app with React, we recommend a full-stack React framework like Next.js or Remix .

confs/[slug].js

React 18 Keynote

The React Team

React 18 for App Developers

Shruti Kapoor

Streaming Server Rendering with Suspense

Shaundai Person

The First React Working Group

Aakansha Doshi

React Developer Tooling

Brian Vaughn

React without memo

Xuan Huang (黄玄)

React Docs Keynote

Rachel Nabors

Things I Learnt from the New React Docs

Debbie O'Brien

Learning in the Browser

Sarah Rainsberger

The ROI of Designing with React

Interactive Playgrounds with React

Delba de Oliveira

Re-introducing Relay

Robert Balicki

React Native Desktop

Eric Rozell and Steven Moyes

On-device Machine Learning for React Native

Roman Rädle

React 18 for External Store Libraries

Daishi Kato

Building Accessible Components with React 18

Accessible Japanese Form Components with React

Tafu Nakazaki

UI Tools for Artists

Lyle Troxell

Hydrogen + React 18

React is also an architecture. Frameworks that implement it let you fetch data in asynchronous components that run on the server or even during the build. Read data from a file or a database, and pass it down to your interactive components.

Use the best from every platform

People love web and native apps for different reasons. React lets you build both web apps and native apps using the same skills. It leans upon each platform’s unique strengths to let your interfaces feel just right on every platform.

Stay true to the web

People expect web app pages to load fast. On the server, React lets you start streaming HTML while you’re still fetching data, progressively filling in the remaining content before any JavaScript code loads. On the client, React can use standard web APIs to keep your UI responsive even in the middle of rendering.

Go truly native

People expect native apps to look and feel like their platform. React Native and Expo let you build apps in React for Android, iOS, and more. They look and feel native because their UIs are truly native. It’s not a web view—your React components render real Android and iOS views provided by the platform.

With React, you can be a web and a native developer. Your team can ship to many platforms without sacrificing the user experience. Your organization can bridge the platform silos, and form teams that own entire features end-to-end.

Upgrade when the future is ready

React approaches changes with care. Every React commit is tested on business-critical surfaces with over a billion users. Over 100,000 React components at Meta help validate every migration strategy.

The React team is always researching how to improve React. Some research takes years to pay off. React has a high bar for taking a research idea into production. Only proven approaches become a part of React.

Latest React News

React Conf 2024 Recap

React 19 rc, react 19 rc upgrade guide, react labs: february 2024, join a community of millions.

You’re not alone. Two million developers from all over the world visit the React docs every month. React is something that people and teams can agree on.

This is why React is more than a library, an architecture, or even an ecosystem. React is a community. It’s a place where you can ask for help, find opportunities, and meet new friends. You will meet both developers and designers, beginners and experts, researchers and artists, teachers and students. Our backgrounds may be very different, but React lets us all create user interfaces together.

Welcome to the React community

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

The HTML Presentation Framework

Created by Hakim El Hattab and contributors

Hello There

reveal.js enables you to create beautiful interactive slide decks using HTML. This presentation will show you examples of what it can do.

Vertical Slides

Slides can be nested inside of each other.

Use the Space key to navigate through all slides.

Basement Level 1

Nested slides are useful for adding additional detail underneath a high level horizontal slide.

Basement Level 2

That's it, time to go back up.

Not a coder? Not a problem. There's a fully-featured visual editor for authoring these, try it out at https://slides.com .

Pretty Code

Code syntax highlighting courtesy of highlight.js .

Even Prettier Animations

Point of view.

Press ESC to enter the slide overview.

Hold down the alt key ( ctrl in Linux) and click on any element to zoom towards it using zoom.js . Click again to zoom back out.

(NOTE: Use ctrl + click in Linux.)

Auto-Animate

Automatically animate matching elements across slides with Auto-Animate .

Touch Optimized

Presentations look great on touch devices, like mobile phones and tablets. Simply swipe through your slides.

Add the r-fit-text class to auto-size text

Hit the next arrow...

... to step through ...

... a fragmented slide.

Fragment Styles

There's different types of fragments, like:

fade-right, up, down, left

fade-in-then-out

fade-in-then-semi-out

Highlight red blue green

Transition Styles

You can select from different transitions, like: None - Fade - Slide - Convex - Concave - Zoom

Slide Backgrounds

Set data-background="#dddddd" on a slide to change the background color. All CSS color formats are supported.

Image Backgrounds

Tiled backgrounds, video backgrounds, ... and gifs, background transitions.

Different background transitions are available via the backgroundTransition option. This one's called "zoom".

You can override background transitions per-slide.

Iframe Backgrounds

Since reveal.js runs on the web, you can easily embed other web content. Try interacting with the page in the background.

Marvelous List

No order here

Fantastic Ordered List

One is smaller than...
Two is smaller than...

Tabular Tables

Clever quotes.

These guys come in two forms, inline: The nice thing about standards is that there are so many to choose from and block:

“For years there has been a theory that millions of monkeys typing at random on millions of typewriters would reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.”

Intergalactic Interconnections

You can link between slides internally, like this .

Speaker View

There's a speaker view . It includes a timer, preview of the upcoming slide as well as your speaker notes.

Press the S key to try it out.

Export to PDF

Presentations can be exported to PDF , here's an example:

Global State

Set data-state="something" on a slide and "something" will be added as a class to the document element when the slide is open. This lets you apply broader style changes, like switching the page background.

State Events

Additionally custom events can be triggered on a per slide basis by binding to the data-state name.

Take a Moment

Press B or . on your keyboard to pause the presentation. This is helpful when you're on stage and want to take distracting slides off the screen.

Right-to-left support
Extensive JavaScript API
Auto-progression
Parallax backgrounds
Custom keyboard bindings

- Try the online editor - Source code & documentation

Create Stunning Presentations on the Web

reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free.

Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS, include an external web page using an <iframe> or add your own custom behavior using our JavaScript API .

The framework comes with a broad range of features including nested slides , Markdown support , Auto-Animate , PDF export , speaker notes , LaTeX support and syntax highlighted code .

Ready to Get Started?

It only takes a minute to get set up. Learn how to create your first presentation in the installation instructions !

Online Editor

If you want the benefits of reveal.js without having to write HTML or Markdown try https://slides.com . It's a fully-featured visual editor and platform for reveal.js, by the same creator.

Supporting reveal.js

This project was started and is maintained by @hakimel with the help of many contributions from the community . The best way to support the project is to become a paying member of Slides.com —the reveal.js presentation platform that Hakim is building.

Slides.com — the reveal.js presentation editor.

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

4 Dependencies
63 Dependents
51 Versions

Create JavaScript PowerPoint Presentations

Table of Contents

Introduction

Works everywhere, full featured, simple and powerful, export your way, html to powerpoint, additional builds, angular/react, es6, typescript, script/web browser, library api, html-to-powerpoint feature, library ports, issues / suggestions, contributors.

This library creates Open Office XML (OOXML) Presentations which are compatible with Microsoft PowerPoint, Apple Keynote, and other applications.

Every modern desktop and mobile browser is supported
Integrates with Node, Angular, React, and Electron
Compatible with PowerPoint, Keynote, and more
All major object types are available (charts, shapes, tables, etc.)
Master Slides for academic/corporate branding
SVG images, animated gifs, YouTube videos, RTL text, and Asian fonts
The absolute easiest PowerPoint library to use
Learn as you code will full typescript definitions included
Tons of demo code comes included (over 75 slides of features)
Exports files direct to client browsers with proper MIME-type
Other export formats available: base64, blob, stream, etc.
Presentation compression options and more
Includes powerful HTML-to-PowerPoint feature to transform HTML tables into presentations with a single line of code

Visit the demos page to create a simple presentation to see how easy it is to use pptxgenjs, or check out the complete demo which showcases every available feature.

PptxGenJS Demos

Installation

PptxGenJS NPM Home

jsDelivr Home

Bundle: Modern Browsers and IE11

Min files: Modern Browsers

GitHub Latest Release

Bundle: Modern Browsers

Use the bundle for IE11 support
CommonJS: dist/pptxgen.cjs.js
ES Module: dist/pptxgen.es.js

Documentation

Quick start guide.

PptxGenJS PowerPoint presentations are created via JavaScript by following 4 basic steps:

That's really all there is to it!

Full documentation and code examples are available

Creating a Presentation
Presentation Options
Adding a Slide
Slide Options
Saving a Presentation
Master Slides
Adding Charts
Adding Images
Adding Media
Adding Shapes
Adding Tables
Adding Text
Speaker Notes
Using Scheme Colors
Integration with Other Libraries

Easily convert HTML tables to PowerPoint presentations in a single call.

Learn more:

HTML-to-PowerPoint Docs/Demo

React: react-pptx - thanks to Joonas !

Please file issues or suggestions on the issues page on github , or even better, submit a pull request . Feedback is always welcome!

When reporting issues, please include a code snippet or a link demonstrating the problem. Here is a small jsFiddle that is already configured and uses the latest PptxGenJS code.

Sometimes implementing a new library can be a difficult task and the slightest mistake will keep something from working. We've all been there!

If you are having issues getting a presentation to generate, check out the code in the demos directory. There are demos for both client browsers, node and react that contain working examples of every available library feature.

Use a pre-configured jsFiddle to test with: PptxGenJS Fiddle
View questions tagged PptxGenJS on StackOverflow . If you can't find your question, ask it yourself - be sure to tag it PptxGenJS .

Thank you to everyone for the issues, contributions and suggestions! ❤️

Special Thanks:

Dzmitry Dulko - Getting the project published on NPM
Michal Kacerovský - New Master Slide Layouts and Chart expertise
Connor Bowman - Adding Placeholders
Reima Frgos - Multiple chart and general functionality patches
Matt King - Chart expertise
Mike Wilcox - Chart expertise
Joonas - React port

PowerPoint shape definitions and some XML code via Officegen Project

If you find this library useful, please consider sponsoring us through a donation

html-to-powerpoint
javascript-create-powerpoint
javascript-create-pptx
javascript-generate-pptx
javascript-powerpoint
javascript-powerpoint-charts
javascript-pptx
js-create-powerpoint
js-create-pptx
js-generate-powerpoint
js-powerpoint
js-powerpoint-library
js-powerpoint-pptx
react-powerpoint
typescript-powerpoint

Package Sidebar

npm i pptxgenjs

Git github.com/gitbrent/PptxGenJS

gitbrent.github.io/PptxGenJS/

Downloads Weekly Downloads

Unpacked size, total files, last publish, collaborators.

Interested in our next book? Learn more about Building Large-scale JavaScript Web Apps with React

Design Pattern

Container/Presentational Pattern

In React, one way to enforce separation of concerns is by using the Container/Presentational pattern . With this pattern, we can separate the view from the application logic.

Let’s say we want to create an application that fetches 6 dog images, and renders these images on the screen.

Ideally, we want to enforce separation of concerns by separating this process into two parts:

Presentational Components : Components that care about how data is shown to the user. In this example, that’s the rendering the list of dog images .
Container Components : Components that care about what data is shown to the user. In this example, that’s fetching the dog images .

Fetching the dog images deals with application logic , whereas displaying the images only deals with the view .

Presentational Component

A presentational component receives its data through props . Its primary function is to simply display the data it receives the way we want them to, including styles, without modifying that data.

Let’s take a look at the example that displays the dog images. When rendering the dog images, we simply want to map over each dog image that was fetched from the API, and render those images. In order to do so, we can create a functional component that receives the data through props , and renders the data it received.

The DogImages component is a presentational component. Presentational components are usually stateless: they do not contain their own React state, unless they need a state for UI purposes. The data they receive, is not altered by the presentational components themselves.

Presentational components receive their data from container components .

Container Components

The primary function of container components is to pass data to presentational components, which they contain . Container components themselves usually don’t render any other components besides the presentational components that care about their data. Since they don’t render anything themselves, they usually do not contain any styling either.

In our example, we want to pass dog images to the DogsImages presentational component. Before being able to do so, we need to fetch the images from an external API. We need to create a container component that fetches this data, and passes this data to the presentational component DogImages in order to display it on the screen.

Combining these two components together makes it possible to separate handling application logic with the view.

In many cases, the Container/Presentational pattern can be replaced with React Hooks. The introduction of Hooks made it easy for developers to add statefulness without needing a container component to provide that state.

Instead of having the data fetching logic in the DogImagesContainer component, we can create a custom hook that fetches the images, and returns the array of dogs.

By using this hook, we no longer need the wrapping DogImagesContainer container component to fetch the data, and send this to the presentational DogImages component. Instead, we can use this hook directly in our presentational DogImages component!

By using the useDogImages hook, we still separated the application logic from the view. We’re simply using the returned data from the useDogImages hook, without modifying that data within the DogImages component.

Hooks make it easy to separate logic and view in a component, just like the Container/Presentational pattern. It saves us the extra layer that was necessary in order to wrap the presentational component within the container component.

There are many benefits to using the Container/Presentational pattern.

The Container/Presentational pattern encourages the separation of concerns. Presentational components can be pure functions which are responsible for the UI, whereas container components are responsible for the state and data of the application. This makes it easy to enforce the separation of concerns.

Presentational components are easily made reusable, as they simply display data without altering this data. We can reuse the presentational components throughout our application for different purposes.

Since presentational components don’t alter the application logic, the appearance of presentational components can easily be altered by someone without knowledge of the codebase, for example a designer. If the presentational component was reused in many parts of the application, the change can be consistent throughout the app.

Testing presentational components is easy, as they are usually pure functions. We know what the components will render based on which data we pass, without having to mock a data store.

The Container/Presentational pattern makes it easy to separate application logic from rendering logic. However, Hooks make it possible to achieve the same result without having to use the Container/Presentational pattern, and without having to rewrite a stateless functional component into a class component.Note that today, we don’t need to create class components to use state anymore.

Although we can still use the Container/Presentational pattern, even with React Hooks, this pattern can easily be an overkill in smaller sized application.

Presentational and Container Components - Dan Abramov

How-To Geek

What are presentational and container components in react.

React has a component-based architecture that encourages you to split your codebase into reusable units of functionality.

Quick Links

Is there any state, looking at examples, characteristics of each type, advantages of separating presentational and container components.

React has a component-based architecture that encourages you to split your codebase into reusable units of functionality. Not all components are created equal though. Let's look at the differences between two common types, Presentational and Container (also known as "Stateful") components.

To begin with, it should be stressed that these terms don't refer to any specific React feature. They describe a style of writing React components which helps to maintain modularity and separate out concerns. The existence of the two component types arises from choices made in your codebase.

There's only one distinguishing factor: container components have state and presentational components do not. In practice, this means that a container component always makes a call to React's

method. A presentational component will never make use of state.

Here's a simple presentational component:

import React from "react";

class Presentational extends React.Component {

return <h1>{this.props.title}</h1>;

export default Presentational;

The component is extremely simple. It renders a single

tag which displays text passed into the component via its

prop. Let's now look at a stateful container component:

class Container extends React.Component {

constructor(props) {

super(props);

this.state = {

time: (new Date()).toString()

componentDidMount() {

setInterval(() => {

this.setState({time: (new Date()).toString()});

return <h1>{this.state.time}</h1>;

export default Container;

The container component's

method is almost identical to that in the presentational component. The difference is the container component sources its text from inside itself, instead of relying on an outside value passed in as a prop.

Each second, the container component calls

to update the

key in its state. This causes React to re-render the component and display the new time. Our container possesses its own state.

Several unique characteristics tend to arise within both presentational and container components. Looking at presentational components first, the bulk of their code is likely to exist within the

method. They'll contain very little logic as their behaviour is defined by the outside world.

Presentational components are blissfully unaware of where their data is coming from. They don't know when (or whether) it will change. Some examples may not even accept props. Here's a decorational element which simply renders a specific image file:

Container components are much the opposite of their presentational counterparts. You'll typically find most of your site's logic ends up within a container component. The

method may be comparatively short as you'll be spending many more lines fetching data from external sources, transforming it to suit your needs and then storing it into state.

A container component's

method could consist of a single line that renders a presentational component. You've now got strong separation of concerns, with both components having a distinct role that fully respects the other's. The container component sources the data; the presentational component puts it on the screen.

Here's how this looks in practice:

const View = ({title, body}) => (

<div>

<h1>{title}</h1>

</div>

class BlogPostComponent extends React.Component {

fetch("/blog-post.json")

.then(response => response.json());

.then(blog => this.setState({blog}));

title={this.state.blog.headline}

body={this.state.blog.content} />

is our container component. It loads a post over the network. The data then gets given to the

component for rendering.

doesn't care where it gets its data from - in the future, we could reuse it to display posts fetched from a third-party API such as Facebook or Twitter.

Container components are so called because they tend to encapsulate entire functional areas of your app. They make your project work and represent the app's backend systems.

In a real codebase,

would have even more responsibility. It would need to track whether the post has loaded and handle errors during the network fetch. Consequently, the

method may incorporate some basic logic to alter what gets displayed - either an error message, a progress bar or our presentational

component. Presentational components never have any greater responsibility than rendering a specific section of the UI into the DOM.

Using this pattern helps you to organise your codebase and prevents components from becoming too unwieldy. Although it's not a hard-and-fast rule, diligent separation of the two types improves maintainability as your project's component count grows.

Try to look for opportunities to refactor as a container component's

method grows. It's likely you could take much of its contents and split it into a new presentational component. This makes it easier to reuse the presentational code in the future. It ends up self-contained and capable of operating independently of any specific data source.

Stateful components are less likely to be reused. Non-trivial behaviours naturally accumulate within them, resulting in dependencies on the outside world. That's not to say they can't be reused though - a two-stage confirmation button will contain internal state (to determine whether to display "Reset User's Password" or "Are You Sure?") but will also be deployed throughout your codebase.

Perhaps more than anything, intentionally distinguishing between Presentional and Container components keeps you aware of where your application's state lies. Minimising the number of components with state contributes towards a maintainable codebase and helps to separate concerns.

If you can't decide whether a component should hold state, keep coding and refactor later - it's probably too early in your project's lifecycle to know where the complexity (and hence the state) will congregate.

We make lives simpler, safer, and better for more than 1.5 billion people.

Turn accurate weather data into actionable business insights.

Our services help you make weather-related business decisions.

AccuWeather is global weather and digital media leader.

Elevate your ad strategy with superior reach and results.

Need specs and guidelines for your AccuWeather ad?

Access the latest resources from AccuWeather.

2019 ForecastWatch Report on Global Temperature Forecasts

October 31, 2019 • 10 min read

Winter weather forecast and disruption index overview

October 31, 2019 • 1.5 hours

Get the latest updates from AccuWeather.

AccuWeather meteorologists are available 24/7 to provide further insights and updates on evolving weather conditions. Please contact [email protected] during regular business hours, or [email protected] or call AccuWeather’s Media Hotline at (814)-235-8710 at any time to arrange interviews with AccuWeather experts or to request the most updated graphics for print or broadcast.

First Major Heat Wave of the Year In The Southwest, Growing Risk of Wildfires

June 3, 2024

In-App Purchases

Configure Your Subscription Product Here

> AccuWeather RealFeel® High Temperatures of 110 degrees and higher are forecast in parts of California, Nevada, and Arizona this week > ‘High’ risk of wildfires in parts of Arizona and New Mexico through Thursday > ‘Moderate’ risk of wildfires in Florida this week due to expanding drought

AccuWeather Global Weather Center – June 3, 2024

As AccuWeather has been forecasting for more than a week, the first big heat wave of the season will bring scorching temperatures and a high risk of wildfires to parts of the southwestern United States this week.

The warming trend will bring rising temperatures to parts of California, Arizona, New Mexico, Nevada, Utah, Colorado, Oregon, Idaho, and Wyoming between Tuesday and Friday. High-temperature records will be challenged, with temperatures forecast to climb 5 to 20 degrees above the historical average.

AccuWeather expert meteorologists say a bulge in the jet stream due to high-pressure building in the atmosphere and a storm offshore of California will allow the heat to build, without any shower or thunderstorm activity in much of the West.

Millions of people in the Southwest will feel the intense heat later this week.

AccuWeather is forecasting a high temperature of 103 degrees on Tuesday in Sacramento, California, which would tie the record set in 1935.

AccuWeather is forecasting a high temperature of 112 degrees in Phoenix on Thursday and 113 degrees on Friday.

AccuWeather is forecasting a high temperature of 111 degrees in Las Vegas on Thursday, with an AccuWeather RealFeel® High forecast of 117 degrees.

In southwest Utah, AccuWeather is forecasting a high temperature of 108 degrees in St. George on Thursday. The AccuWeather RealFeel® High forecast in St. George is 112 degrees.

The daily record high temperature in Fresno, California will also be challenged on Thursday. The current record of 107 degrees was set in 1903. AccuWeather expert meteorologists are forecasting a high of 105 degrees in Fresno on Thursday with an AccuWeather RealFeel® High of 109 degrees.

“Additional locations across California’s interior Sacramento and San Joaquin valleys will match or set daily record highs through the week,” said AccuWeather meteorologist Alyssa Glenny.

People who are working and spending time outside in these areas are urged to stay hydrated, wear proper clothing and shoes, and take breaks in shaded or air-conditioned areas to avoid heat-related illnesses.

The AccuWeather 2024 U.S. Summer Forecast issued in March accurately predicted that hot and dry conditions would bake much of the Southwest and that the arrival of the monsoon would be delayed.

Growing Risk Of Wildfires

The sizzling heat and blazing sunshine will raise the risk of brush and grassfires from central and northern California, as well as a ‘moderate’ and ‘high’ risk of wildfires in parts of Arizona and New Mexico.

After two winter seasons with ample rainfall and snowpack, there is plenty of deep soil moisture in many places across California, but AccuWeather expert meteorologists warn that topsoil and quick-burning fuels like grass can dry out quickly. A fire that sparked over the weekend near Tracy, California burned more than 14,000 acres and led to evacuations.

“The Corral Fire has become the first 10,000-acre fire this year in California,” said AccuWeather Meteorologist Brandon Buckingham. “Given the heat, dryness, and sunshine this week, there will likely be more fires breaking out that can quickly spread.”

Recent rainfall across much of the Northwest will keep the risk of wildfires low this week.

On the other side of the country, abnormally dry and drought conditions are also expanding in parts of central and south Florida.

AccuWeather expert meteorologists issued a ‘moderate’ risk of fires for much of the Florida peninsula, including Orlando and part of the Tampa Bay area.

Additional AccuWeather Resources:

First heat wave of season for western US to increase wildfire danger Heat exhaustion vs. heatstroke: What are the warning signs and how should you react? 10 tips to stay cool during a heatwave AccuWeather Heat Wave Index

Sizzling summer temperatures could lead to higher power bills across america.

Press Release

Comcast Technology Solutions Selected by AccuWeather for Managed Channel Origination

Multiyear agreement for AccuWeather to use CTS to acquire, prepare, create, package, and deliver linear TV and OTT channels

MEDIA ADVISORY: Sizzling Summer Temperatures Could Lead To Higher Power Bills Across America

Temperatures will soar two to four degrees above the historical average across much of the United States this summer, leading to an increased demand for electricity to run air conditioners. AccuWeather Global Weather Center - May, 1, 2024 - AccuWeather's team of long-range forecasters says millions of Americans are expected to experience above-historical average temperatures...

Brainstorm and AccuWeather® Team Up On Joint Development of New Generation of 3D Applications For TV Weather Presentations

The Companies, With A Long History Of Collaborations, Will Partner to Develop Real-Time, Data-Powered 3D Weather Products, Augmented Reality, and Virtual Sets. Brainstorm Booth SL4097 and AccuWeather Booth SL5031 NAB 2024, Las Vegas, NV - April 15, 2024 - Brainstorm, leading manufacturer of real-time 3D graphics and virtual studio solutions, and AccuWeather®, the world's most...

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

by GEOFF HARRIS | The National Desk

People react to the guilty verdict announced against former President Donald Trump outside Manhattan Criminal Court, Thursday, May 30, 2024, in New York. Donald Trump became the first former president to be convicted of felony crimes as a New York jury found him guilty of 34 felony counts of falsifying business records in a scheme to illegally influence the 2016 election through hush money payments to a porn actor who said the two had sex. (AP Photo/Julia Nikhinson)

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.

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

project2-guidelines.md

Latest commit, file metadata and controls, project #2 - react web application.

This is your second project, where you can show off all you’ve learned this module!

During this project, you will be developing a Single Page Application (SPA) , using React , consisting of multiple views .

This project will be carried out individually

Important Dates 🗓️

Pitch presentation: june 4.

Present at least 2 ideas to the LT in order to decide which project you'll develop.

Project Start: June 6

We officially begin our project development!

NOTE : All labs and assessments need to be submitted by this date!

MVP: June 25

You'll present your MVP - Minimum Viable Product - to the LT and TA. MVP means you should have a working project with your basic features working.

Deploy: June 27

We'll deploy both frontend and backend together in order to have enough time to fix any problems that might appear after the deploy.

Project Presentation: July 2

You'll present your projects for everyone! At the end the class will vote on the projects in 4 categories: Most Aesthetically Pleasing, Most Challenging Coding Wise, Most Original Idea and Best Overall! More info on the presentation below.

Project Weeks Schedule 👩‍💻

We gather in circle and everyone should answer the following questions:

What did I do last class (or the last time you worked on the project)
What will I do today
What are my blockers

Project Development

We focus totally in developing the projects and the LT will be here to help you! To get help request it using the ticketing system on Slack!

Project Requirements ✅

Create a Single Page Application (SPA) , using React , consisting of multiple views .
The React application should be integrated with a mock backend and an external API and should perform all CRUD (Create, Read, Update, Delete) operations .
Your project should be deployed online , allowing anyone to access and use your app.
Have your **project available on GitHub repositories: one for your front-end React application and the other for your back-end API.
Have at least 1 commits per day on your project repository that you worked on.
Present a MVP - Minimum Viable Product.
Present your project to the class by the end of the module.

Deliverables - by the end of module #2

A working and deployed app that meets all technical requirements , built by you .
The URL to the deployed React app .
The two URLs of your GitHub repositories (frontend and backend).
The URL of the slides for your project presentation .
Your GitHub repos must have a README with the completed project documentation .

Presentation

Format: Talking with slides + project live demo
The demo must be made on the deployed site
Slides must be online (Canva, Google Slides, other of your choosing)
Title Slide - Project name and your name
About Me: Present yourself
Elevator Pitch: Present your project
Technical Challenge: What was the hardest part and how did you overcome it
Big Mistake: What was the biggest mistake and what did you learn
Demo Link: You deployed version link should be on the final slide
Don't show your code, no one will read it
If something doesn't work, don't focus on in
Show your work and be proud of it
Practice your presentation

Bellow are some projects from the previous cohort:

Ironprojects Hub
Atlas of Conquests
Iron Surf Store
Phoenix Pages

IMAGES

15+ Great React Project Examples to Get Inspired by Made with React
12+ Awesome React Slider Component Examples
Build react image slider carousel
8 Best React Slideshow Libraries: The Ultimate List
8 Best React Slideshow Libraries: The Ultimate List
GitHub

VIDEO

2 ways I react to presentations
Beginner's Guide to React JS #reactjs
Watching YOUR JoJo slideshow presentations
REACTING to YOUR CRAZY PRESENTATIONS
Les News Disney Parks
I came from abusive home and now am in abusive marriage (I need help)

COMMENTS

[Final] ReactJS presentation
洪鹏发. React JS is a JavaScript library for building user interfaces. It uses a virtual DOM to efficiently update the real DOM and render user interfaces from components. Components are reusable pieces of UI that accept input data via properties but maintain private state data. The lifecycle of a component involves initialization, updating ...
GitHub
React-presents is a React slideshow framework that lets you create interactive and customizable presentations with React components. You can use it to build slides with code snippets, live demos, animations, and more. React-presents is compatible with PptxGenJS, a library that allows you to export your slides to PowerPoint format. Check out the GitHub repository to learn how to use React ...
A React-based library for creating sleek presentations using JSX syntax
A React-based library for creating sleek presentations using JSX syntax that gives you the ability to live demo your code. - FormidableLabs/spectacle
React.js fundamentals
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
React for Beginners
React for Beginners - A React.js Handbook for Front End Developers is a comprehensive guide that covers the basics of React, a popular JavaScript framework for building user interfaces. You will learn how to create components, manage state, use hooks, and work with APIs. Whether you are new to React or want to refresh your skills, this handbook will help you master the fundamentals of React.
wyozi/react-pptx: Create PowerPoint presentations with React
React.ReactElement<PresentationProps> The Presentation component to preview. slideStyle: React.CSSProperties: Optional styles to apply to each slide in the preview. drawBoundingBoxes: boolean: false: Whether to draw bounding boxes around each slide object in the preview.
React Framework
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.
PDF Introduction to React
First React hook: useState. Purpose: Remember values internally when the component re-renders. Tell React to re-render the component when the value changes. Syntax: const [val, setVal] = useState(100); The current value. A setter function to change the value The initial value to use.
ReactJS Powered Presentation Framework
ReactJS Powered Presentation Framework is a web tool that allows you to create and share interactive presentations using React.js components. You can customize the layout, theme, transitions, and animations of your slides, and use code editors, charts, maps, and other widgets to enhance your content. Learn how to use this framework and see some examples of React.js powered presentations.
Top 10 JavaScript frameworks to create presentation slides
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 ...
The Complete React Tutorial for 2021
You will learn how to create an entire React application all within around 100 lines of code, which makes use of many of the core concepts of React: hooks, state management, forms, JSX elements, components, props, styling, and conditionals. And best of all, you will learn all of these concepts while coding yourself, hands-on.
Presentations: Intro to React, Redux, and TypeScript (2020)
An updated introduction to React, Redux, and TypeScript for 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 ...
React workshop presentation
May 30, 2018 • Download as PPTX, PDF •. 2 likes • 7,209 views. B. Bojan Golubović. React Readux workshop presentation. Software. 1 of 29. Download now. React workshop presentation - Download as a PDF or view online for free.
React
React lets you build user interfaces out of individual pieces called components. Create your own React components like Thumbnail, LikeButton, and Video. Then combine them into entire screens, pages, and apps. Whether you work on your own or with thousands of other developers, using React feels the same. It is designed to let you seamlessly ...
Get Started with React
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.
Presentational and Container Components
Since React 0.14, components can be declared both as classes and as functions. Functional components are simpler to define but they lack certain features currently available only to class components.
nkzw-tech/remdx: Beautiful Minimalist React & MDX Presentations
Basics: React + Markdown together is a great way to make technical JavaScript presentations. Minimal: ReMDX has few features. If you'd like to add new features, please fork it and consider sending a Pull Request. Composable: ReMDX doesn't box you in. Bring your design system or use Tailwind to lay out your slides.
The HTML presentation framework
reveal.js is an open source HTML presentation framework. It's a tool that enables anyone with a web browser to create fully-featured and beautiful presentations for free. Presentations made with reveal.js are built on open web technologies. That means anything you can do on the web, you can do in your presentation. Change styles with CSS ...
pptxgenjs
If you are having issues getting a presentation to generate, check out the code in the demos directory. There are demos for both client browsers, node and react that contain working examples of every available library feature. Use a pre-configured jsFiddle to test with: PptxGenJS Fiddle; View questions tagged PptxGenJS on StackOverflow.
Container/Presentational Pattern
Container/Presentational Pattern. In React, one way to enforce separation of concerns is by using the Container/Presentational pattern. With this pattern, we can separate the view from the application logic. Let's say we want to create an application that fetches 6 dog images, and renders these images on the screen. DogImages.js.
What Are Presentational and Container Components in React?
The container component's. method is almost identical to that in the presentational component. The difference is the container component sources its text from inside itself, instead of relying on an outside value passed in as a prop. Each second, the container component calls. to update the. key in its state.
react-presents
React Presents: a slideshow framework github.com/bvaughn/react-presents (Use the right and left arrow keys to navigate)
Severe Weather Advisory
AccuWeather Global Weather Center - June 3, 2024. As AccuWeather has been forecasting for more than a week, the first big heat wave of the season will bring scorching temperatures and a high risk of wildfires to parts of the southwestern United States this week. The warming trend will bring rising temperatures to parts of California, Arizona ...
GitHub
React presentation. This is a presentation engine built with React.js , which allows to use the power of React components to get a concise, but powerful API for creating presentations.
Politicians and celebrities flood social media with reactions to Trump
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."
module2_codealongs/project2-guidelines.md at main
Project Requirements . Create a Single Page Application (SPA), using React, consisting of multiple views. The React application should be integrated with a mock backend and an external API and should perform all CRUD (Create, Read, Update, Delete) operations. Your project should be deployed online, allowing anyone to access and use your app.