dan gaearon

If you use server rendering, keep in mind that neither useLayoutEffect nor useEffect can run until the JavaScript is downloaded.

You might see a warning if you try to useLayoutEffect on the server. Here's two common ways to fix it.

Option 1: Convert to useEffect

If this effect isn't important for first render (i.e. if the UI still looks valid before it runs), then useEffect instead.

function MyComponent() {

If you get an "Invalid name" error when you run npm init -y, rename the project folder to only contain lowercase ASCII letters or hyphens (e.g. my-project), and try again.

In production, it is recommended to minify any JavaScript code that is included with your application. Minification can help your website load several times faster, especially as the size of your JavaScript source code grows.

Here's one way to set it up:

Install Node.js
Run npm init -y in your project folder (don't skip this step!)
Run npm install terser

Now, to minify a file called like_button.js, run in the terminal:

If you haven’t worked with JavaScript in the last few years, these three points should give you enough knowledge to feel comfortable reading the React documentation:

We define variables with let and const statements. For the purposes of the React documentation, you can consider them equivalent to var.
We use the class keyword to define JavaScript classes. There are two things worth remembering about them. Firstly, unlike with objects, you don't need to put commas between class method definitions. Secondly, unlike many other languages with classes, in JavaScript the value of this in a method [depends on how it is called](https://developer.mozilla.org/en-US/docs/Web/Jav

	const express = require('express');
	const app = express();

	// Application
	app.get('/', function(req, res) {
	if (process.env.NODE_ENV === 'development') {
	for (var key in require.cache) {
	delete require.cache[key];
	}
	}

	function MyResponsiveComponent() {
	const width = useWindowWidth(); // Our custom Hook
	return (
	<p>Window width is {width}</p>
	);
	}

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Add React in One Minute</title>
	</head>
	<body>

	<h2>Add React in One Minute</h2>
	<p>This page demonstrates using React with no build tooling.</p>

	'use strict';

	class LikeButton extends React.Component {
	constructor(props) {
	super(props);
	this.state = { liked: false };
	}

	render() {
	if (this.state.liked) {

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8" />
	<title>Add React in One Minute</title>
	</head>
	<body>

	<h2>Add React in One Minute</h2>
	<p>This page demonstrates using React with no build tooling.</p>

	'use strict';

	const e = React.createElement;

	class LikeButton extends React.Component {
	constructor(props) {
	super(props);
	this.state = { liked: false };
	}