We've come a long way in the last 15 sections. We've started from zero or very basic level of React knowledge. Now, we know about: react dev environment, components, JSX, props, states, effect, ref, etc. The only purpose of this book is to take you from the world you know to the world you want to know. By no means this is an exhaustive reference on React. There is no need to become one. The market is full of good, exhaustive references. This book has been written to help you learn React while migrating a real app (file.io). The way of teaching makes this book unique. We could have chosen abstract/dummy apps like ecommerce, to-do lists, etc. But we chose a simple but practical app. We've used file.io many times in the past. The simplicity of file.io app helped a lot in covering React fundamentals.
Once again, congratulations on making this far in the book!
Here are some next steps for you:
Run it yourself
To run the vanilla and react app yourself, you can take the following steps:
/var/tmp: cd learn-react-by-example-file-io-app/
/var/tmp/learn-react-by-example-file-io-app: cd vanilla-app/
/var/tmp/learn-react-by-example-file-io-app/vanilla-app: npm i
added 77 packages, and audited 78 packages in 2s
9 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
/var/tmp/learn-react-by-example-file-io-app/vanilla-app: npm start
> vanilla@1.0.0 start
> node --watch server.mjs
(node:82853) ExperimentalWarning: Watch mode is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
File.io vanilla app listening on port 3000
You can open browser http://localhost:3000 and check it out.
To run React app:
In first terminal:
/var/tmp: cd learn-react-by-example-file-io-app/
/var/tmp/learn-react-by-example-file-io-app: cd react-app/
/var/tmp/learn-react-by-example-file-io-app/react-app: cd server/
/var/tmp/learn-react-by-example-file-io-app/react-app/server: npm i
added 78 packages, and audited 79 packages in 669ms
10 packages are looking for funding
run `npm fund` for details
found 0 vulnerabilities
/var/tmp/learn-react-by-example-file-io-app/react-app/server: npm start
> react-server-app@1.0.0 start
> node --watch server.mjs
(node:83132) ExperimentalWarning: Watch mode is an experimental feature and might change at any time
(Use `node --trace-warnings ...` to show where the warning was created)
File.io vanilla app listening on port 3001
In second terminal:
/var/tmp/: cd learn-react-by-example-file-io-app
/var/tmp/learn-react-by-example-file-io-app/: cd react-app
/var/tmp/learn-react-by-example-file-io-app/react-app: cd client
/var/tmp/learn-react-by-example-file-io-app/react-app/client: npm i
npm WARN deprecated stable@0.1.8: Modern JS already guarantees Array#sort() is a stable sort, so this library is deprecated. See the compatibility table on MDN: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort#browser_compatibility
npm WARN deprecated rollup-plugin-terser@7.0.2: This package has been deprecated and is no longer maintained. Please use @rollup/plugin-terser
npm WARN deprecated w3c-hr-time@1.0.2: Use your platform's native performance.now() and performance.timeOrigin.
npm WARN deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
npm WARN deprecated svgo@1.3.2: This SVGO version is no longer supported. Upgrade to v2.x.x.
added 1512 packages in 5s
238 packages are looking for funding
run `npm fund` for details
/var/tmp/learn-react-by-example-file-io-app/react-app/client: npm start
Compiled successfully!
You can now view client in the browser.
Local: http://localhost:3000
On Your Network: http://192.168.10.65:3000
Note that the development build is not optimized.
To create a production build, use npm run build.
webpack compiled successfully
Open browser and go to http://localhost:3000 to check it out.
Reviews
This book is a free resource for anyone who wants to get started with React differently. As this book has been hosted on GitBook, there is no place like Amazon where you can submit your reviews. But there is a way you can provide reviews and help others.
If this book turns out to be a helpful resource for you & you like to help other fellow learners, please share your review with me in a DM to my Twitter account: https://twitter.com/MayankCh10/. I'll be adding reviews to this page every week.
As this book on GitBook, it can be updated easily. All your suggestions will be addressed within a week.
Companion guide
A short companion guide will be published shortly to show how to develop the same file.io app using Next.js. Next.js is a very popular, flexible React framework that gives you building blocks to create fast web applications.
The companion guide is expected to publish towards the end of June 2023.