**_Building a Web Client with React for Book App
Getting Started With React App — Part 1
About the project
We are going to do the following things in a multi-part series:
Create react app
Add multiple components on the application
Design page layout and styling
Connect our web client to our generated (API) db.json server using Apollo Client and making calls to our API.
*If you want to develop
*Users will be able to create books, read, update, and delete their books.
*Users can view a feed of books created by other users. User can not update or delete other users books.
- Users will be able to view the books.
Getting Started With React App
What is React?
A JavaScript library for building user interfaces
React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes.
React components implement a render() method that takes input data and returns what to display. This example uses an XML-like syntax called JSX. Input data that is passed into the component can be accessed by render() via this.
then,
When we run npx create-react-app my-app it automatically installs the latest version of Create React App.
Run command prompt as Administrator. Then type following command to install.
npm install -g create-react-app
Create React App
Go to project folder and create project
F:
cd F:\javascript-projects
npx create-react-app book-app
Running npx create-react-app book-app command will create a directory called book-app inside the current folder.
Inside that directory, it will generate the initial project structure and install the transitive dependencies:
We can delete or rename the other files.
We can create subdirectories inside src. For faster rebuilds, only files inside src are processed by webpack. You need to put any JS and CSS files inside src, otherwise webpack won’t see them.
Only files inside public can be used from public/index.html.
If you have Git installed and your project is not part of a larger repository, then a new repository will be initialized resulting in an additional top-level .git directory.
Run the application
Already app is running, no need to start. If your application is not running then you can use “npm start” command to run the application.
Top comments (0)