Main page: https://reactjs.org/

React Learning Resources

Important: These resources available to UCSB students/faculty/staff by first logging in at https://bit.ly/ucsb-or then navigating to the links below.

Online Books:

Tutorials for beginners

• Learning React, 2nd Edition
  • Best intro I’ve found in the O’Reilly library
• React Key Concepts
  • Another intro to React

Deeper Dives for folks with some React background

• Fluent React
  • A slightly deeper dive into some of the technical concepts of React
  • Good if you already know some React, and want a deeper understanding of how the pieces work together

Video Courses:

• React JS Masterclass - Go From Zero To Job Ready (34 hours)
  • I suggest that if you use this resources, don’t necessarily expect to do all 34 hours!
  • Instead, use it to help you get past the point of being “lost in the syntax”
  • A few good videos to start with:
    • React Behind the Scenes (11m34s)
    • JSX: In-Depth Introduction (12m11s)
    • Why We Need States? (10m2s

React Naming Conventions

See: https://maxrozen.com/guidelines-improve-react-app-folder-structure/

Linting your react code

To check your code for style issues, you can use eslint.

Install it with npm install eslint --save-dev then run this command, where directory is a directory containing your React code:

npx eslint directory

Be careful that you don’t run eslint on code in a build directory (i.e. the generated JavaScript); you only want to run it on your JavaScript source code.

If you get the error:

Error: Failed to load parser '@typescript-eslint/parser'...

then, try installing typescript manually:

npm install --save-dev typescript

Table of contents

• React: Create React App
• React: Introduction
• React: Page Components
• React: Patterns
• React: Router
• React: Spring Boot
• React: Storybook
• React: UseSWR
• React: react-hook-form