React

Introuction to React

Assumptions

• Have read the previous section about javascript

• Know basic HTML/CSS

• Able to write code using Javascript

Part 1

• A bit about React.js

• React component lifecycle

• Introduction to JSX

• State management in React

• Lifting up state

• CRUD Operations using React.js

Part 2

• Using local browser api for local storage

• Using external libraries in React.js

• Deploying your web app using Vercel

Expectations

• This workshop will focus on a few concepts behind react.js and how to use them in practice.

• The workshop assumes you are a beginner, the goal is to make you familiar with the syntax and give a basic idea of how you should go about when implement these concepts in your own project.

Creating your first react app on local machine

Note: No problem if you having trouble doing this, because we will be using codesandbox for the workshop and all the links will be provided. So you can focus on this later when you are building your project.

Install Node.js

1. Download Node.js from this link (Choose the LTS version)

2. Open the Terminal (macOS) or Command Prompt (Windows) app

3. Run the following commands (in bold) and ensure they return similar (doesn’t have to be exactly the same) output

   v18.16.0
   $ npm --version
   v9.6.6```

Create a React app

1. Open the Terminal (macOS) or Command Prompt (Windows) app

2. Navigate to the desired directory in which to create the React project $ cd path/to/desired/directory

3. Run the following commands (in bold) and it should do a bunch of stuff and ultimately say something like “Successfully created!” and a whole bunch of other output

   Installing...
   $ cd your-project-name```

4. To start the project, run the following commands $ npm start

5. Open the folder using your preferred code-editor