React 18.0.2

[Florencia Abila]

Reacthas been designed from the start for gradual adoption, and you can use as little or as much React as you need. Whether you want to get a taste of React, add some interactivity to a simple HTML page, or start a complex React-powered app, the links in this section will help you get started.

As your application grows, you might want to consider a more integrated setup. There are several JavaScript toolchains we recommend for larger applications. Each of them can work with little to no configuration and lets you take full advantage of the rich React ecosystem. Learn how.

This documentation section is useful when you want to learn more details about a particular React API. For example, React.Component API reference can provide you with details on how setState() works, and what different lifecycle methods are useful for.

If something is missing in the documentation or if you found some part confusing, please file an issue for the documentation repository with your suggestions for improvement, or tweet at the @reactjs account. We love hearing from you!

If you've previously installed create-react-app globally via npm install -g create-react-app, we recommend you uninstall the package using npm uninstall -g create-react-app or yarn global remove create-react-app to ensure that npx always uses the latest version.

Running any of these commands will create a directory called my-app inside the current folder. Inside that directory, it will generate the initial project structure and install the transitive dependencies:

So forgive me for choosing a flimsy metaphor. You can keep listening to the same music for the rest of your life, if you want to. I support that. But we have very valid and important reasons to push beyond the comfort of our existing preferences when it comes to the tools we use.

Sure, other frontend frameworks have their own rules and conventions about state and architecture. You can step on figurative rakes in their yards, too. And yes, there will always be things that are, and need to be, built specifically to work with Svelte or Vue or whatever else.

Preact Signals is a phenomenal example: although built for use with Preact, it can be imported and used in any framework, or even in vanilla JavaScript. Web components, too, are compatible with just about any modern non-React framework.

There was a time, several years ago, when React was pretty much the only game in town when it came to server-rendered content (mainly via Next JS). People were rightly excited for the idea that React could be rendered on a server as HTML, instead of on the client as a Single-Page App (SPA). The speed and SEO gains were impossible to ignore, and initially, it took other frameworks a bit to catch up.

I also omitted the lightweight options like Alpine and Petite Vue, since those are more replacements for jQuery than React, and shine where you might not need something as heavy-handed as a framework.

In some ways, Vue is the smallest leap from React, especially now that it has a similar hooks-based approach in Vue 3. But Vue uses a templating language closer to default HTML than to JSX, which makes it much easier to write conditionals and loops in template files, without having to reach for workarounds like map and ternaries.

Vue has a similar meta-framework to Next in Nuxt, which is well maintained and adding powerful new features all the time. Vue is also a bit more batteries-included than React, coming with things like scoped CSS handling and easy transitions/animations out of the box.

Community size/overall framework popularity is an important factor for you; you want something like React, but more batteries-included or HTML-like; you prefer your framework to be independent and not be owned by a large corporation.

Still, there are certainly use cases for which a purely web component-based approach ought to be considered. And for those projects, React is definitely overkill. The web component libraries mentioned above would be a much better fit.

You need to reuse the same components in multiple environments; want to future-proof yourself against framework changes; or just prefer using the platform, and are prepared to deal with the tradeoffs of web component authoring.

This post is, admittedly, a lot like my post from last year, The self-fulfilling prophecy of React. It treads some of the same territory, and makes some of the same arguments (albeit hopefully in new ways or from new perspectives).

Automatic runtime (since v7.9.0) adds the functionality for these plugins automatically when the development option is enabled. If you have automatic runtime enabled, adding @babel/plugin-transform-react-jsx-self or @babel/plugin-transform-react-jsx-source will error.

I'm writing these random notes as an open letter to the people I deeply trust in the React (and more generally, the open-source) community. People like Tanner Linsley, Laurie Voss, Cassidy Williams, Michael Jackson, Mark Erikson, Kyle Mathews, Sophie Alpert and many others.

I fell in love with React in 2016 when Angular announced Angular 2 and we were worried about the breaking changes. I immediately fell in love with the React community, even though I never actively participated.

I remember the tweets between Sophie Alpert and Dan Abramov. I also remember the first talk at ReactJsDay (Italy) by Michele Bertoli in 2016, which made my eyes sparkle. And I can't forget the 2018 edition of ReactJsDay when Michael Jackson recreated much of React Router live coding in front of us - those were great days!

React has been a winning choice for us, both as a web development agency and now as a product company. I still get emotional when I think about the day (I believe it was January 2nd, 2020) when I showed the first MVP of React Bricks to Guillermo Rauch, who was the first to believe in the project and gave me the confidence to go on.

Furthermore, features like Server actions, which trigger metered serverless function calls when hosted on cloud platforms, may potentially increase hosting costs for frontend applications in the future. While this is not currently a problem since there is no monopoly and we have the freedom to choose, I would like a way for the community to be guaranteed that tomorrow there will still be multiple choices available. Please understand that I don't see anyone as being "evil" in this regard. Great things can come from the collaboration between a private company and the community. It's simply a matter of separating concerns and responsibilities.

I started creating websites in 1996, when I was 17 years old. At that time, you created HTML files and uploaded them to an FTP server to a folder served by a web server. I managed my own physical server (a Pentium 120), housing it at a local Internet Provider. It ran on Windows NT4 IIS as webserver, BIND for DNS, and IPSwitch IMail server for email. Everything was simple and clear.

Nowadays, web development has become more powerful, but also much more complex. We have lost touch with what's happening under the hood, with the introduction of transpilers, bundlers, and frameworks. However, React stands out with its clean one-way data flow. Things got a bit more complicated with hooks (which have some behind-the-scenes black magic :), but it was manageable and, in the end, a good choice.

With Server components, everything is much more complex to grasp. And, the fact that they are the default choice in the most widely used React framework, somewhat forces newcomers to also learn this new paradigm. I understand the advantages of RSC, but now we have two different ways of building things even within the same React framework.

We have recently completed the task of making the React Bricks library compatible with RSC. This required a month of work and thousands of lines of code. However, as a result, the final API for developers is not as clean as before. I am uncertain whether sacrificing simplicity for a slight performance boost will truly benefit our customers. Nevertheless, since it is both the "default" and the shiny new thing, we have to have it.

In this complex scenario, it would be beneficial to have a "default, official" React framework that covers the basic needs of building a SEO-friendly website, with routing, SSG, SSR, ISR (and all the permutations of these letters ;). I know the Remix team would not agree on the need for SSG, but I think it has valid use cases. And I would like it to always be self-hostable on a Linux box.

I envision this default framework being developed by the React community, with a steering committee consisting of recognized contributors from the React ecosystem (through a voting process?). I know that usually open source doesn't work in this way, but... I dream of this "probi viri Fellowship of the Ring" making decisions.

This default framework should not aim to include all the shiny new things out there, found in other frameworks like Remix or Next.js, which I use and love. I believe it should serve as a solid starting point created by the community. And I think we have already some great stuff available today to start with (Tanner?).

As for RSC, I think the concept of avoiding hydration is great, but we need a new kind of server-client integration to make them easy to use. If they remain complex, with the current constraints, trading simplicity for performance would not be beneficial for most websites. And probably RSC is losing in terms of performance compared to something like Qwik, anyway, because they are performing the same work twice, processing chunks from serialized JSON on the client. However, this is material for a separate discussion.

I've been thinking about a lot of these topics lately. I've had side discussions, private complaints, interactions with the React team on Twitter, and passed on community feedback to the React DevRels .

3a8082e126