Skip to main content

Create a New React.js App

 We are now ready to work on our frontend. So far we’ve built and deployed our backend API and resources. We used Serverless for it. We are now going to build a web app that connects to our backend.

We are going to create a single page app using React.js. We’ll use the Create React App project to set everything up. It is officially supported by the React team and conveniently packages all the dependencies for a React.js project.

Let’s move to a new directory.

 From the project root of your backend repo, run the following.

$ cd ../

Create a New React App

 Run the following command to create the client for our notes app.

$ npx create-react-app notes-app-client --use-npm

This should take a second to run, and it will create your new project and your new working directory.

Installation

You can install this library from npm by running:

npm install web-vitals

 Now let’s go into our working directory and run our project.

$ cd notes-app-client
$ npm start

This should fire up the newly created app in your browser.

New Create React App screenshot

Change the Title

 Let’s quickly change the title of our note taking app. Open up public/index.html and edit the title tag to the following:

<title>Scratch - A simple note taking app</title>

Create React App comes pre-loaded with a pretty convenient yet minimal development environment. It includes live reloading, a testing framework, ES6 support, and much more.

Now we are ready to build our frontend. But just like we did with the backend, let’s first create a GitHub repo to store our code.

Table of Contents

Comments

Post a Comment

Popular posts from this blog

Node JS Install All Version

  Previous Releases io.js & Node.js Releases 1.x through 3.x were called "io.js" as they were part of the io.js fork. As of Node.js 4.0.0 the former release lines of io.js converged with Node.js 0.12.x into unified Node.js releases. Looking for latest release of a version branch? Node.js 13.x Node.js 12.x Node.js 11.x Node.js 10.x Node.js 8.x Node.js 6.x Node.js 4.x Node.js 0.12.x Node.js 0.10.x All versions Version LTS Date V8 npm NODE_MODULE_VERSION [1] Node.js 15.11.0 2021-03-03 8.6.395.17 7.6.0 88 Downloads  Changelog  Docs Node.js 15.10.0 2021-02-23 8.6.395.17 7.5.3 88 Downloads  Changelog  Docs Node.js 15.9.0 2021-02-18 8.6.395.17 7.5.3 88 Downloads  Changelog  Docs Node.js 15.8.0 2021-02-02 8.6.395.17 7.5.1 88 Downloads  Changelog  Docs Node.js 15.7.0 2021-01-25 8.6.395.17 7.4.3 88 Downloads  Changelog  Docs Node.js 15.6.0 2021-01-14 8.6.395.17 7.4.0 88 Downloads  Changelog  Docs Node.js 15.5.1 2021-01-04 8.6.395.17 7.3.0 88 Downloads  Changelog  Docs Node.js 15.5.
Read more

Create a New React.js App

Image
  We are now ready to work on our frontend. So far we’ve built and deployed our backend API and resources. We used Serverless for it. We are now going to build a web app that connects to our backend. We are going to create a single page app using  React.js . We’ll use the  Create React App  project to set everything up. It is officially supported by the React team and conveniently packages all the dependencies for a React.js project. Let’s move to a new directory.  From the project root of your backend repo, run the following. COPY $ cd ../ Create a New React App  Run the following command to create the client for our notes app. COPY $ npx create-react-app notes-app-client --use-npm This should take a second to run, and it will create your new project and your new working directory.  Now let’s go into our working directory and run our project. COPY $ cd notes-app-client $ npm start This should fire up the newly created app in your browser. Change the Title  Let’s quickly change the t
Read more