16 - Next steps

Congratulations on reaching this far!

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:

• Clone the GitHub repo

/var/tmp: git clone https://github.com/mayankchoubey/learn-react-by-example-file-io-app.git
Cloning into 'learn-react-by-example-file-io-app'...
remote: Enumerating objects: 81, done.
remote: Counting objects: 100% (81/81), done.
remote: Compressing objects: 100% (66/66), done.
remote: Total 81 (delta 19), reused 61 (delta 12), pack-reused 0
Receiving objects: 100% (81/81), 298.42 KiB | 821.00 KiB/s, done.
Resolving deltas: 100% (19/19), done.

• To run the vanilla app

/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.

Suggestions for improvement

You can also DM (https://twitter.com/MayankCh10/) me any improvement suggestions like:

• Anything missing in the book

• Anything that has not been explained properly

• Anything that has been explained way too quickly

• Any place you feel diagrams are missing

• Any other suggestions

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.

--

That's all about it. Thanks for reading!